Ende Mai hat Google im Google Tag Manager (GTM) eine neue Funktion eingeführt: Benutzerdefinierte Vorlagen oder benutzerdefinierte Vorlagen. Mal sehen, warum es benötigt wird, wie es verwendet wird, was die Unterschiede zu HTML-Tags und JavaScript-Variablen sind.
Erwägen Sie beispielsweise, eine benutzerdefinierte Vorlage für ein dynamisches Retargeting-Pixel von VKontakte zu erstellen und GTM-Tags darüber weiter anzupassen.
Einfache Worte zu benutzerdefinierten VorlagenErstellen einer benutzerdefinierten Vorlage• Registerkarte Info• Registerkarte Felder• Registerkarte Code• Registerkarte BerechtigungenAnpassen und Testen des Tags in der erstellten benutzerdefinierten Vorlage• Seitenaufruf• AddToCart• BergbautestFazitEinfache Worte zu benutzerdefinierten Vorlagen
Benutzerdefinierte Vorlagen sind Vorlagen, mit denen Benutzer neue Tags oder Variablen erstellen können. GTM verfügt über vorgefertigte Vorlagen (im Abschnitt "Empfohlen" oder "Empfohlen"), z. B. das Google Analytics-Tag, Google Optimize und andere. Jetzt können wir sie mit unseren Vorlagen ergänzen. Nach der Erstellung werden sie auf der Registerkarte Benutzerdefiniert angezeigt:
Der Hauptunterschied zu HTML-Tags und JS-Variablen besteht darin, dass ein Benutzer beim Erstellen eines Tags oder einer Variablen gemäß einer vorgefertigten Vorlage nicht mit JS-Code interagiert.
Der Code für die Benutzervorlage wird vom Entwickler oder Webanalysten in der Phase ihrer Erstellung geschrieben. Wenn Sie dann ein Tag oder eine Variable gemäß einer Benutzervorlage erstellen, wird die gesamte Interaktion über die Schnittstelle ausgeführt (die auch beim Erstellen einer Benutzervorlage konfiguriert wird):
Dementsprechend wird das Anpassen eines Tags oder einer Variablen gemäß einer Benutzervorlage im Vergleich zum Schreiben eines HTML-Tags oder einer JS-Variablen um eine Größenordnung einfacher, da dies keine Kenntnisse und Fähigkeiten in der Arbeit mit JavaScript erfordert.
Ein weiteres großes Plus an benutzerdefinierten Vorlagen besteht darin, dass die Wahrscheinlichkeit, eine Site zu "platzieren", aufgrund eines Fehlers im JS-Code des Tags um eine Größenordnung verringert wird.
In unserem Beispiel müssen Sie zum Konfigurieren des dynamischen Retargeting-Tags "VKontakte" nicht mehr mit den Entwicklern Kontakt aufnehmen. Alles kann unabhängig eingerichtet werden, auch die Übertragung von Daten über Waren (mit dem auf der Website konfigurierten erweiterten Google E-Commerce), der nur Erfahrung mit GTM hat.
Erstellen einer benutzerdefinierten Vorlage
Da wir eine Tag-Vorlage erstellen, müssen wir zum Abschnitt Vorlagen gehen und im Abschnitt Tag-Vorlagen auf die Schaltfläche Neu klicken.
Danach öffnet sich der Vorlageneditor:
Im linken Teil des Editors befindet sich ein Einstellungsfenster, im rechten Teil ein Vorschaufenster und eine Konsole. Das Einstellungsfenster enthält vier Registerkarten, die zum Erstellen und Arbeiten mit der Vorlage erforderlich sind.
Registerkarte "Info"
Auf dieser Registerkarte werden Informationen zum Tag angezeigt: Name, Beschreibung, Symbol. Dies sind die Informationen, die beim Erstellen eines neuen Tags in der Liste der Vorlagen angezeigt werden:
Für das Tag-Symbol gelten folgende Anforderungen: PNG-, JPEG- oder GIF-Format, eine Auflösung von mindestens 64 x 64 Pixel und eine Größe von nicht mehr als 50 KB.
Registerkarte "Felder"
Dieser Abschnitt erstellt die Schnittstelle unserer Vorlage. Die Benutzeroberfläche besteht aus verschiedenen Feldern und Formularen, mit denen der Benutzer beim Erstellen eines neuen Tags oder einer neuen Variablen interagiert.
In Zukunft werden die Informationen, die der Benutzer beim Erstellen des Tags über die Schnittstelle eingegeben hat, im Vorlagencode verwendet.
Um ein neues Element hinzuzufügen, klicken Sie auf die Schaltfläche Feld hinzufügen. Das Fenster zur Auswahl des Elementtyps wird angezeigt:
Mit GTM können Sie die folgenden Arten von Schnittstellenelementen auswählen:
- Textfeld
- Dropdown-Menü
- Kontrollkästchen ;
- Schalter
- einfache Tabelle , hier können Sie jede Zelle bearbeiten.
- erweiterte Tabelle , Sie können nur eine Zeile bearbeiten. Diese Art von Tabelle ist praktisch, um ein Wörterbuch aus Schlüssel-Wert-Paaren zu erstellen.
- Gruppe von Elementen , ermöglicht es Ihnen, mehrere Typen in einer Gruppe zu gruppieren;
- Die Verknüpfung wird verwendet, um der Benutzeroberfläche Text hinzuzufügen. Der Benutzer muss keine Daten eingeben.
Nachdem Sie ein Element hinzugefügt haben, müssen Sie ihm einen Anzeigenamen geben, der dann im Code verwendet wird. Dies ist eine Art Variablenname - er sollte verständlich sein und die Essenz des erstellten Schnittstellenelements offenbaren. Beispielsweise bedeutet der Name "ID" nichts Bestimmtes, aber der Name "pixelIDs" zeigt bereits an, dass die vom Benutzer eingegebenen Pixel-IDs in diesem Element gespeichert sind:
Gehen Sie als Nächstes zu den Einstellungen der einzelnen Elemente und aktivieren Sie die erforderlichen Eigenschaften.
In verschiedenen Situationen sind unterschiedliche Eigenschaften des Schnittstellenelements erforderlich, daher sind sie standardmäßig alle ausgeblendet, und wir müssen diejenigen aktivieren, die jetzt benötigt werden:
Für verschiedene Arten von Elementen unterscheiden sich die verfügbaren Eigenschaften. Ich werde die am häufigsten verwendeten angeben, bei denen es sich fast ausschließlich um Elemente handelt:
1. Anzeigename . Dies ist der Name, den der Benutzer beim Erstellen des Tags in der Benutzeroberfläche sieht:
2. Beispielwert . Dies ist ein Hinweis für den Benutzer, welche Werte in das Feld eingegeben werden sollen:
3. Hilfetext . Dies ist der Text, den der Benutzer sehen wird, wenn er mit der Maus über das Hilfesymbol des Elements fährt:
4. Regeln für die Datenüberprüfung . In dieser Eigenschaft können Sie bestimmte Regeln für die Überprüfung der vom Benutzer in das Feld eingegebenen Daten und gegebenenfalls den Fehlertext festlegen, der angezeigt wird, wenn Sie versuchen, ein Tag mit Daten zu speichern, die den Test nicht bestanden haben.
Sie können beispielsweise festlegen, dass das Feld ausgefüllt werden muss. Das zweite Beispiel: Sie müssen eine E-Mail-Adresse vom Benutzer erhalten, dann können Sie überprüfen, ob die vom Benutzer eingegebenen Daten mit dem regulären Ausdruck übereinstimmen müssen
. * @. * \ .. * .
Um den Fehlertext anzugeben, der angezeigt wird, wenn die eingegebenen Daten nicht den Überprüfungsregeln entsprechen, müssen Sie die erweiterten Regeleinstellungen aktivieren:
In den erweiterten Einstellungen können Sie auch die Bedingungen angeben, unter denen diese Regel aktiviert wird (Feld Enable Condition).
5. Einschlussbedingungen . Dies sind die Bedingungen, unter denen der Benutzer dieses Schnittstellenelement hat.
Um die Vorlage beispielsweise nicht mit Schnittstellenelementen zu überladen, können Sie die erforderlichen Elemente anzeigen, wenn das Kontrollkästchen aktiviert ist. Angenommen, ein Benutzer möchte die Übertragung von Produktdaten in einem Pixel konfigurieren (dies ist mit der auf der Website konfigurierten erweiterten Google E-Commerce-Website möglich), aktiviert das Kontrollkästchen "DataLayer zum Übertragen von Produktdaten verwenden" und nach dem Aktivieren des Kontrollkästchens werden Elemente in der Tag-Oberfläche angezeigt erforderlich, um eine solche Übertragung zu konfigurieren. Wenn das Kontrollkästchen nicht aktiviert ist, befinden sich keine Elemente in der Benutzeroberfläche.
Ich stelle fest, dass hier der Name des Elements angegeben werden muss, das ihm unmittelbar nach dem Hinzufügen zugewiesen werden musste.
Wenn Sie Einstellungen hinzufügen und eine Benutzeroberfläche erstellen, können alle Änderungen sofort im Vorschaufenster angezeigt und getestet werden:
Registerkarte "Code"
Diese Registerkarte ist ein Code-Editor.
Der Code für benutzerdefinierte GTM-Vorlagen wird in abgespecktem JavaScript ES6 geschrieben und in einer isolierten Umgebung ausgeführt, in der die gesamte Kommunikation mit globalen Daten (dh direkt mit der Seite) über die API erfolgt. Es gibt keine globalen Objekte wie Fenster oder Dokumente, auch nicht die üblichen Methoden. Zum Beispiel Konstruktoren (neues Objekt und dergleichen), setTimeout, parseInt, delete usw. - All dies funktioniert nicht in benutzerdefinierten Vorlagen.
Dafür gibt es jedoch eine API. Daher sollte das Schreiben von Code für benutzerdefinierte Vorlagen mit der Tatsache beginnen, dass wir die APIs definieren, die wir in unserem Code verwenden:
In der
Google Developer Help finden Sie eine vollständige Liste der APIs mit detaillierter Dokumentation.
Ich werde Ihnen Beispiele für die Arbeit mit der API zeigen:
Wie Sie der Beispieltabelle entnehmen können, müssen Sie die API nach dem Definieren anstelle von Standard-JS-Konstrukten verwenden.
Nachdem wir die API definiert haben, ist es wünschenswert, ein Objekt mit den vom Benutzer eingegebenen Einstellungen zu definieren. Dies kann beispielsweise erfolgen, nachdem beispielsweise während des ausführbaren Codes die erforderlichen Daten aus den Einstellungen des Benutzers angefordert wurden. Wenn wir das Einstellungsobjekt jedoch von Anfang an definieren, wird die Arbeit mit dem Code einfacher und verständlicher, da alle Benutzereinstellungen in einem separaten Objekt gespeichert werden.
Um Daten von einem Schnittstellenelement abzurufen, müssen Sie das Datenkonstrukt verwenden.
{{Elementname}}:
Hinweis: Wenn Sie undefined an die makeTableMap-Methode übergeben, führt dies zu einem Skriptfehler. Daher verwende ich ein Konstrukt mit einem ternären Operator (ein abgekürzter Datensatz des if-else-Konstrukts), um solche Skripte herauszufiltern.
Informationen zur Methode makeTableMap.Wenn die Schnittstelle eine erweiterte Tabelle verwendet, werden die darin enthaltenen Daten in folgender Form gespeichert:
[ 'key': 'k1', 'value': 'v1'}, 'key': 'k2', 'value': 'v2'} ]
Nach der Verarbeitung mit der Methode makeTableMap werden die Daten zu einem regulären Objekt mit Schlüssel-Wert-Paaren:
{ 'k1': 'v1', 'k2': 'v2' }
Eine weitere Anforderung für benutzerdefinierten Vorlagencode: Wenn das Tag erfolgreich ausgeführt wird, müssen Sie die Methode data.gtmOnSuccess () aufrufen und im Fehlerfall die Methode data.gtmOnFailure () aufrufen.
In meinem Code wird beispielsweise die Methode data.gtmOnSuccess () aufgerufen, nachdem die Anforderung erfolgreich gesendet wurde, und die Methode data.gtmOnFailure () wird aufgerufen, wenn der Download auf der externen Skriptseite VK openapi.js fehlschlägt.
Nachdem Sie die API definiert und das Objekt mit den Einstellungen definiert haben, können Sie einen Algorithmus zum Erarbeiten des Pixels schreiben.
Die Hauptsache, an die Sie sich hier erinnern sollten, ist:
• Wenn Sie eine globale Variable benötigen, verwenden Sie die API-Methode copyFromWindow.
copyFromWindow('VK');
• Wenn Sie eine globale Variable festlegen müssen, verwenden wir die API-Methode setInWindow.
setInWindow('openapiInject', 1);
• Wenn Sie eine globale Funktion ausführen müssen, verwenden wir die API-Methode callInWindow.
callInWindow('VK.Retargeting.Init', p);
• Wenn Sie der Seite ein externes Skript hinzufügen müssen, verwenden Sie die InjectScript-API-Methode.
injectScript('https://vk.com/js/api/openapi.js?159', pixel.setVkAsyncInit(), data.gtmOnFailure, 'vkPixel');
• Wenn Sie die URL (oder einen Teil davon) abrufen müssen, verwenden Sie die getUrl-API-Methode.
getUrl('host');
Wie ich oben geschrieben habe, unterstützt Custom Template JS ES6. Es ist ratsam, diese Syntax zu verwenden, da sie den Code verkürzt und lesbarer macht und die Arbeit von JS vorhersehbarer und anderen Programmiersprachen ähnlicher ist.
Weitere Informationen zur JS ES6-SyntaxDie Hauptsache, die verwendet werden soll, sind Pfeilfunktionen und Deklarationen von const und let-Variablen anstelle von var.
Eine über const deklarierte Variable ist eine Konstante, deren Wert nicht geändert werden kann.
Eine durch let deklarierte Variable unterscheidet sich von einer durch var deklarierten Variablen wie folgt:
- let wird nicht zum globalen Fensterobjekt hinzugefügt;
- Die Sichtbarkeit ist auf den Deklarationsblock beschränkt.
- über let deklarierte Variablen können nicht erneut deklariert werden.
Pfeilfunktionen sind eine Abkürzung für die üblichen Funktionen:
Nachdem wir uns mit der Verwendung der API für benutzerdefinierte Vorlagen vertraut gemacht haben, können wir den Tag-Operationscode mithilfe der JavaScript ES6-Syntax schreiben.
Mein Code enthält Methoden zum Starten eines Pixels, zum Installieren von VK openapi.js, zum Abrufen von Produktdaten aus dataLayer (wobei die erweiterte E-Commerce-Website von Google konfiguriert ist) und zum Verarbeiten dieser Daten, um sie in die Form zu bringen, die für das Senden an das VKontakte-Retargeting-Pixel erforderlich ist und die Ereignisversandmethode.
Die Pixel-Trigger-Methode unterstützt drei Szenarien:
- Das Pixel wird auf einer Seite ausgeführt, auf der openapi.js fehlt.
- Das Pixel wird auf der Seite ausgeführt, auf der sich openapi.js befindet, es wurde jedoch noch nicht geladen.
- Das Pixel wird auf der Seite mit geladener openapi.js gestartet.
Der vollständige Code meiner benutzerdefinierten GTM-Vorlage für das dynamische Retargeting-Pixel von VKontakte Registerkarte "Berechtigungen"
Nach dem Schreiben des Tag-Codes bleibt die letzte Phase, um Berechtigungen für die Interaktion mit den globalen Daten der Seite zu erteilen. Dies erfolgt nur auf der Registerkarte Berechtigungen.
Da der Code in einer isolierten Umgebung ausgeführt wird und die Interaktion mit globalen Daten über die API erfolgt, müssen wir für jede API-Methode (falls erforderlich) manuell Berechtigungen für bestimmte Aktionen angeben.
Dies geschieht, um die Arbeit mit globalen Seitendaten so sorgfältig wie möglich anzugehen und dadurch die Wahrscheinlichkeit zu minimieren, dass die Site in einen Fehler im Code unserer Vorlage gerät.
Für die in meinem Code verwendeten API-Methoden müssen drei Arten von Berechtigungen erteilt werden:
1. Zugriff auf globale
Variablen - Lesen, Schreiben, Ausführen des Zugriffs auf globale Variablen, die in unserem Code verwendet werden. Variablen müssen manuell hinzugefügt werden und geben für jede Variable an, was wir tun dürfen.
Beispielsweise kann die VK-Variable nur gelesen, vkAsyncInit gelesen und neu definiert werden und die VK.Retargeting.Hit-Methode kann nur ausgeführt werden.
2. Liest die URL . Hier müssen Sie angeben, welche Teile der URL empfangen dürfen. Ich erlaube den Empfang von Teilen der URL:
Wenn Sie möchten, können Sie jedoch Folgendes angeben:
3. Injiziert Skripte . Hier müssen die Adressen registriert werden, von denen Sie externe Skripte herunterladen können. In meinem Code wird nur ein Skript mit VK openapi.js geladen, ich gebe seine Adresse an:
Das ist alles, die Einrichtung der benutzerdefinierten Vorlage ist abgeschlossen. Sie können die Vorlage speichern und mit dem Testen fortfahren.
Anpassen und Testen des Tags in der erstellten benutzerdefinierten Vorlage
Als Beispiel erstellen wir zwei dynamische Retargeting-Tags für "VKontakte" mithilfe der erstellten benutzerdefinierten Vorlage: pageview und addToCart.
Seitenaufruf
Wir gehen in den erforderlichen GTM-Container, erstellen ein neues Tag und wählen den Tag-Typ VK Pixel im Abschnitt Benutzerdefiniert aus:
Geben Sie den Namen des Tags ein, wählen Sie das zu verfolgende Ereignis aus, wählen Sie Treffer (dies ist ein Standard-Seitenaufruf), geben Sie im Feld "Pixel-ID" die ID der beiden Pixel an, an die die Daten gesendet werden, und setzen Sie den Auslöser Alle Seiten:
Speichern Sie das erstellte Tag.
AddToCart
Das Erstellen eines Tags für ein Ereignis, bei dem ein Produkt zum Warenkorb hinzugefügt wird, ist etwas komplizierter als das Erstellen eines Hit-Tags.
Zunächst müssen Sie die Waren übertragen, die dem Warenkorb hinzugefügt wurden. Wie ich oben geschrieben habe, ist dies mit dem auf der Website konfigurierten erweiterten E-Commerce von Google möglich. In diesem Fall werden Produktdaten aus dataLayer übernommen.
Dazu müssen wir die Variable dataLayer in GTM erstellen, in der das E-Commerce-Objekt für das Ereignis addToCart gespeichert wird. Variable Einstellungen sehen folgendermaßen aus:
Zweitens müssen Sie einen Trigger erstellen, der das Tag aktiviert, wenn das E-Commerce-Ereignis addToCart auftritt (der Trigger aktiviert das Tag, wenn Sie den dataLayer drücken, wenn das Ereignis addToCart auftritt):
Nachdem Sie eine Variable mit einem E-Commerce-Objekt und einem Trigger erstellt haben, können Sie mit dem Erstellen des Tags beginnen:
In der Reihenfolge:
- Wählen Sie als verfolgtes Ereignis In den Warenkorb.
- Wir geben die durch Kommas getrennte ID von zwei Pixeln ein, in die Daten übertragen werden müssen.
- Aktivieren Sie das Kontrollkästchen "Mehrere Preislisten verwenden": In Moskau und St. Petersburg müssen in unserem Beispiel unterschiedliche Preislisten verwendet werden.
- Füllen Sie die Tabelle mit Preislisten aus.
- Aktivieren Sie das Kontrollkästchen "E-Commerce zum Übertragen von Produkten und Parametern verwenden".
- Geben Sie im E-Commerce-Objekt dieses Ereignisses die zuvor erstellte Variable an.
- Wir setzen den Auslöser für das überwachte Ereignis, in diesem Fall AddToCart.
- Speichern.
Bergbautest
Um das Ausarbeiten der Pixel des dynamischen Retargeting in VKontakte zu überprüfen, müssen Sie den Vorschaumodus in GTM aktivieren, auf unsere Website gehen und den Abschnitt Netzwerk in der Browserkonsole öffnen und im Feld Filter 'rtrg' eingeben:
Danach aktualisieren wir die Seite und sollten zwei Anfragen haben - das Hit-Ereignis, das in zwei Pixeln gesendet wird:
Status 200 bedeutet, dass Anforderungen vom Server erfolgreich gesendet und empfangen werden.
Auch im GTM-Vorschaufenster sehen wir, dass unser erstelltes Tag für das Ereignis "Seitenansicht" ordnungsgemäß funktioniert hat.
Um das Ereignis "In den Warenkorb" zu überprüfen, fügen Sie das Produkt dem Warenkorb hinzu. In der Konsole werden zwei weitere Anforderungen angezeigt:
Im GTM-Vorschaufenster sehen wir, dass das zweite Tag erfolgreich funktioniert hat. Produktdaten von dataLayer abgerufen und korrekt verarbeitet, die korrekte Preisliste wurde ebenfalls ersetzt.
Für den zweiten Host wird die Preisliste ebenfalls korrekt ersetzt:
Tags für andere Ereignisse werden auf die gleiche Weise konfiguriert und überprüft.
Fazit
Benutzerdefinierte Vorlagen ändern das bekannte Paradigma der Verwendung von GTM. Jeder ist an HTML-Tags und JS-Variablen gewöhnt, aber jetzt gibt es eine großartige Alternative.
Es reicht aus, einmal eine hochwertige benutzerdefinierte Vorlage zu erstellen, und dann kann jeder, der mit GTM vertraut ist, diese verwenden.
Angesichts der Möglichkeit, die erstellten Vorlagen freizugeben, sollten sie meiner Meinung nach bei den Benutzern an Beliebtheit gewinnen.
Sie können
die benutzerdefinierte dynamische Retargeting-Pixelvorlage von VKontakte
herunterladen , die wir in diesem Artikel untersucht haben.
Um eine Vorlage zu importieren, erstellen Sie eine neue benutzerdefinierte Vorlage und wählen Sie im Menü die Option Importieren:
Von mir für ppc.world vorbereitetes Material