Alle, die sich mit Tag-Management-Systemen beschäftigen, wissen die Vorteile, die sie bieten sehr zu schätzen. Durch Tag-Management-Systeme lassen sich einfach und nutzerfreundlich kleine Codeschnipsel in eine Website implementieren. Dadurch lassen sich Arbeitsprozesse verbessern, Kosten sparen und vieles mehr. In diesem Blogartikel werde ich Euch zeigen, wie man mittels Google Tag Manager Daten anpassen und sie im gewünschten Format weitergeben kann.
Der Google Tag Manager
Wir bei rankingCHECK arbeiten überwiegend mit dem Google Tag Manager und es gibt natürlich Gründe, warum. Nein, nicht nur, weil wir eine Google Partner-Agentur sind. Auch, weil der Google Tag Manager unter anderem folgende Vorteile mit sich bringt: Es sind beliebige Tags integrierbar, der Tag Manager ist weitverbreitet und man kann relativ einfach überprüfen, ob alle Tags richtig eingebunden sind. Zudem ist die Nutzung sehr einfach, Anpassungen können schnell vorgenommen werden, er wird ständig um neue Features erweitert und all das kostenlos. Wer mehr darüber erfahren will, findet in Majas Blogartikel weitere Infos.
In meinem Beispiel geht es um Nettowerte von Bestellungen. Affiliate-Netzwerke haben oft Tracking Codes oder Pixel, die man auch mithilfe des Google Tag Managers einbinden kann. In den meisten Fällen verlangen sie nach dem Nettoumsatz, um ihre Provisionsmodelle einzuschalten. Deswegen muss der Umsatz, den wir standardmäßig inklusive Steuern und Versandkosten haben, angepasst werden.
Der Data Layer
Bevor ich anfange – was ist der Data Layer eigentlich?
Der Data Layer ist eine zusätzliche Datenebene des Google Tag Managers, die auf der Website implementiert ist und am besten alle Informationen zu einer bestimmten Seite oder Aktion (zum Beispiel einer Bestellung) enthält. Dieses „Datenpaket“ kann vom Google Tag Manager beliebig ausgelesen werden.
Die Daten können sowohl statisch, wie zum Beispiel der Transaktionswert oder der Seitentyp, aber auch dynamisch sein – wie beispielsweise Daten, die man in ein Formular einträgt und die dann über den Data Layer übertragen werden. Diese Daten befinden sich oftmals im Quellcode. Man kann sie also auslesen, wenn man weiß, wo man sie findet. Sie lassen sich dann mittels Google Tag Manager an andere Tools wie zum Beispiel Google Analytics senden. Die häufigste Verwendung findet der Data Layer beim E-Commerce- oder Enhanced E-Commerce-Tracking.
Obwohl Simo Ahava, einer der größten Google Tag-Manager-Gurus, den Data Layer als „ein sehr schwieriges Konzept, das schwer zu verstehen ist“ bezeichnet, sehen die notwendigen Aktionen ziemlich simpel aus. Um unser heutiges Ziel zu erreichen, müssen wir nur vier Variablen im Google Tag Manager erstellen und das Ergebnis prüfen. Es ist erstmal ausreichend, wenn man schon etwas Erfahrung mit dem Google Tag Manager gesammelt hat und JavaScript Basics beherrscht. (Das ändert aber nicht die Tatsache, dass der Data Layer wirklich ein schwieriges Konzept ist.) Nun kommen wir zum praktischen Teil meines Beitrags.
Der praktische Teil
Bestellwert in netto ausgeben
Angenommen, wir betreiben einen Online Shop für Kleidung. Ein Kunde bestellt ein paar T-Shirts und befindet sich auf der Bestellbestätigungsseite. Der Bestellwert (revenue) beträgt 35,43 €, davon sind 4,90 € Steuern (tax) und 5,99 € Versandkosten (shipping). Der Data-Layer-Befehl wirft nun folgende E-Commerce-Daten aus – um es anschaulicher zu machen, habe ich das Google Developer-Beispiel genommen:
Wie man sehen kann, sind dort alle Daten untereinander aufgelistet, die wir für unsere spätere Anpassung benötigen. Diese können wir nutzen, um die passenden Data-Layer-Variablen im Google Tag Manager zu erstellen. Ich persönlich fange immer von oben an, damit ich nichts übersehe.
Die Variablen für den Bestellwert und die Steuer sollten im Google Tag Manager nach folgendem Beispiel erstellt werden:
Und:
Ich werde auch die Versandkosten ausschließen, dieser Schritt ist aber optional.
Jetzt haben wir alle Variablen für die letzte und wichtigste Variable, den Nettoumsatz, fertig. Dazu erstellen wir eine neue Variable mit dem Typ „Benutzerdefiniertes JavaScript“. Hier können wir nun eine JavaScript-Funktion einfügen, die dann zum Beispiel so aussieht:
In der Funktion habe ich zunächst in den Zeilen 3-6 die oben benötigten Variablen sowie die Variable für den Nettoumsatz definiert. Danach habe ich in den Zeilen 8-10 die jeweiligen Werte der zuvor erstellten Data-Layer-Variablen zugewiesen. Im Anschluss erzeuge ich den Nettoumsatz mit einer einfachen Verrechnung der Werte. Also Umsatz – Steuern – Versandkosten. Mit dem „return“-Befehl wird dann das Ergebnis des Nettoumsatzes als Wert für die neu erstellte Variable mit dem Google Tag Manager übergeben. Man sollte nur beachten, je nachdem ob man sich dafür entscheidet Versandkosten auszuschließen, die benutzerdefinierte JavaScript-Variable anzupassen.
Die Vorschau-Funktion zur Prüfung der Variablen nicht vergessen und das wär’s dann mit dem GTM 🙂 ! Es bleiben nur noch ein paar Schritte, um zu sehen, ob alles richtig funktioniert.
Im Debug-Modus unter „purchase“ (falls der Data Layer dieses Event definiert hat) → Data Layer sollte das Ergebnis folgendermaßen aussehen:
Unser erhofftes Endergebnis finden wir dann unter dem Event „purchase“ → Variables.
Zugegeben, ohne Erfahrung und JavaScript Basics sieht alles sehr kompliziert aus, ist es manchmal auch, aber im Endeffekt ist alles halb so schlimm. Also, nicht den Mut verlieren, wenn etwas nicht sofort klappt.
Fazit
Mit dem Beispiel habe ich gezeigt, wie man sehr schnell in nur ein paar Schritten, ohne aufwendige Datenanpassung die benötigten Werte herausbekommt, dazu die Zeit/Kosten spart und mehr oder weniger unabhängig (kommt auf die Erfahrung an), ohne einen Programmierer eine Anpassung der Daten durchführt. Besonders wenn man einen großen Online Shop betreibt, merkt man den Zeit- und Kostenunterschied bei der Nutzung eines Tag-Management-Systems.
P.S. Scheut euch nicht zu kommentieren 🙂 !
Ein Kommentar
Jessica Schiefer schrieb am 3. Juni, 2021 @ 15:00
Ich lasse mal ein dicken Dankeschön da!! Genau das was ich nun schon seit einer Weile gesucht habe!