Benutzerdefinierte Variablen im Enhanced E-Commerce Tracking sparen Zeit & Geld
Manchmal muss es schnell gehen. Das Aufsetzen und Nutzen von Enhanced E-Commerce Tracking ist dagegen oft mit hohen Aufwänden und Kosten in der Webentwicklung verbunden. Mit unflexiblen Vorgaben zwingt Google Deine Entwickler:innen ein ganz spezifisches Datenformat auf. Mit dem Google Tag Manager und dem Vorgehen, das ich Dir heute zeige, kannst Du Deinen Entwickler:innen das Leben leichter machen und Dir Zeit und Geld sparen.
Vor Kurzem hatte ich den Fall, dass die Enhanced E-Commerce Data Layer Informationen und Events in einer verkehrten Reihenfolge geladen wurden. Normalerweise benutzen wir in der Tag-Konfiguration immer direkt die Daten aus dem Data Layer. In diesem Fall führte das Durcheinander aber dazu, dass bei einer Transaktion fälschlicherweise Checkout Daten übermittelt wurden.
Wir arbeiten beim Enhanced E-Commerce Tracking sehr eng mit den Webentwickler:innen zusammen, um sicherzustellen, dass die Daten und Events immer an der richtigen Stelle geladen werden. Das war in diesem Fall aufgrund des Shop-Systems leider nicht so einfach möglich. Außerdem waren die Informationen an sich auch korrekt. Die Reihenfolge stimmte nur nicht.
Bei meiner Recherche stieß ich auf eine Lösung von Simo Ahava, die zwar nicht 100%ig passte, sich aber für meine Zwecke anpassen ließ. Dabei nutze ich eine benutzerdefinierte Variable, um Enhanced E-Commerce Informationen zu übermitteln, anstatt diese direkt aus dem Data Layer zu ziehen.
Benutzerdefinierte Variable statt Data Layer nutzen
Google Analytics benötigt ein ganz bestimmtes Format, um E-Commerce Daten interpretieren zu können. Meistens arbeiten wir daher direkt mit den Webentwickler:innen zusammen, damit dieses Format von Anfang an gegeben ist. Das bedeutet für unsere Kunden eine starke und meist kostenintensive Einbindung von Entwicklungsressourcen.
Alternativ kannst Du auf Deiner Seite auch einen semantischen Data Layer verwenden und diesen dann im GTM selber in das entsprechende Format bringen (z.B. Facebook E-Commerce Tracking). Das hat den Vorteil, dass sich Deine Entwickler:innen nicht verbiegen müssen und die Informationen in einem Format zur Verfügung stellen können, welches für sie am besten und einfachsten umzusetzen ist. In diesem Fall verwendest Du in der Tag-Konfiguration nicht direkt den Data Layer sondern eine eigene JavaScript Variable.
Dieser Möglichkeit bedienen wir uns. Mit der Variable stellen wir sicher, dass immer die korrekten Informationen übermittelt werden. Außerdem können wir diese dabei sogar noch verändern. Vorher müssen wir aber noch einen wichtigen Unterschied klären.
Data Layer Variable – Version 1 vs. Version 2
Im Google Tag Manager greifst Du am einfachsten auf Daten aus dem Data Layer mit einer Data Layer Variable zu. Vielleicht ist Dir dabei schon mal die Option aufgefallen, mit der Du zwischen Version 1 und Version 2 umschalten kannst.
Meistens ist Version 2 voreingestellt. Wenn Du diese Option wählst, dann erhältst Du den kompletten E-Commerce Data Layer. Wenn auf einer Seite z.B. sowohl Informationen zur “Produktdetailansicht” als auch für das “Legen in den Warenkorb” zum Data Layer hinzugefügt werden, dann erhältst Du mit Version 2 den gesamten, zusammengeführten Data Layer davon.
Version 1 hingegen gibt Dir immer nur den letzten, aktuellen Wert zurück. Wenn also (wie in meinem Fall) zunächst die Daten zur Transaktion und anschließend erst die Daten zum Checkout gepusht werden, dann enthält eine Version 1 Variable nur noch die Informationen zum Checkout.
Dieser Unterschied ist wichtig zu verstehen. Denn wenn Du in der Tag-Konfiguration auswählst, dass der Data Layer direkt verwendet werden soll, dann verfährt das Enhanced E-Commerce Tracking mit den Informationen darin wie bei der Version 1 Variable. So kam es auch in meinem Fall. Erst nachdem alle Daten gepusht wurden, wurde durch ein Event der Tag für die Transaktion ausgelöst. Zu dem Zeitpunkt war der letzte Wert vom vorherigen Checkout Schritt im DataLayer und entsprechend wurde dieser anstatt der korrekten Transaktionsdaten erfasst.
Du brauchst Unterstützung? Dann sieh Dir an, wie wir Dir bei der Webanalyse helfen können!
Daten aus dem Data Layer extrahieren
Genau diesen Unterschied habe ich mir zunutze gemacht, um die korrekten Daten für die Transaktion aus dem Data Layer zu extrahieren. Dafür habe ich zunächst eine Data Layer Variable erstellt, mit der ich mir den gesamten “ecommerce” Teil (Version 2) aus den Daten hole. Version 1 hätte mir hier nicht geholfen, weil ich zum entscheidenden Zeitpunkt wieder nur die Checkout Daten zurück bekommen hätte.
Anschließend habe ich mit folgendem kleinen JavaScript Code die Transaktionsdaten aus dem gesammelten E-Commerce Data Layer Objekt herausgezogen und anschließend wieder ordentlich einzeln verpackt:
function() {
// Hole Dir den E-Commerce Data Layer.
var ecomData = JSON.parse(JSON.stringify({{Ecommerce Objekt}}));
// Nimm Dir daraus nur die Daten zur Transaktion.
var purchaseData = ecomData['purchase'];
// Gib den neu zusammengebauten E-Commerce Data Layer zurück.
return {'ecommerce' : {'purchase' : purchaseData}};
}
Und genau diese Variable habe ich dann in der Konfiguration des Tags im Enhanced E-Commerce Bereich hinterlegt. So werden jetzt beim Auslösen einer Transaktion die korrekten Daten übermittelt.
Daten im Data Layer verändern und ergänzen
Wenn wir die Daten schon extrahieren und neu verpacken, können wir sie bei dieser Gelegenheit auch noch verändern oder ergänzen. Damit nähern wir uns wieder der Lösung von Simo. In einem anderen Kunden Fall habe ich so z.B. die Warenverfügbarkeit im Data Layer auf Produktbasis ergänzt.
Bei diesem Kunden wollten wir auswerten, ob Waren in den Warenkorb gelegt werden, obwohl diese nicht mehr verfügbar, aber dennoch bestellbar sind. Der technisch sauberste Weg wäre, diese Information direkt von der Seite zur Verfügung stellen zu lassen, statt sie selber auszulesen. Aber es sollte schnell gehen und der nächste Release der Webseiten Agentur war erst einen Monat später.
Im Grunde ist der Code dafür nur eine Erweiterung des Codes von oben. Mit einem anderen Skript lese ich zunächst die Warenverfügbarkeit aus (für alle Produktvarianten, die auf der Seite angezeigt werden). Anschließend schaut das Skript, welche Variante(n) zum Warenkorb hinzugefügt wurde, gleicht dies mit der Liste aller Varianten ab und ergänzt im “Add To Cart” Data Layer die entsprechende Verfügbarkeit:
function() {
// Lege den Index der benutzerdefinierten Dimension fest.
var index = '8';
// Hol Dir die Info zur Waren Verfügbarkeit.
var products = {{JS - Waren Verfügbarkeit}};
// Hole Dir den E-Commerce Data Layer.
var ecomData = JSON.parse(JSON.stringify({{DL - ecommerce}}));
var ecomAddProducts = ecomData['add']['products'];
// Ergänze die Waren Verfügbarkeit für alle Produktvarianten.
for(i = 0; i < products.length; i++) {
if(products[i][0] == ecomAddProducts[0]['id']) {
ecomAddProducts[0]['dimension' + index] = products[i][1];
}
}
// Geb den ergänzten Data Layer zurück.
return {'ecommerce' : {'add' : {'products' : ecomAddProducts}}};
}
Auch diese JavaScript Variable übergebe ich im Event Tag beim “Add To Cart” als benutzerdefinierte Variable anstatt der direkten Nutzung des Data Layers.
Zeit und Geld sparen
Zusammenfassend können wir also festhalten, dass die Nutzung einer benutzerdefinierten Variable anstatt des Data Layers ein nützliches Werkzeug in Deinem Enhanced E-Commerce Tracking ist.
Sei es, dass Du auf Deiner Webseite mit einem semantischen Data Layer arbeitest und diesen für verschiedene Plattformen formatieren musst. Deine Entwickler:innen bekommen die Freiheit, ihr eigenes Format zu wählen, mit der sie am einfachsten und schnellsten arbeiten können und müssen dadurch nicht die steifen Vorgaben von Google erfüllen. Und Du erhältst die Flexibilität, zeitnah auf mögliche Änderungen zu reagieren.
Oder Du benutzt dieses Vorgehen für das Extrahieren, Verändern oder Ergänzen von Informationen. Da das alles direkt im Google Tag Manager geschieht, bist Du unabhängig von Entwicklungsressourcen, die dich eventuell zusätzliches Budget kosten, und kannst Anpassungen und Ergänzungen eigenständig und meist viel schneller umsetzen.
In jedem Fall sparst Du Dir Zeit und Geld und erleichterst Deinen Entwickler:innen das Leben. Probiere die benutzerdefinierten Variablen also gerne mal in Deinem Setup aus.
Google Looker Studio? So bringst Du Deine Dashboards auf Hochform!
