Kurzanleitung für benutzerdefinierte Vorlagen

Mit benutzerdefinierten Vorlagen können Sie eigene Tag- und Variablendefinitionen erstellen, damit andere in Ihrer Organisation diese zusammen mit den integrierten Tag- und Variablenvorlagen verwenden können. Benutzerdefinierte Vorlagen sind berechtigungsorientiert und in einer Sandbox ausgeführt. Dadurch können benutzerdefinierte Tags und Variablen sicherer und effizienter erstellt werden als mit benutzerdefinierten HTML-Tags und benutzerdefinierten JavaScript-Variablen.

Benutzerdefinierte Tag- und Variablenvorlagen werden in Google Tag Manager im Bereich Vorlagen definiert. Auf dem Hauptbildschirm werden alle Tag- oder Variablenvorlagen aufgelistet, die bereits in Ihrem Container definiert wurden. Auf diesem Bildschirm können Sie auch neue Vorlagen erstellen.

Sie können eine Vorlage exportieren und sie mit anderen in Ihrer Organisation teilen. Außerdem können Vorlagen für eine breitere Verteilung in der Community-Galerie für Vorlagen entwickelt werden.

Der Vorlageneditor

Mit dem Vorlageneditor können Sie benutzerdefinierte Vorlagen erstellen, als Vorschau ansehen und testen. Es gibt vier Hauptbereiche für die Eingabe, anhand derer Sie Ihre Tag-Vorlage definieren können:

  • Info: Definieren Sie die grundlegenden Eigenschaften der Vorlage wie den Tag- oder Variablennamen und das Symbol.
  • Felder: Dies ist ein visueller Editor, mit dem Sie Ihrer Tag-Vorlage Eingabefelder hinzufügen können.
  • Code: Geben Sie JavaScript-Code ein, der in einer Sandbox ausgeführt wird, um festzulegen, wie sich das Tag oder die Variable verhalten soll.
  • Berechtigungen: Hier können Sie die Berechtigungen Ihres Tags oder Ihrer Variablen ansehen und einschränken.

Erste benutzerdefinierte Tag-Vorlage erstellen

In diesem Beispiel erfahren Sie, wie Sie ein einfaches Beispiel-Pixel-Tag erstellen. Wenn dieses Tag auf einer Webseite ausgelöst wird, wird ein Treffer mit den richtigen Kontoinformationen an die Server des Tag-Anbieters gesendet.

1. Wenn Sie mit Ihrer ersten Vorlage beginnen möchten, klicken Sie im linken Navigationsbereich auf „Vorlagen“ und dann im Bereich Tag-Vorlagen auf die Schaltfläche Neu.

2. Klicken Sie auf Info und definieren Sie den Namen (erforderlich), die Beschreibung und das Symbol des Tags.

Der Name wird Nutzern angezeigt, wenn sie dieses Tag auf der gesamten Tag Manager-Benutzeroberfläche implementieren.

Die Beschreibung ist eine kurze Beschreibung der Funktionsweise dieses Tags (maximal 200 Zeichen).

Mit Symbol können Sie ein Bild auswählen, das angezeigt werden soll, wenn das Tag in Listen angezeigt wird, die die Symboleigenschaft unterstützen. Symbolbilder sollten quadratische PNG-, JPEG- oder GIF-Dateien sein, die nicht größer als 50 KB und mindestens 64 x 64 Pixel sind.

3. Klicken Sie auf Aktualisieren, um eine Vorschau der Vorlage anzusehen.

Rechts neben den Feldeingaben befindet sich das Fenster Vorlagenvorschau. Jedes Mal, wenn im Editor eine Änderung vorgenommen wird, wird die Schaltfläche Aktualisieren angezeigt. Klicken Sie auf „Aktualisieren“, um zu sehen, wie sich die Änderungen auf das Aussehen Ihres Tags auswirken.

4. Klicken Sie auf Felder, um Ihrer Tag-Vorlage Felder hinzuzufügen.

