Mit dem Data Layer den Google Tag Manager effektiv nutzen

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:

Zusammenspiel zwischen Google Tag Manager und Data Layer
Zusammenspiel zwischen Google Tag Manager und Data Layer

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.

Kostenloses eBook

Tritt der Community bei und erhalte 11 Tipps um deine Conversion Rate zu verbessern!

*Pflichtfelder
Hiermit willige ich in die Erhebung und Verarbeitung der vorstehenden Daten fĂŒr das Empfangen des eBook „11 Conversion Killer fĂŒr deinen Onlineshop“ sowie des Newsletters per E-Mail ein. Von der DatenschutzerklĂ€rung habe ich Kenntnis genommen und bestĂ€tige dies mit Absendung des Formulars.

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.

Eine einfache Variable des Data Layers im Google Tag Manager
Eine einfache Variable des Data Layers im Google Tag Manager

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

Eine verschachtelte Variable des Data Layers im Google Tag Manager
Eine verschachtelte Variable des Data Layers im Google Tag Manager

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:

Google Tag Manager - Event aus dem Data Layer aufgreifen
Google Tag Manager – Event aus dem Data Layer aufgreifen

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:

Google Tag Manager Ereignis fĂŒr add to cart an Google Analytics schicken
Google Tag Manager Ereignis fĂŒr add to cart an Google Analytics schicken

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!

Newsletter abonnieren und der Konkurrenz einen Schritt voraus sein!

Die growganic Community profitiert von exklusiven Inhalten, Tipps und Insights die die Konkurrenz nicht erhÀlt. Melde dich jetzt an und sei besser als deine Wettbewerber!

Hiermit willige ich in die Erhebung und Verarbeitung der vorstehenden Daten fĂŒr das Empfangen des Newsletters per E-Mail ein. Von der DatenschutzerklĂ€rung habe ich Kenntnis genommen und bestĂ€tige dies mit Absendung des Formulars.

Geschrieben von

Chris von growganic

Chris von growganic

Chris liebt datengetriebenes Marketing und Konsumpsychologie (und als gelernter Mediengestalter auch Design). Er hat lange, auch neben dem Studium "International Marketing" in den Niederlanden, als Freelancer fĂŒr Agenturen und KMUs gearbeitet. Aktuell arbeitet er als Customer Relationship Manager bei ZWILLING.

Geschrieben von

Chris von growganic

Chris von growganic

Chris liebt datengetriebenes Marketing und Konsumpsychologie (und als gelernter Mediengestalter auch Design). Er hat lange, auch neben dem Studium "International Marketing" in den Niederlanden, als Freelancer fĂŒr Agenturen und KMUs gearbeitet. Aktuell arbeitet er als Customer Relationship Manager bei ZWILLING.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Weitere BeitrÀge

Klaviyo: Der mega E-Mail-Marketing Allrounder 2021

Bei vielen Unternehmen ist E-Mail-Marketing ein absoluter Umsatzbringer. Der Bedarf bei Unternehmen ist enorm, daher gibt es neben Diensten wie Klaviyo oder Mailchimp auch immer neue Anbieter. VerstÀndlich, denn die aktiven EmpfÀnger oder Kunden in der E-Mail Liste sind mit dem Unternehmen und seinen Produkten vertraut. Wer sich aktiv in

Conversion Rate optimieren: 10 Tipps fĂŒr dein Unternehmen

Die Conversion Rate optimieren. Wollen wir das nicht alle? TrÀumst du nicht auch von Conversion Rates >10%, dich liebenden Kunden und Webseiten-Besuchern die mit Freude einen vollen Warenkorb bei dir auschecken? Mit der Conversion Rate haben die meisten Webseiten-Betreiber eine Art Hassliebe. Ich kann das gut nachvollziehen, in manchen Wochen

Deine Konkurrenz beliest sich ebenfalls.

Die growganic Community profitiert von exklusiven Inhalten, Tipps und Insights die die Konkurrenz nicht erhÀlt. Melde dich jetzt an und sei besser als deine Wettbewerber!

Hiermit willige ich in die Erhebung und Verarbeitung der vorstehenden Daten fĂŒr das Empfangen des Newsletters per E-Mail ein. Von der DatenschutzerklĂ€rung habe ich Kenntnis genommen und bestĂ€tige dies mit Absendung des Formulars.