Diese Seite wurde von der Cloud Translation API übersetzt.

Analytics zu AMP-Seiten hinzufügen

Accelerated Mobile Pages (AMP) sind eine Plattform zum Erstellen von Webseiten für statische Inhalte, die schnell gerendert werden. AMP enthält ein <amp-analytics>-Element, mit dem Nutzerinteraktionen erfasst werden können, und es unterstützt Google Analytics.

Grundlegende Einrichtung zur Messung von Seitenaufrufen

Wenn Sie eine grundlegende Installation von Google Analytics auf einer AMP-Seite erstellen möchten, kopieren Sie dieses Code-Snippet und ersetzen Sie <GA_MEASUREMENT_ID> durch die Property-ID, die Sie verwenden möchten. So finden Sie Ihre Google Analytics-ID.

<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>

Funktionsweise

Das <amp-analytics>-Element ist eine erweiterte AMP-Komponente und wird in einem Skript-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 <amp-analytics> ist für die Unterstützung von Google-Analyseprodukten konfiguriert. Setzen Sie das type-Attribut für <amp-analytics> auf „gtag" (um die gtag.js-Unterstützung zu aktivieren) und das Attribut „data-credentials“ auf „+include“ (zum Aktivieren von Cookies).

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

AMP erlaubt kein JavaScript, das über seine eigenen genehmigten Bibliotheken hinausgeht. Daher wird die Konfiguration stattdessen mit JSON ausgeführt. Eine gtag_id-Property mit einer gültigen <GA_MEASUREMENT_ID> wird dem vars-Block hinzugefügt. Darunter wird eine Konfigurations-Property mit <GA_MEASUREMENT_ID>: {} als Wert hinzugefügt.

Ereignisse erfassen

Verwenden Sie triggers mit definierten Werten, um Ereignisse auf AMP-Seiten zu messen. 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 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 einen event_nameWert von Anmeldung" und einen methodWert von 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 speziell 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 Google Analytics-Standardparameter überschreiben oder neue Parameter hinzufügen möchten, fügen Sie die gewünschten Werte in den parameter-Bereich Ihres 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>

Domains verknüpfen

Mit der Domainverknüpfung können zwei oder mehr zugehörige Websites auf separaten Domains als eine analysiert werden. Gib 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>

Bei AMP-Seiten, für die Google Analytics konfiguriert ist, ist die Funktion zum Verknüpfen Ihrer kanonischen Domain aus dem AMP-Cache standardmäßig aktiviert. Wenn Sie die Verknüpfung von Domain-Traffic in Google Analytics deaktivieren möchten, 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

Google Analytics erfasst Daten zur Websitegeschwindigkeit für einen kleinen Bruchteil der Zugriffe auf Ihrer Website. Sie können die Abtastrate ändern, um mehr oder weniger Daten zu erfassen. Wenn Sie die Abtastrate auf 100 % festlegen möchten, fügen Sie der Konfiguration den hervorgehobenen Code hinzu:

<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 das Erfassen der 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-Zugriffe

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

Wenn Sie eine separate Property verwenden, um AMP-Zugriffe zu messen, können Sie Messwerte besser analysieren und sich ein genaueres Bild von Ihrem Traffic machen. Wenn Sie sowohl den AMP- als auch den Nicht-AMP-Traffic in einer einzigen Property analysieren möchten, können Sie diese Dimensionen mit der Dimension „Datenquelle“ oder einer benutzerdefinierten Dimension unterscheiden.

In Google Analytics wird standardmäßig der Wert AMP über die Dimension „Datenquelle“ gesendet. Mit diesem Wert können Sie AMP- und Nicht-AMP-Inhalte in einer einzigen Ansicht segmentieren, filtern oder anderweitig analysieren.

Konfigurationsfehler beheben

Mit dem AMP-Test können Sie herausfinden, ob eine Webseite die AMP-HTML-Spezifikation nicht erfüllt. Füge #development=1 der URL einer Seite hinzu, um die Validierung zu aktivieren.

Die Erweiterung amp-analytics enthält Warn- und Fehlermeldungen, die bei der Fehlerbehebung und Fehlerbehebung bei einer Konfiguration helfen. Füge #log=1 der URL einer Seite hinzu, um protokollierte Fehlermeldungen in der Konsole deines Webbrowsers anzusehen.

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 click-click-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
Google Analytics-Hilfe: Accelerated Mobile Pages (AMP)