Der Google Tag Manager ist für viele Webseiten- und Onlineshop-Betreiber ein mächtiges Werkzeug. Nach der Integration lassen sich weitere Dienste wie der Facebook Pixel oder selbst geschriebene Skripte auf der Webseite integrieren, ohne dass man Änderungen am Quellcode durchführen muss. Außerdem kann mit dem Google Tag Manager auch der DSGVO-konforme Einsatz von Cookie Bannern sicher gestellt werden.
Mit Hilfe eines Data Layers kann der Google Tag Manager noch effektiver genutzt werden: Third-Party-Dienste wie der Facebook Pixel im Google Tag Manager lassen sich mit weiteren dynamischen Daten deiner Webseite versorgen.
In diesem Artikel möchte ich dir gerne erklären, was ein Data Layer eigentlich genau ist, welche technische Funktion er übernimmt und wie du mit Hilfe des Data Layers dein Tracking verbessern kannst – nämlich dynamisch!
Zugegeben, der Artikel ist etwas technischer. Aber selbst für Marketer ohne Programmierfähigkeiten ist der Artikel (hoffentlich) interessant und sorgt für etwas mehr Klarheit, wie Daten von der Webseite oder dem Onlineshop aufgegriffen und verarbeitet werden können.
Was ist ein Data Layer und wozu brauche ich ihn?
Der Data Layer ist, wie der Name eigentlich schon erklärt, eine Datenschicht die sich zwischen deiner Webseite und einem Tag Management System wie dem Google Tag Manager befindet.
Dabei dient diese Datenschicht als eine Art Zwischenspeicher, aus welcher das Tag Management System sich bedienen und weitere Dienste wie den Facebook Pixel, Google Ads, Hotjar, Pinterest o.ä. mit weiteren Daten versorgen kann.
Das folgende Bild soll den Fluss von Daten und die „Position“ des Data Layers im Zusammenspiel zwischen Webseite und Google Tag Manager verdeutlichen:
Der größte Vorteil in der Verwendung eines Data Layer ist dabei die hohe Datenqualität: Da der Google Tag Manager die Daten aus dem Data Layer bezieht und an die Third-Party-Dienste weiter gibt, erhalten bspw. der Facebook Pixel und Google Ads gleiche Werte für Preise bei einem addToCart Event oder Kauf-Event.
Technisch gesehen ist ein Data Layer ein JavaScript-Objekt, in welchem Informationen und Daten gespeichert werden. Das kann entweder als Deklaration oder über die Funktion dataLayer.push() passieren – beides wird im nächsten Kapitel beschrieben.
Vom semantischen Aufbau sieht ein Data Layer wie folgt aus:
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>Ich persönlich bin kein großer Freund der Data Layer Deklaration in dieser Form, da es bei Unachtsamkeit zu Problemen führen kann und der Aufbau sowie die Reihenfolge innerhalb des Quellcodes eine wichtige Rolle für die Funktionalität spielt.
Informationen in den Data Layer schreiben
Um Daten im Data Layer bereitzustellen oder verfügbar zu haben, gibt es zwei verschiedene Wege:
- Data Layer Deklaration
- dataLayer.push() Funktion
Data Layer Deklaration
Die Data Layer Deklaration ist eine Möglichkeit, Daten der Webseite für den Google Tag Manager bereitzustellen. Der semantische Aufbau folgt dabei dem oben aufgezeigtem Snippet. Die Daten werden in den Data Layer geschrieben und sind dann, sobald der Google Tag Manager geladen wird, bereits für diesen vorhanden und lassen sich von ihm aufgreifen.
Hierbei ist wichtig, dass die Data Layer Deklaration niemals nach der Initialisierung des Google Tag Managers steht, da es sonst zu Fehlern kommen kann. Siehe dazu auch die offizielle Google Developer Seite zum Google Tag Manager und Data Layern.
Die richtige Reihenfolge wäre also
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->Empfehlen würde ich dir allerdings immer, Daten über die dataLayer.push() Funktion zu schreiben, mit einem Event zu versehen und dann im Google Tag Manager aufzugreifen.
dataLayer.push() Funktion
Die dataLayer.push() Funktion ist eine andere Möglichkeit, Daten in den Data Layer zu schreiben. Dabei können Informationen, wie das .push() vermuten lässt, auch nachträglich in den Data Layer geschrieben und von dort verarbeitet werden.
Im Regelfall ist das die häufigste Art der Nutzung und unterscheidet sich vom semantischen Aufbau gegenüber der Deklaration:
<script>
dataLayer.push({
'variable_name': 'variable_value'
});
</script>Die dataLayer.push() Funktion kann vor und nach der Initialisierung des Google Tag Managers erfolgen, ohne die Funktionalität zu beinträchtigen. Allerdings würde ich dir empfehlen die Funktionen immer erst nach der Initialisierung auslösen: Safety first. ?
Eine exemplarische dataLayer.push() Funktion für ein addToCart Event könnte dann so aussehen:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': {
'products': [{
'id': 6125229670555,
'name': 'Kunstleder Loop Armband - Schwarz / 38mm-40mm',
'brand': 'apfelband',
'category': 'Bands',
'price': 29.99,
'variant': 'Schwarz / 38mm-40mm'
'quantity': 1
}]
}
}
});
</script>Hierbei sieht man sehr schön, wie die dynamischen Werte der Kunstleder Armband Produktseite von apfelband im Data Layer bereitgestellt werden und wie die Funktion mit dem 'event': 'addToCart' versehen ist.
Auf diese Events im Data Layer kannst du dann mit dem Google Tag Manager reagieren und bestimmte Aktionen ausführen, bspw. Daten an Google Analytics oder den Facebook Pixel schicken.
Außerdem sind dir, sofern du selbst etwas programmieren kannst oder einen Developer hast, kaum Grenzen gesetzt.
Du hast mehrere Newsletter-Formulare auf einer Seite und möchtest wissen, über welches der Formulare am meisten Anmeldungen generiert werden? Dafür schreibst du einfach eine dataLayer.push() Funktion, die immer nach dem erfolgreichen Formularversand ausgelöst wird und den Formulartyp oder -position beinhaltet.
Bei einem Formular im Inhaltsbereich wäre das dann zum Beispiel:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'newsletteranmeldung',
'newsletterlocation': 'contentarea'
});
</script>Und bei dem Anmeldeformular im Footer:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'newsletteranmeldung',
'newsletterlocation': 'footer'
});
</script>Diese Daten kannst du dann im Google Tag Manager aufgreifen indem du auf das 'event': 'newsletteranmeldung' reagierst und die Daten aus 'newsletterlocation' an Google Analytics übermittelst.
Den Data Layer mit dem Google Tag Manager nutzen
Die Daten aus dem Data Layer im Google Tag Manager aufzugreifen geht recht einfach. Das funktioniert über Variablen, Trigger und Tags. Etwas ausführlicher habe ich das bereits in dem Artikel Den Google Tag Manager mit Shopify nutzen: Einrichtung, Funktionen, Limitierungen erklärt.
Daten aus dem Data Layer mit dem Google Tag Manager abholen
Für alle Variablen aus dem Data Layer musst du jetzt, im Google Tag Manager, eine passende Variable erstellen. Dabei können das recht einfache Variablen sein, beispielsweise newsletterlocation aus dem oben genannten Beispiel.
Für verschachtelte (nested) Variablen, ist der Aufbau etwas anders. Hier hangelst du dich den semantischen Pfad entlang bis zu dem Punkt, an welchem die Variable liegt.
In dem oben stehenden Beispiel des addToCart Events befindet sich beispielsweise der Produktname innerhalb einer Verschachtelung. Um hier an den Produktnamen zu kommen, sieht die Variable im Google Tag Manager dann so aus: ecommerce.add.products.0.name
Denn wir wollen aus dem Objekt ecommerce, innerhalb des add das Produkt (products) von Position 1 (da es ein JavaScript-Array ist, beginnt die Zählung bei 0 für Position 1) den name haben.
Das ist jetzt sehr technisch, aber (d)ein Developer kann dir sicherlich beim Aufbau des Codes helfen. Du kannst dich mit deinen Fragen auch gerne bei mir melden oder unten kommentieren!
Nach diesem Prinzip legst du jetzt alle Variablen an, die in deinem Data Layer vorhanden sind, im Google Tag Manager verarbeitet und dann an andere Dienste geschickt werden sollen.
Das ist natürlich etwas manueller Aufwand, allerdings hat es einen großen Vorteil: Die Werte ändern sich dynamisch – in Abhängigkeit von der jeweiligen Seite.
Auf einer Produktseite X werden von deinem Developer oder Shopsystem die dynamischen Werte des Produktes X – wie beispielsweise SKU, Preis, Variante, … in den Data Layer geschrieben. Auf der Produktseite Y hingegen kommen dann die Werte des Produktes Y in den Data Layer. Die Variablen im Google Tag Manager bleiben allerdings immer gleich, da sie nur den semantischen Aufbau des Data Layers widerspiegeln.
Daten aus dem Data Layer an Google Analytics schicken
Nachdem du also alle Variablen angelegt hast, kannst du nun noch einen Trigger für das 'event': 'XXX' erstellen.
In unserem Fall wäre der Name des Events entweder newsletteranmeldung oder addToCart und der Trigger im Google Tag Manager sieht wie folgt aus:
Mit diesem Trigger löst du einen Tag aus, in welchem du dynamische Werte (nämlich die vorher angelegten Variablen) einsetzt.
Wir möchten jetzt alle Produktnamen in Google Analytics erfassen, welche zum Warenkorb hinzugefügt worden sind. Dafür erstellen wir also einen Tag mit einer beliebig benannten Ereigniskategorie, -aktion und einem dynamischen Ereignislabel. Hier nehmen wir als Ereigniskategorie ecommerce, als Ereignisaktion add to cart und als Ereignislabel {{dlv - Add to Cart - Name}}.
Auslösen soll der Tag immer dann, wenn das Data Layer Event addToCart ausgelöst wird (also immer dann, wenn jemand ein Produkt in den Warenkorb legt). Am Ende sieht der Tag dann so aus:
Unser ISER Framework: Datengetrieben zu mehr Umsatz, Wachstum und Profitabilität ohne mehr Zeit und Geld für Werbung ausgeben zu müssen.
65+ erfolgreich betreute Kunden
Fazit zur Nutzung von Data Layer und Google Tag Manager
Mit Hilfe eines Data Layer kann man dynamisch und einfach Daten von der Webseite über den Google Tag Manager an Third-Party-Dienste schicken. Natürlich bringt eine gute Integration auch einiges an initialem Aufwand mit sich, die Vorteile sind diesen Aufwand aber in jedem Fall wert.
Die Daten an die Third-Party-Dienste sind einheitlich und beinhalten dieselben Werte, mit Hilfe des GTM kannst du auf unterschiedliche Consent-Zustände des Webseitenbesuchers eingehen und die Datenqualität als auch die Trackingqualität können sich erhöhen.
Mit wenig programmiertechnischem Aufwand lassen sich auch komplexere Dinge erfassen, im Data Layer bereitstellen und über den Google Tag Manager verarbeiten.
Hast du schon einen Data Layer im Einsatz oder fehlt dir da aktuell noch der einfache Einstieg zu?
Lass es mich in den Kommentaren unten gerne wissen!
