End-to-end-Anleitung zum Data Layer in Google Tag Manager
Verfasst von
Uliana Lesiv
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 abdeckt. Nachdem Installieren Sie Google Tag Manager auf Ihrer Website abgeschlossen haben, werden wir 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!
Was ist die Data Layer in Tag Manager?
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.
Anwendungsfälle von data layern
Sie müssen eine data layer erstellen, wenn Sie Folgendes möchten:
- Eine zuverlässige Nachverfolgung einrichten. Ohne eine data layer ziehen Sie Daten direkt aus HTML DOM (der Standard, der zum Hinzufügen, Abrufen, Ändern oder Löschen von HTML-Elementen auf Ihrer Website verwendet wird) und senden die Daten dann direkt an den GTM-Container. Das Problem besteht darin, dass sich HTML DOM ändern kann, was dazu führt, dass das Auslösen von tags und die Datenerfassung gestoppt werden.
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.
- Tag-Daten zu bestimmten Bedingungen optimieren. Nehmen wir an, Sie möchten Daten zum Wert des Kaufereignisses nur senden, wenn der Benutzer mehr als 50 $ bezahlt hat. Anstatt verstreute Variablen, Transaktionsdetails, Seitenkategorien und andere Signale auf Ihrer Seite zu durchsuchen, können Sie mithilfe eines Data Layers, der mit relevanten Variablen und ihren Werten gefüllt ist (in unserem Fall Kaufwert > 50 $), sicherstellen, dass die erforderlichen Daten jederzeit verfügbar sind, wenn Ihre Tags sie benötigen.
Wie funktioniert die Data Layer?
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.
Syntax und Beispiele für die Data Layer
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' }];dataLayer initialisieren
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 |
Methode 1: Data Layer Declaration
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.
Methode 2: dataLayer.push
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.
Beispiel und Dokumentation zur Datenschicht des elektronischen Geschäftsverkehrs
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:
- Machen Sie eine Kopie des Dokuments, entfernen Sie die nicht benötigten Ereignisse und/oder fügen Sie die benötigten Ereignisse und die Beispiel-Nutzlast hinzu.
- Verwenden Sie für alle Veranstaltungen das gleiche Datenformat. Am besten ist es, das GA4-Format zu verwenden.
- Wenn es sich nicht um ein offensichtliches Ereignis handelt (z. B. Artikel anzeigen oder in den Warenkorb legen), beschreiben Sie genau, wann es ausgelöst werden soll. Dadurch wird unnötiges Hin und Her zwischen Ihnen und den Entwicklern vermieden.
- Nutzerdaten können in praktisch allen Marketingplattformen verwendet werden. Es ist wichtig, dass sie in der Datenschicht verfügbar sind - ihre Verwendung wird Ihre Tracking-Ergebnisse erheblich verbessern.
- Versuchen Sie, Datenschichtereignisse zu vermeiden, die gesendet werden, bevor der Benutzer zu einer anderen Seite weiterleitet. Dies kann zum Verlust dieser Daten führen, da die Ereignisse möglicherweise nicht vor der Weiterleitung gesendet werden. Wenn Sie beispielsweise ein Lead-Ereignis senden möchten, nachdem ein Benutzer ein Formular abgeschickt hat, und der Benutzer dann auf die Dankeseite weitergeleitet wird, ist es am besten, dieses Ereignis in der Datenschicht auf der Dankeseite zu senden und nicht, wenn der Benutzer das Formular tatsächlich abschickt.
- Wenn Sie bereits einige Datenschicht-Ereignisse auf Ihrer Website haben, ist es besser, einige benutzerdefinierte Namen für neue Datenschicht-Ereignisse zu verwenden und alte Ereignisse nicht zu ändern, um das bestehende Tracking nicht zu beeinträchtigen. Das heißt, wenn Sie zum Beispiel bereits
add_to_cartin der Datenschicht haben, ist es besser, ein neues Ereignisadd_to_cart_v2zu erstellen, anstatt das alte zu ändern und dann die Tags für die neuen Ereignisse neu zu konfigurieren.
- Achten Sie darauf, die Datenschicht zu überprüfen, nachdem die Entwickler dies implementiert haben. Manchmal können schon kleine Fehler in der Nutzlast zu Problemen bei der Verfolgung führen.
Wie erstellt man einen Data Layer im Tag Manager?
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:
Anwendungsfall 1: Data Layer-Variable als Datenpunkte
Code Beispiel
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’
});GTM setup
- 1.Um die Konfiguration im GTM-Container zu ändern, gehen Sie zu Variablen → klicken Sie auf „Neu“ in den benutzerdefinierten Variablen.
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“.
Anwendungsfall 2: Data Layer zum triggern von events
Code Beispiel
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'
});GTM setup
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“.
Anwendungsfall 3: Data layer Variable als Variablen und event trigger
Code Beispiel
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'
}
}];GTM setup
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.
Gibt es den data layer im server side GTM?
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:
Verwenden von Google Analytics 4
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.
Verwendung von Data Tag/data Clien
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. |
Push Data Layer Variable an Google Analytics 4
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.
Google Tag in GTM konfigurieren
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“.
Benutzerdefinierte dimension in GA4
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:
- Dimension name - Der Name der in den reports angezeigt werden soll.
- Scope - Wählen Sie einen event, Benutzer oder item Scope.
- Event parameter - Fügen Sie den Naemen der Variablen oder das Ereignis hinzu, wie im Data Layer Snippet angegeben (bitte beachten Sie, dass die Daten im Feld zwischen Groß- und Kleinschreibung unterscheiden.
Drücken Sie anschließend “speichern”
Data Layer setup testen
GTM Debug Modus
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 Debugger-Modus von Google Tag Manager haben, sehen Sie sich unsere Anleitungen an:
Google Analytics 4
Um zu überprüfen, ob Google Analytics die Daten erfasst, gehen Sie zu „Admin“ → DebugView.
Fehlerbehebung im Data Layer
Problem 1: Der Data layer push funktioniert nicht
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.
Lösung: korrekte Schreibweise für Objektnamen
- Überprüfen Sie, ob “dataLayer” in der “camel case” Schreibweise geschrieben ist.
Gutes Beispiel:
dataLayer.push({'variable_name': 'variable_value'});Schlechtes Beispiel:
datalayer.push({'variable_name': 'variable_value'});- Achten Sie darauf, dass alle Variablennamen in Anführungszeichen gesetzt werden.
Gutes Beispiel:
dataLayer.push({'variable_name': 'variable_value'});Schlechtes Beispiel:
dataLayer.push({variable_name': 'variable_value'});Problem 2: Tags werden nicht ausgelöst
Wenn Sie nicht an allen erforderlichen Stellen auf der Website „tags“ einfügen können, überprüfen Sie die Variablennamen auf verschiedenen Seiten.
Lösung: konsistente Variablennamen
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'});Zusammenfassung
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:
- Installieren Sie Google Tag Manager zunächst fehlerfrei im Head- und Body-Bereich, da dies die technische Grundvoraussetzung für alle weiteren Data-Layer-Setups bildet.
- Wir empfehlen die Verwendung der dataLayer.push-Methode zur Implementierung des Data Layer.
- Nach der Implementierung des Data Layer können Sie diesen als Datenpunkte, Event Trigger oder als beides verwenden.
- Wenn Sie serverseitiges Tracking verwenden, kombinieren Sie clientseitiges und serverseitiges Tracking, um den Data Layer zu implementieren.
- Überprüfen Sie immer die Einstellung im GTM Debug-Modus.
- Fügen Sie benutzerdefinierte Dimensionen in GA4 hinzu (wenn Sie dieses Tool verwenden), um die Daten in GA4-Berichten anzuzeigen
- Vermeiden Sie die häufigen Fehler, die zu Fehlfunktionen der Datenschicht führen.
Möchten Sie auf der Serverseite einsteigen?
Kostenlos testen
Kommentare