Kurzanleitung für benutzerdefinierte Vorlagen

Mit benutzerdefinierten Vorlagen können Sie eigene Tag- und Variablendefinitionen erstellen, damit andere in Ihrer Organisation sie zusammen mit dem integrierten Tag und Variablenvorlagen. Benutzerdefinierte Vorlagen sind berechtigungsorientiert und in einer Sandbox ausgeführt können Sie benutzerdefinierte Tags und Variablen als wenn Sie benutzerdefinierte HTML-Tags und benutzerdefinierte JavaScript-Variablen verwenden.

Benutzerdefinierte Tag- und Variablenvorlagen werden im folgenden Abschnitt Vorlagen definiert: Google Tag Manager Auf dem Hauptbildschirm „Vorlagen“ werden alle Tags und Variablen Vorlagen, die bereits im Container definiert wurden. Sie können auch neue Vorlagen aus diesem Bildschirm.

Sie können eine Vorlage exportieren und sie für andere Nutzer in Ihrer Organisation freigeben. können Vorlagen für eine breitere Verteilung in der Community-Galerie für Vorlagen.

Der Vorlageneditor

Mit dem Vorlageneditor können Sie benutzerdefinierte Vorlagen erstellen, als Vorschau ansehen und testen. Sie enthält vier Eingabebereiche, die Ihnen bei der Definition Ihrer Tag-Vorlage helfen:

  • Info – Definieren Sie die grundlegenden Eigenschaften der Vorlage, z. B. das Tag oder Variablenname und -symbol.
  • Felder: Dies ist ein visueller Editor, mit dem Sie Ihrer Tag-Vorlage Eingabefelder hinzufügen können.
  • Code: Geben Sie JavaScript-Code in der Sandbox ein, um zu definieren, wie Ihr Tag oder Ihre Variable verhalten sollte.
  • Berechtigungen: Hier können Sie Tags und Variablen ansehen und einschränken. die nicht erlaubt sind.

Erste benutzerdefinierte Tag-Vorlage erstellen

In diesem Beispiel erfahren Sie, wie Sie ein einfaches Beispiel-Pixel-Tag erstellen. Wann? wenn dieses Tag auf einer Webseite ausgelöst wird, wird ein Treffer mit dem richtigen Konto an die Server des Tag-Anbieters gesendet.

1. Um mit Ihrer ersten Vorlage zu beginnen, klicken Sie im linken Navigationsbereich auf Vorlagen Klicken Sie im Bereich Tag-Vorlagen auf die Schaltfläche Neu.

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

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

Eine Beschreibung ist genau das, wonach es sich anhört: ein kurzer Text (maximal 200 Zeichen) eine Beschreibung der Funktion dieses Tags.

Über das Symbol können Sie ein Bild auswählen, das erscheinen soll, wenn das Tag in die die icon-Eigenschaft unterstützen. Symbolbilder sollten im quadratischen PNG-, JPEG- oder GIF-Dateien, die nicht größer als 50 KB und mindestens 64 x 64 Pixel sind.

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

Rechts neben den Feldeingaben befindet sich das Fenster Vorlagenvorschau. Jeden wird die Schaltfläche Aktualisieren eingeblendet. Klicken Sie auf Aktualisieren Sie die Seite, um zu sehen, wie sich die Änderungen auf das Erscheinungsbild 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 im Tag erstellen und bearbeiten. Vorlage. Felder werden verwendet, um benutzerdefinierte Daten einzugeben, z. B. eine Konto-ID. Sie können Standardformularelemente wie Textfelder, Dropdown-Menüs, Optionsfelder und Kästchen.

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.

Das Feld enthält das vertraute Variablenauswahlsymbol (Symbol für die Variablenauswahl). angezeigt. Nutzer dieser Vorlage können auf das Variablenauswahlsymbol klicken, um Variablen auswä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 ("Maximieren"-Symbol), um weitere Details zu öffnen. für dieses Feld. Geben Sie Account ID (Konto-ID) ein. im Feld Anzeigename ein. In Klicken Sie unter Vorlagenvorschau auf Aktualisieren.

Ein Textlabel mit dem Titel „Konto-ID“ sollte oberhalb des Felds angezeigt werden.

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

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

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

