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.

manuell hinzufügen.

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 für die 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 Targeting ausgerichtet ist. 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 von AMP-Seiten mit gtag.js 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 Stringwerten.
Verwenden Sie das Präfix epn. für Ereignisparameter mit numerischen Werten.

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>

Domains verknüpfen

Mit der Domainverknüpfung können zwei oder mehr verknüpfte Websites in separaten Domains als eine Website erfasst 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>

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 über alle Domains hinweg einheitlich ist. Gehen Sie dazu so vor:

Löschen Sie 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 von der AMP-Seite zu einer anderen Domain Ihrer Website gewechselt haben, sollten die Werte cid und gclid über die 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

Domains verknüpfen

Vollständiges Beispiel

Fehlerbehebung

Tag-Einrichtung für AMP