Leitfaden zur Einrichtung von AMP und Tag Manager

Das AMP-Projekt (Accelerated Mobile Pages) ist eine Open-Source-Web-Plattform, mit der Sie die Leistung Ihrer Webinhalte steigern können. Bei AMP ist Unterstützung für Google Tag Manager integriert. In diesem Artikel wird die empfohlene Methode zur Einrichtung von Google Tag Manager auf AMP-Seiten beschrieben.

So installieren Sie Tag Manager für AMP:

Erstellen Sie einen AMP-Container in Tag Manager.
Fügen Sie das Tag Manager-Snippet auf Ihren AMP-Seiten ein.
Konfigurieren Sie Tags in Ihrem Tag Manager-Container und veröffentlichen Sie ihn.

AMP-Container erstellen

In Tag Manager wird ein AMP-Containertyp unterstützt. So erstellen Sie einen neuen AMP-Container für Ihr Projekt:

Klicken Sie auf dem Bildschirm Konten für das Konto, das Sie verwenden möchten, auf Weitere Aktionen . Wählen Sie Container erstellen aus.
Benennen Sie den Container. Verwenden Sie einen beschreibenden Namen, z. B. "example.com – Nachrichten – AMP".
Wählen Sie unter Verwendungsort des Containers die Option AMP aus.
Klicken Sie auf Erstellen.

Der Container kann jetzt verwendet werden. Als Nächstes müssen Sie den Tag Manager-Code in Ihre AMP-Seiten einbinden.

In Tag Manager finden Sie Informationen zum Einfügen des Code-Snippets. Außerdem erhalten Sie im nächsten Abschnitt eine entsprechende Anleitung.

Tag Manager-Snippet einfügen

Sobald Sie den neuen AMP-Container erstellt haben, wird der Bildschirm Google Tag Manager installieren angezeigt. In Tag Manager stehen zwei Code-Snippets zur Verfügung. Kopieren Sie diese beiden Snippets, sodass Sie sie auf Ihren AMP-Seiten einfügen können.

Hinweis: Wenn Sie später wieder auf das Code-Snippet zugreifen möchten, klicken Sie oben in der Arbeitsbereichübersicht auf die Container-ID. Sie können auch Verwaltung und dann Google Tag Manager installieren auswählen.

Über das erste Snippet wird die Komponente "amp-analytics" auf Ihrer AMP-Seite eingefügt. Dieser Code wird am Ende des Bereichs <head> der Seite angezeigt und sollte nur einmal auf der Seite zu sehen sein.

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

Wichtig: Fügen Sie diesen Code nur auf Ihrer Seite ein, wenn er nicht bereits vorhanden ist, und achten Sie darauf, dass er nur einmal pro Seite angezeigt wird.

Mit dem zweiten Snippet wird die Komponente "amp-analytics" für die Verwendung von Tag Manager konfiguriert. Platzieren Sie diesen Code direkt nach dem öffnenden Element "<body>". Ersetzen Sie GTM-CONTAINER_ID durch die Container-ID aus Tag Manager oder kopieren Sie das gesamte Snippet auf der Benutzeroberfläche von Tag Manager und fügen Sie es ein.

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

Container konfigurieren und veröffentlichen

Wenn das Container-Snippet auf Ihren Seiten korrekt eingerichtet ist, können Tags ausgelöst werden, die in Tag Manager bereitgestellt werden. Als Nächstes müssen Sie Tag-Konfigurationen erstellen und den Container veröffentlichen.

So erstellen Sie ein neues Tag:

Klicken Sie auf Tags Neu.
Klicken Sie auf Tag-Konfiguration und wählen Sie den Tag-Typ aus der Liste unterstützter AMP-Tags aus.
Konfigurieren Sie das Tag mithilfe von Informationen, die von Ihrem Tag-Anbieter bereitgestellt werden.
Klicken Sie auf Trigger und fügen Sie eine oder mehrere Ereignisbedingungen hinzu, durch die das Tag ausgelöst wird.
Benennen Sie den Trigger und klicken Sie auf Speichern.

Wiederholen Sie diese Schritte für alle weiteren Tag-Konfigurationen. Wenn der Container fertig konfiguriert ist, veröffentlichen Sie ihn, damit die Änderungen wirksam werden.

Seitenvariablen

In Tag Manager können AMP-Variablen erfasst und anschließend in Konfigurationen von Tags und Triggern verwendet werden. Auf einer Seite, auf der Schuhe verkauft werden, sind beispielsweise Variablen vorhanden, die die Eigenschaften eines bestimmten Schuhs beschreiben. Mit diesen Werten lassen sich Tag Manager-Variablen erstellen:

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "type": "shoes",
              "color": "red"
          }
      }
  </script>
</amp-analytics>

So erstellen Sie eine benutzerdefinierte Variable in Tag Manager, mit der aus dem oben genannten Code die Farbvariable erfasst wird:

Klicken Sie auf Variablen.
Klicken Sie unter Benutzerdefinierte Variablen auf Neu.
Klicken Sie auf Variable konfigurieren und wählen Sie AMP-Variable aus.
Geben Sie im Feld AMP-Variablenname den Feldnamen ein (z. B. color).
Geben Sie der Variable einen beschreibenden Namen (z. B. AMP-Variable – Farbe).
Klicken Sie auf Speichern.

AMP-Tags, die Tag Manager unterstützen

War das hilfreich?

Wie können wir die Seite verbessern?