GA4 E-Commerce Tracking im Google Tag Manager

GA4 E-Commerce Tracking mit Google Tag Manager einrichten


Alles was du für dein E-Commerce Tracking benötigst

10.08.2022 | Felix Hartung | Marketing

Wie du vielleicht schon weißt, wurde die alte Generation Universal Analytics bereits abgeschaltet und die Daten sind ab dem 01.07.2023 gar nicht mehr verfügbar. Deswegen ist dieser Beitrag für alle Spätzünder, die ihre GA4 Property noch nicht eingerichtet haben und das auf dem schnellsten Wege mit dem Google Tag Manager erledigen möchten.

Hier lernst du die Einrichtung aller Grundvoraussetzungen, die du für dein E-Commerce Tracking benötigst. Das bedeutet:

  • Pageviews
  • Purchase Events
  • Add to Cart Events
  • View item (Artikelaufruf-) Events

Voraussetzungen

Bevor wir mit der Einrichtung starten, müssen drei Grundvoraussetzungen erfüllt sein.

  1. GTM Basis Code: Zuerst musst du den Container Code im Head Bereich deines Shops implementieren. Das ist der Code, der dir bei der Einrichtung des Google Tag Managers als erstes präsentiert wird.
  2. Purchase Event E-Commerce Data Layer: Jedes Mal, wenn ein Nutzer bei der kauft, muss ein Event ausgelöst werden, das verschiedene Ereignis Parameter enthält. (Umsatz, Produkte, Transaktions-ID, etc.) All diese Ereignisparameter musst du zuerst einmal über ein Skript für den Google Tag Manager lesbar machen.
  3. Add to Cart & View item Event Data Layer: Genau diesen E-Commerce Data Layer benötigst du für das Add to Cart & View item Event, wenn du diese Ereignisse nutzen möchtest. Ist zu empfehlen, weil du damit viel besser deine Conversionrates kalkulieren kannst.

Für diese Voraussetzungen bieten die meisten Shopsysteme integrierte Lösungen oder Plugins wie z.B. GTM4WP für WooCommerce oder Easy Tag für Shopify.

1. GA4 Pageview Tag einrichten

Dafür gehst du erst mal in den Google Tag Manager, wählst dein Konto aus und legst ein neues Tag an.

Da oben kannst du erst mal das Tag benennen. Ich nenne es GA4 Pageview. Das kannst du nennen, wie du möchtest – Hauptsache du kannst es gut wiedererkennen. Unter Tag Konfiguration klickst du dann auf GA4 Konfiguration.

Jetzt wirst du nach einer Mess-ID gefragt. Die findest du in GA4 unter „Verwaltung > Datenstreams > Dein Datenstream“.

Jetzt musst du nur nur noch einen Trigger eingeben. Dafür wählst du „All Pages“ – Wir wollen ja, dass das Tag auf allen Seiten ausgelöst wird.

Speichern & erledigt – Jetzt können wir bereits unseren Traffic tracken.

2. GA4 Purchase Tag anlegen

Dafür gehen wir uns hier wieder in Google Tag Manager, klicken auf „Neu“ und benennen das Tag. Unter Tag Konfiguration klickst du auf GA4 Ereignis.

Hier wählst du zuerst dein Konfigurationstag aus, also „GA4 Pageview“. Der Ereignisname lautet „purchase“. Wichtig ist, dass es klein geschrieben wird, weil es sonst nicht richtig erkannt wird.

Den Trigger müssen wir später definieren, weil wir noch nicht wissen, wie genau dein Event im Data Layer benannt wurde. Daher erst einmal ohne Trigger abspeichern.

Jetzt müssen wir erstmal den Trigger erstellen, also dem Google Tag Manager mitteilen, wann das Ereignis überhaupt ausgelöst werden soll und wann die Daten an Google Analytics übergeben werden sollen. Dafür klickst du auf „In Vorschau ansehen“, gibst deine Shop-URL ein und führst eine Testbestellung durch.

Nun geht’s wieder zurück ins Vorschau Fenster. Auf der linken Seiten siehst du deine Seiten Aufrufe. Wir wollen den Seitenaufruf der Bestell Bestätigungsseite, weil dort das Skript mit dem Datalayer ausgelöst wird. Darunter werden alle Ereignisse gelistet, von denen eines dein Purchase-Event ist. Hier klickst du dann auf „Data Layer“.

Bei dir sollte es auch ungefähr so aussehen. Kann sein, dass es ein bisschen anders aussieht, weil jeder Data Layer unterschiedlich konfiguriert sein mag. Hier siehst du, wie dein Ereignis benannt wurde. Bei mir heißt es „purchase“.

