Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Tag-Einrichtung für AMP

Das Accelerated Mobile Pages-Projekt (AMP) ist eine Open-Source-Web plattform, mit der Sie die Leistung Ihrer Webinhalte verbessern können. AMP bietet integrierte Unterstützung für das Google-Tag und Google Tag Manager. In dieser Anleitung wird beschrieben, wie Sie Google Analytics für AMP-Seiten einrichten.

Installation

Mit dem Google-Tag können Sie Google Analytics, Google Ads und andere Google-Produkte auf AMP-Seiten installieren. In Google Tag Manager wird ein AMP-Container eingerichtet. Außerdem haben Sie die Möglichkeit, erweiterte Konfigurationen zu erstellen und Tags von Drittanbietern über die Tag Manager-Oberfläche zu implementieren.

Wählen Sie über die folgenden Schaltflächen Ihre bevorzugte Plattform aus:

Google-Tag

Bei der AMP-Implementierung von gtag.js wird das amp-analytics-Framework verwendet, um Ihnen die Möglichkeit zu geben, Analytics auf Ihrer AMP-Website einzurichten. Daten können von AMP-Seiten über dieselbe gtag.js-Implementierung an Google Ads, Google Analytics und andere Google-Produkte gesendet werden.

Installation

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

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

Fügen Sie dann das Google-Tag als JSON-Komponente in das <body> Tag auf Ihrer AMP-Seite ein. Ersetzen Sie <TARGET_ID> durch die Tag-ID der Produkte (z.B. Google Ads, Google Analytics), an die Sie Daten senden möchten:

<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 nicht das gesamte Tag für dieses Produkt installieren. Sie müssen nur die Ziel-ID zu einem separaten config Befehl hinzufügen.

<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 amp-analytics Dokumentation.

Ereignistrigger

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

In diesem Beispiel wird gezeigt, wie Sie ein click-Ereignis an Google Analytics senden. Der Wert selector ist ein CSS-Selektor, mit dem Sie angeben können, auf welches Element das Ereignis angewendet wird. Der Wert on gibt den Ereignistyp an. In diesem Fall ist es ein click-Ereignis. Geben Sie im Abschnitt vars den Ereignistyp in event_name an und fügen Sie bei Bedarf weitere Parameter hinzu.

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

Neben den empfohlenen Ereignissen können Sie auch eigene benutzerdefinierte Ereignisse angeben.

Benutzerdefinierte Dimensionen und Parameter mit Google Analytics senden

Wenn Sie benutzerdefinierte Dimensionen und Messwerte mit gtag.js von AMP-Seiten an Google Analytics senden möchten, können Sie die extraUrlParams Eigenschaft in Ihren Trigger konfigurationen im <amp-analytics> JSON verwenden. Benutzerdefinierte Parameter in Google Analytics werden als Ereignisparameter gesendet.

Verwenden Sie das Präfix ep. für Ereignisparameter mit String-Werten.
Verwenden Sie das Präfix epn. für Ereignisparameter mit Zahlenwerten.

Prüfen Sie vor dem Senden, ob diese benutzerdefinierten Dimensionen und Messwerte in Ihrer Google Analytics-Property registriert sind.

Beispiel: Benutzerdefinierte Parameter mit Seitenaufruf

Bei dieser Konfiguration werden mit dem ersten Seitenaufruf eine benutzerdefinierte Dimension (my_custom_dimension) und ein benutzerdefinierter Messwert (my_page_score) gesendet:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

Beispiel: Benutzerdefinierte Parameter mit einem Click-Event

Bei dieser Konfiguration werden benutzerdefinierte Parameter gesendet, wenn auf ein Element mit der ID myButton geklickt wird:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

Link-Domains

Mit der Domainverknüpfung können zwei oder mehr ähnliche Websites auf separaten Domains als eine Website gemessen werden. Geben Sie die Domains an, die verknüpft werden sollen, indem Sie "linker": { "domains": [...] } verwenden:

<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, vom AMP-Cache aus auf Ihre kanonische Domain zu verlinken, ist standardmäßig aktiviert. Wenn Sie die Verknüpfung von Domain-Traffic deaktivieren möchten, fügen Sie "linker": "false" den config Parametern 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, auf der eine einzelne AMP-Seite erstellt und ein button-click-Ereignis an Google Analytics gesendet wird, 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

Verwenden Sie validator.amp.dev, um Ihre Tagging-Einrichtung zu validieren. Sie können auch manuell dafür sorgen, dass der Wert cid domainübergreifend konsistent ist. Gehen Sie dazu so vor:

Löschen Sie die Cookies oder verwenden Sie den Inkognitomodus.
Wenn cid in einem Google Analytics-Cookie nicht gefunden wird, können Sie es auch auf dem Tab „Netzwerk“ Ihres Webbrowsers sehen. Suchen Sie nach collect request. Die Nutzlast sollte einen cid-Wert enthalten.
Sobald Sie vom Google CDN zur Website des Kunden gewechselt haben, sollten die Werte cid und gclid mithilfe der URL-Dekoration übergeben werden:
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
Die endgültige Landingpage sollte denselben cid-Wert wie die ursprüngliche Landingpage haben.
Achten Sie auf Weiterleitungen und Domainänderungen zwischen der kanonischen Seite und Nicht-AMP-Landingpages.

Tag-Einrichtung für AMP Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Installation

Google-Tag

Installation

Ereignistrigger

Benutzerdefinierte Dimensionen und Parameter mit Google Analytics senden

Beispiel: Benutzerdefinierte Parameter mit Seitenaufruf

Beispiel: Benutzerdefinierte Parameter mit einem Click-Event

Link-Domains

Vollständiges Beispiel

Fehlerbehebung

Tag-Einrichtung für AMP