Auf dem Tab Felder des Vorlageneditors können Sie Felder in der Tag-Vorlage erstellen und bearbeiten. Felder werden zur Eingabe benutzerdefinierter Daten verwendet, z. B. einer Konto-ID. Sie können die Standardformularelemente wie Textfelder, Drop-down-Menüs, Optionsfelder und Kästchen hinzufügen.

5. Klicken Sie auf Feld hinzufügen und wählen Sie Texteingabe aus. Ersetzen Sie den Standardnamen (z.B. "text1") durch "accountId". Klicken Sie in der Vorlagenvorschau auf Aktualisieren.

Neben dem Feld wird ein bekanntes Symbol für die Variablenauswahl (Symbol für Variablenauswahl) angezeigt. Nutzer dieser Vorlage können auf das Symbol für die Variablenauswahl klicken, um Variablen auszuwählen, die in diesem Container aktiv sind.

Im nächsten Schritt fügen Sie dem Feld ein Label hinzu:

6. Klicken Sie neben dem Textfeld auf das Symbol zum Maximieren (Symbol "Maximieren"), um weitere Optionen für dieses Feld zu öffnen. Geben Sie in das Feld Anzeigename die Konto-ID ein. Klicken Sie unter Vorlagenvorschau auf Aktualisieren.

Über dem Feld sollte ein Textlabel mit dem Titel „Konto-ID“ angezeigt werden.

7. Klicken Sie auf den Tab Code und geben Sie in der Sandbox ausgeführtes JavaScript im Editor ein:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

Mit der ersten Codezeile (const sendPixel = require('sendPixel')) wird die sendPixel API importiert.

Mit der zweiten Codezeile (const encodeUriComponent = require('encodeUriComponent')) wird die encodeUriComponent API importiert.

Die nächste Zeile (const account = data.accountId;) ruft den in Schritt 5 erstellten Wert von accountId ab und speichert ihn in einer Konstante namens account.

Mit der dritten Codezeile, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, wird eine url-Konstante eingerichtet, die einen festen URL-Endpunkt verkettet, der Analysedaten protokolliert, und die codierte Konto-ID, mit der das Tag konfiguriert wurde.

Die letzte Zeile (sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure)) führt die Funktion sendPixel() mit den erforderlichen Parametern aus und stellt eine Anfrage an die angegebene URL. Die Werte data.gtmOnSuccess und data.gtmOnFailure teilen Google Tag Manager mit, ob das Tag abgeschlossen wurde oder fehlgeschlagen ist. Anschließend werden sie von Google Tag Manager für Funktionen wie die Tag-Reihenfolge oder den Vorschaumodus verwendet.

8. Klicken Sie auf Speichern, um Ihren Fortschritt zu speichern. Dadurch werden alle erkannten Berechtigungen in den Vorlageneditor geladen.

Mit einigen Vorlagen-APIs sind Berechtigungen verknüpft, die vorgeben, was sie tun dürfen und was nicht. Wenn Sie eine Vorlagen-API wie sendPixel in Ihrem Code verwenden, werden in Tag Manager relevante Berechtigungen auf dem Tab Berechtigungen angezeigt.

9. Klicken Sie auf Berechtigungen, um festzulegen, an welche Domains sendPixel Daten senden darf. Klicken Sie für den Eintrag Pixels senden auf das Symbol zum Maximieren (Symbol "Maximieren") und geben Sie unter Zulässige URL-Übereinstimmungsmuster den Wert https://endpoint.example.com/ ein.

Wenn eine Tag-Vorlage zum Senden von Daten konfiguriert ist, müssen Sie unter der zugehörigen Berechtigung ein Zulässiges URL-Übereinstimmungsmuster angeben, um einzuschränken, wohin Daten gesendet werden können. Wenn die in Ihrem Code angegebene URL mit keinem zulässigen URL-Übereinstimmungsmuster übereinstimmt, schlägt der sendPixel-Aufruf fehl.