Zurück im Google Tag Manager klickst du auf „Trigger“ und legst einen neuen an. Nun benennst du den Trigger und wählst den Triggertyp „Benutzerdefiniertes Ereignis“ aus. Hier gibst du deinen Ereignisnamen ein.

Nun kannst du deinen Trigger im Tag einpflegen.

Hinweis: Unser Datalayer Event trägt genau die gleiche Bezeichnung wie das GA4 Standardereignis (purchase) – Das muss bei dir nicht zwingend der Fall sein. Lege den Trigger immer nach der Bezeichnung in deinem Datalayer an. Doch der Ereignisname im GTM-Tag MUSS „purchase“ heißen.

Nun stellt sich noch die Frage, wie wir die ganzen Werte wie Transaktionsnummer, Kaufpreis, etc. übergeben. Dort eignen sich Variablen.

Dafür gehen wir es wieder in unser Vorschau Fenster und interpretieren den Data Layer. Wir sehen hier einen übergeordneten Punkt „ecommerce“ und mehrere untergeordnete Punkte. Wir müssen den übergeordneten immer vom untergeordneten Punkt über einen Punkt trennen. Das bedeutet für die Transaktionsnummer z.B. „ecommerce.transaction_id“ – So muss die Variable benannt werden.

Nun gehst du wieder zurück in GTM und legst unter „Variablen“ eine neue an. Wähle dafür den Typ „Datenschichtvariable“. Hier kannst du den aus dem Data Layer abgeleiteten Wert eingeben.

Das Ganze müssen wir jetzt für diese Variablen anwenden:

  • Transaktions-ID: Bei mir „ecommerce.transaction_id“
  • Kaufpreis: Bei mir „ecommerce.value“
  • Steuer: Bei mir „ecommerce.tax“
  • Versandkosten: Bei mir „ecommerce.shipping“
  • Währung: Bei mir „ecommerce.currency“
  • Produkte: Bei mir „ecommerce.items“

Ich werde das Anlegen der  jetzt mal überspringen, weil ich die schon angelegt habe. und zum Schluss hier ist es noch ein bisschen anders.

Wichtiger Hinweis: Wenn du einen Punkt beziehen möchtest, der innerhalb einer eckigen Klammer steht, musst du zwischen dem übergeordneten Punkt, der die eckige Klammer eröffnet und dem untergeordneten Punkt ein .0 ergänzen. Das heißt z.B. für item_id wäre die korrekte Bezeichnung „ecommerce.items.0.item_id“. Da ich aber in diesem Fall keinen spezifischen Punkt aus eckigen Klammern benötige, ist das für mich nicht relevant.

Wir haben jetzt alle unsere benutzerdefinierten Variablen eingerichtet. Nun müssen sie im Purchase Tag hinterlegt werden. Also fügen wir in unserem Purchase Tag unter „Ereignisparameter“ sechs neue Zeilen hinzu.

Die Parameternamen müssen genau so benannt werden:

  • items
  • transaction_id
  • value
  • tax
  • shipping
  • currency

Dann fügst du für jeden Parameter die zugehörige Variable in das rechte Feld (Wert) ein, indem du auf den Legobaustein mit + klickst.

Schlussendlich müsste das dann so aussehen:

Abspeichern und fertig ist unser Purchase Tag. Wir testen jetzt erst mal, ob das Event richtig eingerichtet wurde, d.h. ob die Variablen & der Trigger aus dem Data Layer richtig benannt wurden. Dafür gehen wir wieder ins Vorschaufenster und tätigen wieder eine Testbestellung.

So müsste es bei dir aus sehen, wenn du im Vorschaufenster auf den letzten Seitenaufruf (Bestellbestätigungsseite) klickst. Lediglich die unteren beiden Tags hast du noch nicht angelegt.

Nun klickst du auf dein GA4 Purchase Tag und dort unter „Messages Where This Tag Fired“ auf purchase. Möglicherweise ist die Bezeichnung bei dir anders.

Dann sollten bei dir die zugehörigen Werte der Testbestellung erscheinen, wenn alles richtig eingerichtet wurde.

3. GA4 Add to Cart Tag anlegen

Dafür müssen wir erst noch überprüfen, ob wir die Variablen, die wir fürs Purchase Tag nutzen, auch weiterverwenden können. Das hängt von der Struktur des Data Layers ab.

Zunächst suchst du im Vorschaufenster nach dem Seitenaufruf, wo dein Add to Cart Event ausgelöst wurde. Dort klickst du auf den Unterpunkt des Events, bei mir „add_to_cart“

