Diese Seite wurde von der Cloud Translation API übersetzt.

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, das die Messung von Nutzerinteraktionen ermöglicht, und unterstützt Google Analytics.

Grundlegende Einrichtung zum Erfassen von Seitenaufrufen

Wenn Sie eine Basisinstallation 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

Sie können Daten mit demselben <amp-analytics>-Tag an mehrere Ziele senden. Fügen Sie dazu einfach die neue Mess-ID <GA_MEASUREMENT_ID_NEW> in den config-Befehl ein.

<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 Elementblock <amp-analytics> ist so konfiguriert, dass die Analyseprodukte von Google unterstützt werden. Setzen Sie das Attribut type für <amp-analytics> auf gtag, um die Unterstützung von gtag.js zu aktivieren, und das Attribut data-credentials auf „einschließen“.

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

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

Ereignisse erfassen

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

selector: CSS-Selektor zum Angeben eines Zielelements
on: gibt die Art des Ereignisses an.
vars: Geben Sie den Ereignistyp in event_name an und fügen Sie nach Bedarf weitere Parameter hinzu.

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

<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 eine Ereigniskategorie für Google Analytics. Sie werden häufig verwendet, um Berichte zu Kampagnen zu erstellen. 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 im Abschnitt parameter des config-Blocks ein. In diesem Beispiel werden die standardmäßigen Seitenaufruf- und Ereigniswerte 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>

Link domains

Mithilfe der Domainverknüpfung können zwei oder mehr ähnliche Websites in separaten Domains als eine gemessen werden. Geben Sie die Domains an, die mit der "linker": { "domains": [...] }-Property 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 für einen kleinen Teil der Websitezugriffe automatisch Daten zur Websitegeschwindigkeit erfasst werden. Sie können die Abtastrate ändern, um mehr oder weniger Daten zu erfassen. Fügen Sie Ihrer Konfiguration den markierten 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

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

Wenn Sie AMP-Traffic mit einer separaten Property messen, erhalten Sie eine bessere Analyse der Messwerte und ein genaueres Bild Ihres Traffics. So unterscheiden Sie 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.
Einen benutzerdefinierten Ereignisparameter verwenden (Google Analytics 4).

Konfigurationsfehler beheben

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

Die Erweiterung „amp-analytics“ liefert Warnungen und Fehlermeldungen, um das Debuggen und Beheben von Fehlern in einer Konfiguration zu erleichtern. Fügen Sie #log=1 an die URL einer Seite an, um die protokollierten Fehlermeldungen in der Konsole Ihres Webbrowsers anzusehen.

Vollständiges Beispiel

Dieses Beispiel zeigt eine vollständige AMP-Seite mit einer einzelnen Schaltfläche auf einer Seite. Durch diese 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>

Weitere Informationen

AMP: AMP-Projekt
AMP: Was ist AMP?
AMP: amp-analytics
gtag.js: gtag.js mit AMP verwenden
Universal Analytics-Hilfe: Accelerated Mobile Pages (AMP)
Google Analytics 4-Hilfe: Accelerated Mobile Pages (AMP)