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. Die AMP-Seite enthält ein <amp-analytics>-Element, mit dem Nutzerinteraktionen erfasst werden können, und integrierte Funktionen für Google Analytics.

Grundlegende Einrichtung zur Messung 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

Sie können Daten mit mehreren <amp-analytics>-Tags an mehrere Ziele senden. Fügen Sie dem config-Befehl einfach die neue Mess-ID <GA_MEASUREMENT_ID_NEW> 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 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 <amp-analytics>-Elementblock ist so konfiguriert, dass die Unterstützung für Google-Analyseprodukte aktiviert wird. Setzen Sie das type-Attribut für <amp-analytics> auf gtag, um die gtag.js-Unterstützung zu aktivieren, und das data-credentials-Attribut auf include, um Cookies zu aktivieren.

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

AMP erlaubt nur JavaScript-Code, der über seine eigenen genehmigten Bibliotheken hinausgeht. Daher wird die Konfiguration stattdessen mit JSON vorgenommen. Dem vars-Block wird ein gtag_id-Attribut mit einem gültigen <GA_MEASUREMENT_ID> hinzugefügt. Darunter wird ein Konfigurationsattribut mit <GA_MEASUREMENT_ID>: {} als Wert hinzugefügt.

Ereignisse erfassen

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

selector: Ein CSS-Selektor, um ein Zielelement anzugeben.
on: Gibt den Typ 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 grundlegendes Google Analytics-Ereignis einrichten. Erstellen Sie einen Trigger mit dem Namen button, der ausgelöst wird, wenn ein Element mit dem ID-Wert the-button angeklickt wird. Dadurch 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 eine spezielle Ereigniskategorie für Google Analytics. Mit ihr werden häufig Berichte zu Kampagnen erstellt. 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 amp-analytics-Dokumentation.

Parameter ändern

Wenn Sie Google Analytics-Standardparameter überschreiben oder neue Parameter hinzufügen möchten, fügen Sie dem parameter-Abschnitt Ihres config-Blocks die gewünschten Werte hinzu. 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>

Domains verknüpfen

Mit der Domainverknüpfung können zwei oder mehr zugehörige Websites auf separaten Domains als eine Domain 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 mit konfigurierter Google Analytics-Funktion ist die Funktion zum Verknüpfen Ihrer kanonischen Domain über den AMP-Cache standardmäßig aktiviert. Wenn Sie verhindern möchten, dass in Google Analytics Domaintraffic verknüpft werden, 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 erfasst automatisch Daten zur Websitegeschwindigkeit für einen kleinen Teil Ihrer Websitezugriffe. 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 den hervorgehobenen Code in Ihre Konfiguration ein:

<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 keine Daten zur Websitegeschwindigkeit mehr erfassen möchten, verwenden Sie den markierten 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

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

Wenn Sie eine separate Property zum Messen von AMP-Traffic verwenden, können Sie Messwerte besser analysieren und sich ein genaueres Bild des Traffics machen. So unterscheiden Sie AMP- und Nicht-AMP-Traffic, wenn Sie eine einzelne Property verwenden müssen:

Verwenden Sie die Dimension „Datenquelle“ oder eine benutzerdefinierte Dimension (Universal Analytics).
Einen benutzerdefinierten Ereignisparameter verwenden (Google Analytics 4).

Fehler in der Konfiguration beheben

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

Die Erweiterung amp-analytics bietet Warn- und Fehlermeldungen, die beim Debuggen und Beheben von Fehlern in einer Konfiguration helfen. Fügen Sie der URL einer Seite #log=1 hinzu, um die Fehlermeldungen in der Konsole Ihres Webbrowsers einzusehen.

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 Ereignisse vom Typ button-click 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 Ressourcen

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)