Wir haben hier die gleiche Struktur wie beim Purchase Event Data Layer, also „ecommerce.items“ Das heißt, wir können in diesem Fall die Variable weiter benutzen. Wenn das bei dir nicht der Fall ist, musst du eine neue Variable anlegen, die deinem Data Layer entspricht.

Was wir jetzt noch anlegen wollen, ist unser Trigger. Dafür brauchen wir erst mal den Ereignisnamen, der hier unter Event übergeben wird, also bei mir „add_to_cart„.

Auch hier legst du im GTM einen neuen Trigger an, wählst „Benutzerdefiniertes Ereignis“ und gibst deinen Ereignisnamen ein.

Im nächsten Schritt legst du ein neues Tag an, nimmst wieder GA4-Ereignis, wählst dein Konfigurations-Tag aus und gibst dem Ereignis den Namen „add_to_cart„. Gib jetzt den Ereignisparameter items ein und hinterlege die zugehörige Variable. Zum Schluss musst du nur noch deinen bereits angelegten Trigger einfügen.

4. GA4 View item Tag anlegen

Das ganze führen wir jetzt auch für das View item Tag durch. Zunächst ermitteln wir den Ereignisnamen im Data Layer. In meinem Fall „view_item„.

Dafür richten wir wieder einen neuen Trigger ein und wählen „Benutzerdefiniertes Ereignis“. Ereignisnamen eingeben und abspeichern.

Auch hier können wir im Data Layer erkennen, dass wir unsere Variable recyclen können. Wenn das bei dir nicht der Fall ist, lege wieder eine neue Variable an.

Nun kannst du dein Tag anlegen, GA4-Ereignis als Tag Typ auswählen, dein Konfigurationstag festlegen und „view_item“ als Ereignisnamen eingeben.

Zum Schluss musst du nur noch den Ereignisparameter items hinzufügen und die Variable in das rechte Feld integrieren. Trigger setzen (View item Event) und abspeichern.

Testen und Fehler überprüfen

Um zu überprüfen, ob die Ereignis Parameter richtig übergeben werden, gehen wir jetzt wieder in unser Vorschau Fenster und lösen das View item und Add to Cart Event aus, in dem wir ein Produkt in den Warenkorb legen. Wir haben nun beide Events ausgelöst und gucken jetzt, welche Tags gefeuert wurden. Auf dem Seitenaufruf der Produktseite wurden nun drei Tags gefeuert, was völlig richtig ist.

Sieh dir nun noch einmal an, ob die Werte des Ereignisparameters stimmen. Dafür klickst du auf dein Tag und dort unter „Messages Where This Tag Fired“ auf add_to_cart oder view_item. Möglicherweise ist die Bezeichnung bei dir anders.

Im nächsten Schritt müssen wir alle Änderungen, die wir im Arbeitsbereich getätigt haben live stellen. Dafür klickst du im GTM-Arbeitsbereich auf „Senden“, benennst deine Version, z.B. „GA4 E-Commerce Events eingerichtet“ und klickst auf „Veröffentlichen“.

Zum Schluss wollen wir uns ansehen, ob die Events mit den zugehörigen Event-Parametern auch in GA4 richtig ankommen. Installiere dir dafür die Browsererweiterung Google Analytics Debugger. Achte auch darauf, dass die Erweiterung aktiviert ist (ON Beschriftung über dem Symbol).

Dann gehen wir wieder in unserer Vorschau Fenster und lösen die Events aus, d.h. eine Testbestellung ausführen. Dann gehen wir in Google Analytics auf „Konfigurieren > DebugView“. Hier siehst du auf einem Zeitstrahl, welche Events ausgelöst wurden. Klicke alle drei Events (Purchase, Add to Cart und View item) einmal an und sieh nach, ob die Werte unter Parameter oder Elemente vorhanden und korrekt sind.

Wenn du merkst, dass ein Event nicht richtig angekommen ist, dann überprüf das erst mal wieder im Vorschau Fenster des Tag Managers. Wenn dort alles richtig eintrifft, dann deutet das eher darauf hin, dass du bestimmte Parameter oder Events nicht richtig benannt hast, das heißt z.B.:

  • Im Purchase Tag den Ereignisnamen groß geschrieben
  • Parameternamen falsch geschrieben
  • Falsche Bezeichnung für Parameternamen, z.B. „revenue“ statt „value“

Falls keine Fehler mehr auftreten und die Events alle richtig eintreffen, hast du die Einrichtung erfolgreich abgeschlossen.