Google Tag Manager (GTM) ist ein großartiges Tool zur Verbesserung von Website-Analysen und Tracking. Und die Data Layer ist eine der Funktionen, die das Tracking auf die nächste Stufe bringen.
Eine Data Layer ist ein JavaScript object, das Details über Benutzerinteraktionen auf Ihrer Website sammelt. Mit ihrer Hilfe können Sie praktisch alle Daten erfassen, angefangen bei Produktansichten bis hin zum Betriebssystem des Nutzers. Die Verwendung von Data Layern in GTM ermöglicht es Ihnen, gezieltere Tracking-Tags und Trigger zu konfigurieren, die umfassendere Einblicke in das Nutzerverhalten bieten.
Deshalb haben wir einen umfassenden Leitfaden zum Data Layer erstellt, der viele Aspekte der Implementierung und Verwendung in Google Tag Manager abdeckt. Wir werden erklären, was eine Data Layer ist, ihre Anwendungsfälle, die Implementierung der Data Layer auf der Website, wie man eine Data Layer in Tag Manager erstellt, die Einrichtung testet und häufige Fehler die bei der Einrichtung auftreten.
Fangen wir an!
Die data layer ist ein JavaScript object, das verwendet wird, um Daten an tags zu übergeben. Sie ermöglicht es Ihnen, events oder Variablen zu übertragen und trigger basierend auf bestimmten Variablenwerten zu setzen. Die data layer wird sowohl im Google Tag Manager als auch in gtag.js verwendet.
Die data layer ist ein Vermittler zwischen Ihrer Website und dem Google Tag Manager und fungiert als Hub zum Speichern strukturierter Daten für Ihren Container.
Sie müssen eine data layer erstellen, wenn Sie Folgendes möchten:
Mit dem Data Layer werden Sie nicht auf ein solches Problem stoßen, da der GTM-Container Daten aus dem Data Layer der Seite abruft, der viel stabiler ist als HTML DOM. Die Datenaufzeichnung wird nur dann gestoppt, wenn jemand den Data Layer der Seite beschädigt.
Sie können angeben, welche Daten genau Sie in dieser Ebene speichern möchten. Es gibt zwei Methoden, um die data layer zu erstellen und sie mit den erforderlichen Parametern zu füllen, die wir im nächsten Schritt besprechen werden.
GTM liest die erforderlichen Werte aus dem Data Layer und sendet sie an Analysetools wie Google Analytics, Google Ads, Facebook Pixel usw.
Im Google Tag Manager ist der dataLayer ein Array, wie durch die „[]“ angezeigt, und er enthält ein Objekt, das durch die „{}“ dargestellt wird, wie im folgenden Skript gezeigt:
dataLayer = [{}];
Die Elemente innerhalb einer Datenschicht werden als Variablen bezeichnet und als „key“- : „value“-Paare (in „{}“) formatiert.
GTM verwendet eine Datenschichtvariable namens „event“, die auch von JavaScript-Ereignis-Hörern verwendet wird, um Tags auszulösen, wenn ein Benutzer mit Elementen auf einer Website interagiert. Im nachstehenden Beispiel ist „event“ also „key“ und „register“ ist „value“.
dataLayer = [{'event' : 'register' }];
Die Syntax für Variablen ist dieselbe wie bei events. Im folgenden Beispiel nehmen wir das gewünschte Land für die Nachverfolgung – „country“ („variable_name“) ist „key“ und „united states“ ist „value“ („variable_value“).
dataLayer = [{'country' : 'united states' }];
Es gibt zwei Methoden für die Implementierung der data layer: declaration und push. Wir beschreiben, wie Sie beide Methoden verwenden können, aber Sie können auch direkt zu der für Sie passenden springen.
Kurz gesagt empfehlen wir die Verwendung von dataLayer.push, da diese Methode beliebter ist und die meisten Anforderungen abdeckt. Außerdem ist diese Methode sicherer, da sie keine events im Google Tag Manager unterbricht, während eine unsachgemäße Einrichtung von data layer declarations leicht zu Problemen führen kann.
Data Layer declaration | dataLayer.push | |
Am besten geeignet für | Werte werden benötigt, bevor die Seite geladen wird | Pushing information into the dataLayer for events other than the page load event |
Push time der data layer Variable | Vor der runtime | During runtime |
Plazierung in code | Über Container von Google Tag Manager snippet | Anywhere in the code |
Zur Data Layer-Erklärung springen | Zu dalaLayer.push springen |
Um diese Methode zu verwenden, sollte das Snippet des Data Layer über dem Snippet des Google Tag Managers platziert werden. In diesem Fall wird die Data Layer initialisiert, bevor der Tag Manager initialisiert wird.
Insgesamt ist dies keine beliebte oder empfohlene Methode zum Erstellen eines Data Layer, aber sie funktioniert, wenn Sie Datenpunkte erstellen möchten, bevor der GTM-Container geladen wird, und diese Datenpunkte für die Tag-Verwaltung verwenden möchten.
„variable_name“: „variable_value“ wurden in die erforderlichen Parameter geändert und der Code wurde auf der Webseite vor dem GTM-Snippet eingefügt.
dataLayer = [{
'variable_name': 'variable_value'
}];
...
Hinweis: Verwenden Sie den Operator „=“, um die Werte des Objekts dem dataLayer-Array zuzuweisen.
Bei der Push-Methode werden Objektelemente dynamisch zur Datenebene hinzugefügt. Im Gegensatz zur Deklarationsmethode der Datenebene können Sie bei Push-Daten den Ausschnitt der Datenebene an einer beliebigen Stelle im Code platzieren.
Es kann etwas verwirrend sein, aber „dataLayer“ ist auch eine JavaScript-Variable, auf die jede Funktion zugreifen kann, die mit dem window object interagiert. Um Konflikte mit anderen lokalen JavaScript-Arrays mit dem Namen „dataLayer“ zu vermeiden, verwenden Sie am besten das Präfix „window.dataLayer“.
Für die dataLayer.push-Methode müssen Sie also den folgenden Code verwenden. Fügen Sie anstelle von „variable_name“: „variable_value“ die erforderlichen Parameter hinzu.
window.datalayer = window.dataLayer || [];
window.dataLayer.push({
'variable_name' : 'variable_value'
});
Im Codeblock oben wird die dataLayer auf eine vorhandene dataLayer gesetzt, falls diese bereits vorhanden ist. Andernfalls wird eine neue dataLayer als leeres Array erstellt. Der Operator || (OR) stellt sicher, dass die Zuweisung erfolgt, wenn eine dieser Bedingungen erfüllt ist.
Auf diese Weise vermeiden Sie die Erstellung mehrerer Deklarationen, die dataLayer überschreiben können.
Für viele E-Commerce-CMS gibt es Plugins (einschließlich Plugins von Stape), die eine Datenebene für Standard-E-Commerce-Ereignisse erstellen können. In manchen Fällen kann dies nicht ausreichen. Zum Beispiel, wenn Sie zusätzliche Ereignisse oder zusätzliche Daten in Datenschicht-Ereignissen benötigen. Oder wenn Sie eine vollständig angepasste Plattform verwenden.
In diesem Fall müssen Sie sich mit Ihren Entwicklern in Verbindung setzen, um Datenschicht-Ereignisse mit der von Ihnen benötigten Nutzlast zu erstellen. Dies ist in der Regel eine recht einfache Aufgabe für Entwickler und dauert nicht lange, obwohl es von der Architektur Ihrer Website oder Plattform abhängt.
Hier ist ein Beispiel für eine solche Dokumentation für Entwickler, die Sie kopieren, nach Ihren Bedürfnissen bearbeiten und an Ihre Entwickler weitergeben können. |
Ein paar nützliche Hinweise:
Sie können auf die Elemente aus Ihrem data layer array im Google Tag Manager auf unterschiedliche Weise zugreifen. Um die Daten im Google Tag Manager zu nutzen, weisen Sie sie einer Variablen zu oder verwenden Sie sie als event trigger. Diese Variablen oder events können dann in Ihre tags, triggers oder andere Variablen integriert werden.
Nachfolgend stellen wir Ihnen drei Anwendungsfälle des Data Layers und deren Einrichtung in GTM vor:
Nehmen wir zum Beispiel den Einkaufswert eines orangefarbenen T-Shirts.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘product_name’ : ‘orange t-shirt’,
'purchase_value' : '5',
‘purchase_currency’ : ‘EUR’
});
2. Wählen Sie “Data Layer Variable” als Variablentyp aus.
3. Fügen Sie den Namen der data layer Variable hinzu und klicken Sie auf “Speichern”.
Bitte beachten Sie: Das Feld unterscheidet zwischen Groß- und Kleinschreibung. Stellen Sie daher sicher, dass der Name mit dem Wert „value“ in dem Code übereinstimmt, den Sie der Seite hinzugefügt haben. In unserem Fall ist dies „purchase_value“.
Als Codebeispiel nehmen wir die dataLayer-Variable, die das „register“ event triggert, wenn eine Person die für die Registrierung erforderlichen Daten eingibt und auf „registrieren“ klickt.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'register'
});
1. Gehen Sie zu den Google Tag Manager triggern und klicken Sie auf “Neu”.
2. Wählen Sie den trigger Typ “Benutzerdefiniertes Ereignis”
3. Fügen Sie in das Feld „Event name“ den Namen auf dieselbe Weise wie den Wert „value“ im Code ein, da in diesem Feld die Groß-/Kleinschreibung beachtet wird. Klicken Sie auf „Speichern“.
Das folgende Beispiel für die Variable data layer triggert Kaufereignisse und erstellt Kaufinformationen.
dataLayer = [{
'event': 'purchase',
'purchase_info': {
'purchase_amount': 5,
'purchase_curency': 'EUR'
}
}];
Sie können Variablen aus dem Code sowohl als Variablen als auch als Ereignis-Trigger im Google Tag Manager verwenden. Sehen Sie sich den Einrichtungsprozess der vorherigen Schritte für Variablen und Ereignisse an.
Die data layer existiert nicht im serverseitigen Google Tag Manager, wie es im clientseitigen GTM der Fall ist.
Der sGTM verfügt jedoch über ein Objekt namens Client, das HTTP-Anfragen vom Web-GTM überprüft. Wenn die Anfrage bestimmte Daten enthält, wandelt der Client die Anfragedaten in Ereignisdaten um. Tags werden auch verwendet, um die Daten vom Web-GTM-Container an den GTM-Server zu senden.
Um Datenpunkte im GTM-Servercontainer zu füllen, müssen Sie die Methode auswählen, die Sie verwenden möchten, um Daten vom Web an den GTM-Server zu senden. Zu den beliebtesten gehören:
Diese Methode ist besonders effektiv, wenn Sie eine serverseitige Nachverfolgung für Google Ads oder Floodlight einrichten, da beide ausschließlich auf GA4-tags basieren.
1. Erstellen Sie in Web GTM einen Tag mit der Konfiguration „Google Analytics: GA4 Event“.
2. Sie finden vordefinierte Felder für diese Daten und können jedem Parameter individuell Data Layer-Variablen zuweisen.
Der entscheidende Vorteil der Verwendung von Data Tag/Data Client besteht darin, dass die Data Layer und andere allgemeine Daten automatisch aus dem Web an den GTM-Server gesendet werden.
1. Erstellen Sie ein neuen Tag im Web-GTM-Container und wählen Sie „Data Tag“ als Tag-Konfiguration.
Bitte beachten Sie: Sie müssen den Data Tag zur GTM gallery hinzufügen.
2. Aktivieren Sie in der Tag-Konfiguration die beiden Kontrollkästchen „Gemeinsame Daten senden“ und „Alles aus DataLayer senden“.
Das System analysiert automatisch die Daten im Web-GTM und leitet alle verfügbaren Informationen an den Server-GTM weiter.
Lesen sie unseren Blogbeitrag über die Erstellung eines Data Layer für den serverseitigen Google Tag Manager um mehr über den Einrichtungsprozess zu erfahren. |
Hinweis: Hinweis: Im Folgenden wird beschrieben, wie Sie Google Tag für das Senden von Daten einrichten. Wenn Sie Google Tag bereits konfiguriert haben, müssen Sie kein neues Tag erstellen. Überspringen Sie einfach die folgenden Schritte und gehen Sie direkt zum Abschnitt über das Erstellen einer benutzerdefinierten Dimension.
In diesem Fall müssen Sie nur die Parameter wie im Code für die Data Layer im Abschnitt „Gemeinsame Ereigniseinstellungen“ hinzufügen.
1. Klicken Sie im Abschnitt „Tags“ von GTM auf „Neu“ und wählen Sie „Google Tag“ als Tag-Typ aus.
2. Fügen Sie Ihre GA4 Measurement ID hinzu und listen Sie im Abschnitt „Einstellungen für geteilte events“ die Parameter auf, die Sie Ihrem Code hinzugefügt haben.
3. Wählen Sie als Trigger „Seitenaufruf – Alle Seiten“.
Es gibt eine Liste mit Standardparametern. Wenn die Daten, die Sie mithilfe des Data Layer verfolgen möchten, nicht in den empfohlenen Ereignissen von Google Analytics enthalten sind, müssen Sie sie manuell in Ihrem GA4-Konto als benutzerdefinierte Dimensionen hinzufügen. Nach dem Hinzufügen werden sie in den GA4-reports angezeigt.
1. Klicken Sie im Google Analytics-Konto auf „Admin“ → „Benutzerdefinierte Definitionen“.
2. Klicken Sie auf “Benutzerdefinierte dimension erstellen” und geben Sie die erforderlichen Parameter ein:
Drücken Sie anschließend “speichern”
Um zu überprüfen, ob der Google Tag Manager die Variable erkennt, müssen Sie einige einfache Schritte ausführen, die dem regulären Debugging in GTM ähneln.
1. Klicken Sie auf „Vorschau“ und fügen Sie die URL der Website hinzu, die Sie debuggen.
2. Wechseln Sie zum Abschnitt „Variable“, und wenn alles funktioniert, sehen Sie die erforderlichen Daten in diesem Abschnitt.
Wenn Sie Probleme mit dem Debug-Modus in GTM haben, sehen Sie sich unsere Anleitungen an:
Um zu überprüfen, ob Google Analytics die Daten erfasst, gehen Sie zu „Admin“ → DebugView.
Wenn Sie feststellen, dass Variablen oder events nicht übertragen werden, verwenden Sie höchstwahrscheinlich keine korrekte Schreibweise für Objektnamen oder haben Anführungszeichen vergessen.
Gutes Beispiel:
dataLayer.push({'variable_name': 'variable_value'});
Schlechtes Beispiel:
datalayer.push({'variable_name': 'variable_value'});
Gutes Beispiel:
dataLayer.push({'variable_name': 'variable_value'});
Schlechtes Beispiel:
dataLayer.push({variable_name': 'variable_value'});
Wenn Sie nicht an allen erforderlichen Stellen auf der Website „tags“ einfügen können, überprüfen Sie die Variablennamen auf verschiedenen Seiten.
Der häufigste Fehler ist eine uneinheitliche Schreibweise der Variablennamen auf verschiedenen Seiten. Überprüfen Sie daher die Namen.
Gutes Beispiel:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable_name': 'variable_value'});
Schlechtes Beispiel:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable Name': 'variable_value'});
Die Data Layer des Google Tag Managers (GTM) ist eine entscheidende Komponente des GTM. Sie ermöglicht es uns, die Interaktionen der Benutzer mit Ihrer Website zu erfassen und gleichzeitig zusätzliche Daten über die Interaktion oder ihren Kontext bereitzustellen. Die Data Layer ist für die Erstellung einer besseren Datenstruktur unerlässlich.
Die Umsetzung des Konzepts einer Data Layer ist eine ziemliche Herausforderung, und für den Aufbau einer komplexen Tracking-Infrastruktur werden höchstwahrscheinlich Entwickler benötigt.
Hier ist eine kurze Zusammenfassung:
Kommentare