Für einen URL-Übereinstimmungsmuster ist HTTPS erforderlich und es müssen Muster für Host und Pfad angegeben werden. Ein Host kann eine Domain (z. B. „https://example.com/“) oder eine bestimmte Subdomain (z. B. „https://sub.example.com/“) sein. Der Pfad muss mindestens aus einem „/“ bestehen. Verwenden Sie ein Sternchen (*) als Platzhalter, um eine Subdomain oder ein Pfadmuster beliebiger Länge anzugeben (z. B. „https://\*.example.com/test/“). Das Sternchen ist ein Platzhalterzeichen, das die verschiedenen möglichen Muster abfängt, also ein Escape-Zeichen, z. B. „\*.example.com/“. Es muss ein Äquivalent für die verschiedenen möglichen Muster sein, z. B. „https://example.com/“. \*.example.com/.www.example.comshop.example.comblog.example.com\*https://example.com/\*

Geben Sie zusätzliche URL-Übereinstimmungsmuster in separaten Zeilen an.

10. Klicken Sie auf Code ausführen und prüfen Sie das Fenster Console auf etwaige Probleme.

Alle erkannten Fehler werden im Fenster Console angezeigt.

11. Klicken Sie auf Speichern und schließen Sie den Vorlageneditor.

Die Tag-Vorlage sollte jetzt einsatzbereit sein.

Neues Tag verwenden

Ein neues Tag mit der neu definierten benutzerdefinierten Tag-Vorlage wird wie bei jedem anderen Tag erstellt:

  1. Klicken Sie in Google Tag Manager auf Tags > Neu.
  2. Das neue Tag erscheint im Fenster Neues Tag unter Benutzerdefiniert. Klicken Sie darauf, um die Tag-Vorlage zu öffnen.
  3. Füllen Sie die erforderlichen Felder für die Konfiguration der Tag-Vorlage aus.
  4. Klicken Sie auf Trigger und wählen Sie einen geeigneten Trigger für das Auslösen des Tags aus.
  5. Speichern Sie das Tag und veröffentlichen Sie den Container.

Erste Vorlage für benutzerdefinierte Variablen erstellen

Vorlagen für benutzerdefinierte Variablen ähneln Tag-Vorlagen. Es gibt aber einige wesentliche Unterschiede:

  • Vorlagen für benutzerdefinierte Variablen müssen einen Wert zurückgeben.

    Anstatt data['gtmOnSuccess'] aufzurufen, um den Abschluss anzuzeigen, geben Variablen direkt einen Wert zurück.

  • Vorlagen für benutzerdefinierte Variablen werden in verschiedenen Bereichen der Tag Manager-UI verwendet.

  • Anstatt über Tags > Neu eine neue Variable basierend auf Ihrer benutzerdefinierten Variablen zu erstellen, klicken Sie auf Variablen > Neu.

Eine vollständige Anleitung zum Erstellen einer Vorlage für benutzerdefinierte Variablen finden Sie unter Benutzerdefinierte Variable erstellen.

Export und Import

Wenn Sie eine benutzerdefinierte Vorlage für Ihre Organisation freigeben möchten, können Sie die benutzerdefinierte Vorlage exportieren und in andere Tag Manager-Container importieren. So exportieren Sie eine Vorlage:

  1. Klicken Sie in Tag Manager auf Vorlagen.
  2. Klicken Sie in der Liste auf den Namen der Vorlage, die Sie exportieren möchten. Dadurch wird die Vorlage im Vorlageneditor geöffnet.
  3. Klicken Sie auf das Menü „Weitere Aktionen“ () und wählen Sie Exportieren aus.

So importieren Sie eine Vorlage:

  1. Klicken Sie in Tag Manager auf Vorlagen.
  2. Klicken Sie auf Neu. Daraufhin wird eine leere Vorlage im Vorlageneditor geöffnet.
  3. Klicken Sie auf das Menü „Weitere Aktionen“ () und wählen Sie Importieren aus.
  4. Wählen Sie die Datei .tpl aus, die Sie importieren möchten.