Tag-Einrichtung für AMP

Das Projekt Accelerated Mobile Pages (AMP) ist ein Open-Source-Webprojekt zur Verbesserung der Leistung Ihrer Webinhalte. AMP umfasst integrierte Unterstützung für das Google-Tag und Google Tag Manager. In diesem Leitfaden wird Folgendes beschrieben: Google Analytics für AMP-Seiten einrichten.

Installation

Mit dem Google-Tag können Sie Google Analytics, Google Ads und andere Google-Produkten auf AMP-Seiten. In Google Tag Manager wird ein AMP-Container eingerichtet und können Sie erweiterte Konfigurationen erstellen und Drittanbieter-Tools über die Tag Manager-Oberfläche.

Wählen Sie aus den folgenden Schaltflächen die gewünschte Plattform aus:

Google-Tag

Bei der AMP-Implementierung von gtag.js wird das amp-analytics-Framework verwendet, um können Sie Analysen auf Ihrer AMP-Website einbinden. Daten können von AMP-Seiten an Google Ads, Google Analytics und andere Google-Produkte gesendet mit derselben gtag.js-Implementierung verwenden.

Installation

Wenn Sie gtag.js auf einer AMP-Seite konfigurieren möchten, müssen Sie zuerst die Komponente amp-analytics in das <head>-Tag auf der Seite eingefügt haben:

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

Als Nächstes fügen Sie Ihrer AMP-Seite das Google-Tag als JSON-Komponente im <body>-Tag auf der Seite. Ersetzen Sie <TARGET_ID> durch den Tag-ID für die Produkte (z.B. Google Ads oder Google Analytics), auf die der zum Senden von Daten:

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

Wenn Sie mehrere Produkte im Google-Tag konfigurieren möchten, müssen Sie das Tag das gesamte Tag aus diesem Produkt. Sie müssen lediglich die Ziel-ID einer separate config-Befehl.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

Weitere Informationen finden Sie in der Dokumentationamp-analytics.

Ereignistrigger

Wenn Sie bestimmte Daten an Ihre Produkte senden möchten, konfigurieren Sie Trigger auf Grundlage von Ereignissen etwa Klicks. Trigger für gtag.js in AMP folgen denselben JSON-Mustern wie andere amp-analytics-Triggerkonfigurationen.

In diesem Beispiel wird gezeigt, wie ein click-Ereignis an Google Analytics gesendet wird. Die Der selector-Wert ist ein CSS-Selektor, mit dem Sie angeben können, welches Element ausgerichtet sind. Der Wert on gibt die Art des Ereignisses an, in diesem Fall ein Ereignis vom Typ click. Geben Sie im Abschnitt vars den Ereignistyp in event_name und fügen Sie nach Bedarf weitere Parameter hinzu.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Zusätzlich zu den empfohlenen Ereignissen können Sie eigene benutzerdefinierte Ereignisse angeben.

Mit der Domainverknüpfung können zwei oder mehr verwandte Websites in separaten Domains gemessen als 1. Um die Domains anzugeben, die verknüpft werden sollen, verwenden Sie "linker": { "domains": [...] }:

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

Die Möglichkeit, aus dem AMP-Cache eine Verknüpfung zu deiner kanonischen Domain herzustellen, ist aktiviert ist standardmäßig aktiviert. Wenn Sie die Möglichkeit zum Verknüpfen von Domaintraffic deaktivieren möchten, fügen Sie den config-Parametern "linker": "false" hinzu:

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

Vollständiges Beispiel

Dieses Codebeispiel zeigt eine vollständige, funktionierende Demo einer AMP-Seite, die erstellt eine einzelne AMP-Seite und sendet ein button-click-Ereignis an Google. Analytics, wenn auf die Schaltfläche geklickt wird. Ersetzen Sie <TAG_ID> durch eine gültige Tag-ID:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

Fehlerbehebung

Validieren Sie Ihre Tagging-Einrichtung mit amptagtest.appspot.com oder manuell sorgen Sie dafür, dass der cid-Wert in allen Domains gleich ist. Führen Sie dazu Folgendes:

  • Vergessen Sie nicht, Cookies zu löschen oder den Inkognitomodus zu verwenden.
  • Wenn cid nicht in einem Google Analytics-Cookie gefunden wird, kann es auch die Sie auf dem Tab "Network" (Network) Ihres Webbrowsers sehen. Nach collect request suchen, und die Nutzlast sollte einen cid-Wert enthalten.

  • Nach der Übergabe vom Google-CDN an die Website des Kunden wird der Die Werte cid und gclid sollten über die URL-Dekoration übergeben werden:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • Die endgültige Landingpage sollte weiterhin denselben cid-Wert wie in für die erste Landingpage.

  • Vorsicht bei Weiterleitungen und Domainänderungen zwischen der kanonischen Seite und Nicht-AMP-Landingpages.