Analytics zu AMP-Seiten hinzufügen

Accelerated Mobile Pages (AMP) ist eine Plattform zum Erstellen von Webseiten für statische Inhalte, die schnell gerendert werden. AMP enthält ein <amp-analytics>-Element, mit dem Nutzerinteraktionen gemessen werden können, und bietet integrierte Unterstützung für Google Analytics.

Grundlegende Einrichtung zum Erfassen von Seitenaufrufen

Wenn Sie eine einfache Installation von Google Analytics auf einer AMP-Seite erstellen möchten, kopieren Sie dieses Code-Snippet und ersetzen Sie <GA_MEASUREMENT_ID> durch Ihre Google-Tag-ID. Google-Tag-ID ermitteln

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Daten an mehrere Ziele senden

Mit demselben <amp-analytics>-Tag können Sie Daten an mehrere Ziele senden. Fügen Sie dazu einfach die neue Mess-ID <GA_MEASUREMENT_ID_NEW> zu Ihrem config-Befehl hinzu.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Funktionsweise

Das <amp-analytics>-Element ist eine erweiterte AMP-Komponente und wird in einem Script-Tag explizit als custom-element aktiviert.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Der Block des <amp-analytics>-Elements ist so konfiguriert, dass die Analyseprodukte von Google unterstützt werden. Setzen Sie das type-Attribut für <amp-analytics> auf gtag, damit gtag.js unterstützt wird, und für das data-credentials-Attribut auf include, um Cookies zu aktivieren.

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

Auf AMP-Seiten ist kein JavaScript zulässig, das über die eigenen genehmigten Bibliotheken hinausgeht. Die Konfiguration erfolgt daher stattdessen mit JSON. Ein gtag_id-Attribut mit einem gültigen <GA_MEASUREMENT_ID> wird in den vars-Block eingefügt und darunter ein Konfigurationsattribut mit <GA_MEASUREMENT_ID>: {} als Wert.

Ereignisse analysieren

Verwenden Sie triggers mit definierten Werten, um Ereignisse auf AMP-Seiten zu erfassen. Diese Attribute werden in einer Triggerkonfiguration verwendet:

  • selector: ein CSS-Selektor zum Angeben eines Zielelements
  • on: gibt den Ereignistyp an.
  • vars: Geben Sie den Ereignistyp in event_name an und fügen Sie bei Bedarf weitere Parameter hinzu.

In diesem Beispiel wird gezeigt, wie Sie ein einfaches Google Analytics-Ereignis einrichten. Erstellen Sie einen Trigger mit dem Namen „button“, der ausgelöst wird, wenn auf ein Element mit dem ID-Wert „the-button“ geklickt wird. Durch diesen Trigger wird der event_name-Wert login und der method-Wert Google an Google Analytics gesendet:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google Analytics-Ereignisse sind Google Analytics-spezifische Ereignisse. Sie werden häufig zum Erstellen von Berichten zu Kampagnen verwendet. Diese Werte können im vars-Block mit den Parametern event_category, event_label und value angegeben werden:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Weitere Informationen zur Triggerkonfiguration finden Sie in der Dokumentation zu amp-analytics.

Parameter ändern

Wenn Sie die standardmäßigen Google Analytics-Parameter überschreiben oder neue Parameter hinzufügen möchten, fügen Sie die gewünschten Werte in den Abschnitt parameter des config-Blocks ein. In diesem Beispiel werden die Standardwerte für Seitenaufrufe und Ereignisse für page_title und page_location überschrieben:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Mit der Domainverknüpfung können zwei oder mehr zusammengehörige Websites in separaten Domains als eine erfasst werden. Geben Sie die Domains an, die mit der Property "linker": { "domains": [...] } verknüpft werden sollen:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Auf AMP-Seiten, für die Google Analytics konfiguriert ist, ist die Möglichkeit zum Verknüpfen mit Ihrer kanonischen Domain aus dem AMP-Cache standardmäßig aktiviert. Wenn Sie nicht möchten, dass in Google Analytics Domain-Traffic verknüpft werden kann, fügen Sie den Konfigurationsparametern "linker": "false" hinzu:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Websitegeschwindigkeit für Universal Analytics

Google Analytics ist so konfiguriert, dass automatisch Daten zur Websitegeschwindigkeit für einen kleinen Teil der Websitezugriffe erfasst werden. Sie können die Abtastrate ändern, um mehr oder weniger Daten zu erfassen. Fügen Sie Ihrer Konfiguration den hervorgehobenen Code hinzu, um die Abtastrate auf 100 % festzulegen:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

Wenn Sie die Erfassung von Daten zur Websitegeschwindigkeit beenden möchten, verwenden Sie den hervorgehobenen Code:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

AMP- und Nicht-AMP-Traffic im Vergleich

Für AMP-Traffic werden standardmäßig andere Client-IDs als für den Webtraffic verwendet. AMP-Seiten werden schneller geladen und zeigen andere Traffic-Muster als ihre Standardwebseiten. Das kann oft bedeuten, dass Sie unterschiedliche Messwerte für AMP- und Nicht-AMP-Zugriffe erhalten.

Wenn Sie den AMP-Traffic mit einer separaten Property messen, erhalten Sie eine bessere Analyse der Messwerte und ein genaueres Bild Ihres Traffics. So unterscheiden Sie zwischen AMP- und Nicht-AMP-Traffic, wenn Sie eine einzelne Property verwenden müssen:

  • Sie können die Dimension „Datenquelle“ oder eine benutzerdefinierte Dimension (Universal Analytics) verwenden.
  • Benutzerdefinierten Ereignisparameter verwenden (Google Analytics 4)

Konfigurationsfehler beheben

Mit dem AMP-Validierungstool lässt sich feststellen, ob eine Webseite nicht der AMP-HTML-Spezifikation entspricht. Fügen Sie der URL einer Seite #development=1 hinzu, um die Validierung zu aktivieren.

Die Erweiterung amp-analytics enthält Warn- und Fehlermeldungen zur Fehlerbehebung und Fehlerbehebung in einer Konfiguration. Fügen Sie #log=1 an die URL einer Seite an, um protokollierte Fehlermeldungen in der Konsole Ihres Webbrowsers zu sehen.

Vollständiges Beispiel

Dieses Beispiel zeigt eine vollständige AMP-Seite mit einer einzelnen Schaltfläche auf einer Seite. Bei dieser Konfiguration werden Standarddaten zu Seitenaufrufen und Klick-Ereignisse an Google Analytics gesendet:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>