Die nächste Zeile, const account = data.accountId;, erhält den Wert von accountId. die in Schritt 5 erstellt wurde, und speichert sie 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 protokolliert Analytics-Daten und die codierte Konto-ID, mit der das Tag konfiguriert.

In der letzten Zeile, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), sendPixel() mit den erforderlichen Parametern und stellt eine Anfrage an den die angegebene URL. Die Werte data.gtmOnSuccess und data.gtmOnFailure geben an, in Google Tag Manager, wenn die Tag-Aufgabe abgeschlossen wurde oder fehlgeschlagen ist. werden in Google Tag Manager für Funktionen wie die Tag-Reihenfolge oder Vorschaumodus aktivieren.

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

Einige Vorlagen-APIs sind mit Berechtigungen verknüpft, mit denen festgelegt wird, was sie tun können oder nicht. Wenn Sie eine Vorlagen-API wie sendPixel in Ihrem Code eingeben, werden die entsprechenden Berechtigungen in Tag Manager auf dem Tab Berechtigungen angezeigt.

9. Klicken Sie auf Berechtigungen, um festzulegen, welche Domains sendPixel senden darf an die Daten gesendet werden. Klicken Sie für den Eintrag Send Pixels (Pixel senden) auf das Symbol zum Maximieren ("Maximieren"-Symbol) und Geben Sie https://endpoint.example.com/ in Allowed URL Match Patterns (Zulässige URL-Übereinstimmungsmuster) ein.

Wenn eine Tag-Vorlage zum Senden von Daten konfiguriert ist, müssen Sie eine Zulässige URL-Übereinstimmungsmuster unter der verknüpften Berechtigung, um einzuschränken, wo Daten gespeichert werden können. an die das Unternehmen weitergeleitet werden soll. Wenn die in Ihrem Code angegebene URL mit keiner zulässigen URL übereinstimmt Übereinstimmungsmuster, schlägt der sendPixel-Aufruf fehl.

Für ein URL-Übereinstimmungsmuster ist HTTPS erforderlich. Außerdem müssen Muster für Host und Pfad angegeben werden. Die Host kann eine Domain (z.B. "https://example.com/") oder eine bestimmte Subdomain sein (z.B. „https://sub.example.com/“). Der Pfad muss mindestens aus „/“ bestehen. Verwenden Sie ein Sternchen (*) als Platzhalter, um eine Subdomain oder ein Pfadmuster von beliebige Länge (z. B. „https://\*.example.com/test/“) Das Sternchen ist ein Platzhalter Zeichen, das die verschiedenen möglichen Muster auffängt, z.B. „\*.example.com/“ entspricht www.example.com, shop.example.com, blog.example.com usw. Das Sternchen muss mit einem umgekehrten Schrägstrich maskiert werden. Zeichen: "\*". Eine URL ohne zusätzliche Zeichen (z.B. „https://example.com/“) wird so behandelt, als würde sie mit einem Platzhalter enden (d.h. entspricht „https://example.com/\*“.

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

10. Klicken Sie auf Code ausführen und prüfen Sie, ob im Fenster Console Probleme aufgetreten sind.

Alle gefundenen Fehler werden im Fenster Konsole angezeigt.

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

Die Tag-Vorlage ist jetzt einsatzbereit.

Neues Tag verwenden

So erstellen Sie ein neues Tag, das Ihre neu definierte benutzerdefinierte Tag-Vorlage verwendet wie jedes andere Tag:

  1. Klicken Sie in Google Tag Manager auf Tags > Neu:
  2. Das neue Tag wird im Fenster Neues Tag im Bereich Benutzerdefiniert angezeigt. 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 passenden Trigger aus, wenn das Tag ausgelöst werden sollte.
  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 jedoch einige Unterschiede:

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

    Anstatt data['gtmOnSuccess'] aufzurufen, um die Vervollständigung anzuzeigen, können Variablen gibt einen Wert direkt zurück.

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

  • Anstatt zu Tags > Neu, um eine neue Variable auf Basis der klicken Sie auf Variablen > Neu

Eine vollständige Anleitung zum Erstellen einer benutzerdefinierten Variablen finden Sie unter Benutzerdefinierte Variable erstellen. Vorlage.

Export und Import

Wenn Sie eine benutzerdefinierte Vorlage für Ihre Organisation freigeben möchten, können Sie die benutzerdefinierte Vorlage 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 öffnen Sie die Vorlage im Vorlageneditor.
  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 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.