Kurzanleitung für benutzerdefinierte Vorlagen

Mit benutzerdefinierten Vorlagen können Sie eigene Tag- und Variablendefinitionen schreiben, damit andere in Ihrer Organisation diese zusammen mit den integrierten Tag- und Variablenvorlagen verwenden können. Im Gegensatz zu benutzerdefinierten HTML-Tags und benutzerdefinierten JavaScript-Variablen ist es bei benutzerdefinierten Vorlagen, die auf Berechtigungen ausgerichtet sind und in einer Sandbox ausgeführt werden, ein sichereres und effizienteres Schreiben von Tags und Variablen möglich.

Benutzerdefinierte Tag- und Variablenvorlagen werden in Google Tag Manager im Abschnitt Vorlagen definiert. Auf dem Hauptbildschirm für Vorlagen 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 für andere Nutzer in Ihrer Organisation freigeben. Vorlagen können in der Community-Galerie für Vorlagen für eine breitere Verteilung entwickelt werden.

Hinweis: Benutzerdefinierte und Community-Vorlagen sind derzeit nur für Web- und serverseitige Attribute verfügbar. Vorlagen für mobile Plattformen werden zu einem späteren Zeitpunkt hinzugefügt.

Vorlageneditor

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

• Info: Definieren Sie die grundlegenden Attribute der Vorlage, z. B. den Tag- oder Variablennamen und das Symbol.
• Felder: Das ist ein visueller Editor, mit dem Sie der Tag-Vorlage Eingabefelder hinzufügen können.
• Code: Geben Sie den in der Sandbox ausgeführten JavaScript-Code ein, um festzulegen, wie sich das Tag oder die Variable verhalten soll.
• Berechtigungen: Hier können Sie sich die Berechtigungen für Ihr Tag oder Ihre Variable ansehen und sie einschränken.

Erste benutzerdefinierte Tag-Vorlage erstellen

In diesem Beispiel wird beschrieben, wie Sie ein einfaches Pixel-Beispiel-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. Um mit der Erstellung Ihrer ersten Vorlage zu beginnen, klicken Sie im linken Navigationsbereich auf „Vorlagen“ und dann im Abschnitt 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 Benutzeroberfläche von Tag Manager implementieren.

Beschreibung entspricht nur einer kurzen Beschreibung (maximal 200 Zeichen).

Mit Symbol können Sie ein Bild auswählen, das angezeigt wird, wenn das Tag in Listen angezeigt wird, die das Symbolattribut unterstützen. Symbole sollten eine quadratische PNG-, JPEG- oder GIF-Datei sein, die nicht größer als 50 KB und mindestens 64 x 64 Pixel groß ist.

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

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

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

Auf dem Tab Felder des Vorlageneditors können Sie Felder in der Tag-Vorlage erstellen und bearbeiten. Felder werden verwendet, um benutzerdefinierte Daten einzugeben, z. B. eine Konto-ID. Sie können 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 das Symbol für die bekannte 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 Maximierungssymbol (), um weitere Optionen für dieses Feld zu öffnen. Geben Sie Konto-ID in das Feld Anzeigename ein. Klicken Sie in der Vorlagenvorschau auf Aktualisieren.

Über dem Feld sollte das Textlabel Konto-ID zu sehen sein.

7. Klicken Sie auf den Tab Code und geben Sie in den Editor JavaScript in die Sandbox 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);

Die erste Codezeile const sendPixel = require('sendPixel'), importiert die sendPixel API.

Die zweite Codezeile const encodeUriComponent = require('encodeUriComponent'), importiert die encodeUriComponent API.

Die nächste Zeile, const account = data.accountId;, ruft den Wert von accountId ab, der in Schritt 5 erstellt wurde, und speichert ihn in einer Konstante mit dem Namen account.

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

In der letzten Zeile sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure) wird die Funktion sendPixel() mit den erforderlichen Parametern ausgeführt und eine Anfrage an die angegebene URL gestellt. Die Werte data.gtmOnSuccess und data.gtmOnFailure teilen Google Tag Manager mit, wann die Aufgabe abgeschlossen oder fehlgeschlagen ist. Sie werden dann 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.

Einigen Vorlagen-APIs sind Berechtigungen zugeordnet, die festlegen, was sie tun dürfen und was nicht. Wenn Sie eine Vorlagen-API wie sendPixel in Ihrem Code verwenden, werden in Tag Manager auf dem Tab Berechtigungen entsprechende Berechtigungen angezeigt.

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

Wenn eine Tag-Vorlage für das 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 nicht mit einem zulässigen URL-Muster übereinstimmt, schlägt der Aufruf sendPixel fehl.

Ein URL-Übereinstimmungsmuster muss HTTPS verwenden und sowohl Host- als auch Pfadmuster angeben. Der Host kann eine Domain (z. B. „https://example.com/“) oder eine bestimmte Subdomain (z. B. „https://sub.example.com/“) sein. Der Pfad muss aus mindestens einer / bestehen. Verwenden Sie ein Sternchen (*) als Platzhalter, um eine Subdomain oder ein Pfadmuster einer beliebigen Länge (z. B. „https://\*.example.com/test/“) anzugeben. Das Sternchen entspricht einem Wert, der durch eine oder ähnliche Zeichen ersetzt wird.

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

10. Klicken Sie auf Code ausführen und prüfen Sie das Fenster Konsole auf 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

Die Erstellung eines neuen Tags mit der neu definierten benutzerdefinierten Tag-Vorlage funktioniert wie bei jedem anderen Tag:

1. Klicken Sie in Google Tag Manager auf Tags > Neu.
2. Das neue Tag wird im Bereich Benutzerdefiniert des Fensters Neues Tag angezeigt. Klicken Sie darauf, um die Tag-Vorlage zu öffnen.
3. Füllen Sie die Pflichtfelder für die Konfiguration der Tag-Vorlage aus.
4. Klicken Sie auf Trigger und wählen Sie einen geeigneten Trigger dafür aus, wann das Tag ausgelöst werden soll.
5. Speichern Sie das Tag und veröffentlichen Sie den Container.

Erste benutzerdefinierte Variablenvorlage erstellen

Benutzerdefinierte Variablenvorlagen ähneln Tag-Vorlagen, unterscheiden sich jedoch in einigen Punkten:

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

  Anstatt data['gtmOnSuccess'] aufzurufen, um die Vervollständigung anzugeben, geben Variablen einen Wert direkt zurück.

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

• Anstatt Tags > Neuauf der Grundlage Ihrer benutzerdefinierten Variablen eine neue Variable zu erstellen, rufen Sie 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 sie 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. Dadurch wird im Vorlageneditor eine leere Vorlage 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.