E-Commerce Tracking mit GA4 und WooCommerce

tl;dr: Ich zeige dir, wie du einen Datenstream in GA4 erstellst und diesen anschließend mit dem Google Tag Manager einrichtest. Nach einem kurzen Exkurs zum E-Commerce dataLayer erstellen wir Variablen für das E-Commerce Tracking und letztendlich ein GA4 Event Tag für E-Commerce Events. Im letzten Schritt testen wir die Funktionalität des Setups und ich zeige dir, wie du einen E-Commerce-Funnel-Report in GA4 erstellst.

Lesezeit: ca. 15 Minuten
Letztes Update: 30. Januar 2024

Der Blogartikel Ecommerce Tracking mit WooCommerce von A-Z ist eines der meistgelesenen Tutorials in der Geschichte von MONOBUNT. Die dortige Anleitung ist jedoch für Universal Analytics (rückwirkend auch GA3) verfasst. Nachdem Universal Analytics mit Juni 2023 die Segel gestrichen hat, ist es nun höchste Zeit für eine Anleitung für Google Analytics 4 – kurz GA4.

Datenstream in GA4 erstellen

Im ersten Schritt brauchst du natürlich ein Google Analytics 4 Konto. Dieses kannst du wie gewohnt auf analytics.google.com anlegen. Nachdem du bei den Stream-Details die korrekte URL angibst (www bzw. non-www beachten), bekommst du eine Stream ID und eine Mess ID. Für das Setup im Google Tag Manager ist jene ID mit „G-“ relevant.

Eine fundamentale Änderung zwischen UA und GA4 ist, dass das Datenmodell von GA4 – ganz im Gegensatz zu Universal Analytics, wo es auch Seitenaufrufe, Transaktionen, Nutzertimings etc. gegeben hat – nur mehr aus Events besteht.

Seitenaufrufe (page_view), Scrollvorgänge (scroll), Klicks auf externe Links (click), Website-Suche (search), Engagement mit einem Video (video_) sowie Datei-Downloads (file_download) werden in GA4 außerdem vollautomatisch getrackt. Man muss also keine Event-Tags im GTM anlegen, um diese automatisch erfassten Ereignisse auf Webseiten tracken zu können. Bei den Bezeichnungen in Klammer handelt es sich um die offiziellen Ereignis-Namen.

Configuration-Tag im GTM anlegen

Im zweiten Schritt musst du im Google Tag Manager ein so genanntes Configuration Tag für GA4 erstellen. Dieses Tag ist das Fundament für jegliches weitere Tracking mit GA4. Dazu bei „Tags“ ein neues Tag vom Typen „Google Analytics: GA4 Configuration“ auswählen. Bei der Measurement ID (bzw. Mess ID) hinterlegst du dann die zuvor kopierte ID mit dem Syntax G-XXXXXXXXX.

Ich würde dir jedoch empfehlen, die ID nicht einfach hineinzukopieren, sondern vorher eine Konstante daraus zu machen. Der Vorteil daran ist, dass du die Mess ID zu einem späteren Zeitpunkt nur in dieser Variable adaptieren musst, wenn sich diese (aus welchen Gründen auch immer) einmal ändern sollte, nicht aber in den einzelnen Configuration- bzw. Event-Tags. Als Trigger wählst du „Alle Seiten“.

Exkurs: Datenschutz-Verbesserungen bei GA4

Wenn du ein Cookie-Tool wie CookieBot, WebCare oder Borlabs verwendest, musst du den Trigger „All Pages“ dementsprechend anpassen, um den Bestimmungen der EU-Cookie-Richtlinie gerecht zu werden. Ich werde eine solche Anleitung für den CookieBot zu einem späteren Zeitpunkt als Tutorial bereitstellen. Den offiziellen How-To-Artikel von der offiziellen CookieBot-Seite findest du hier.

In Universal Analytics musstest du aufgrund der Bestimmungen der DSGVO bei „Fields to set“ zusätzlich immer die Einstellung „anonymizeIp = true“ einstellen, damit die IP-Anonymisierung in der UA Property aktiviert wurde. Dies ist in GA4 nicht mehr notwendig – die IP-Anonymisierung ist nun zur Standardeinstellung geworden.

Wir haben uns bereits mit dem Thema befasst, ob GA4 in Österreich überhaupt noch verwendet werden darf. Abgesehen davon kann man Google durchaus einige Zugeständnisse rund um das Thema Datenschutz attestieren.

GA4 verarbeitet alle Daten von Endgeräten innerhalb der EU auf Servern in der EU. Zwar verarbeitet GA4 IP-Adressen für die Geo-Lokalisierung, speichert diese IP-Adressen allerdings nicht mehr. Google Signals kann man deaktivieren, um die Verknüpfung mit Google-Konten zu unterbinden.

GTM4WP und der EEC dataLayer

Nach dem Anlegen des GA4 Configuration Tags kannst du das sehr beliebte Plugin GTM4WP (früher „Google Tag Manager For WordPress“) auf deiner WordPress- bzw. WooCommerce-Seite installieren und einrichten. Das kostenlose Plugin von Thomas Geiger findest du im WP-Plugin-Verzeichnis. Die Funktionalitäten dieses Plugins haben sich im Laufe der Jahre ständig erweitert bzw. angepasst.

So ist es beispielsweise mittlerweile möglich, nur mehr den dataLayer zu aktivieren. Diese Einstellung ist besonders interessant, wenn du deinen GTM-Container schon über ein anderes Plugin oder direkt im <head> deiner Seite (nicht empfohlen) eingebunden hast. Hierzu die Einstellung „Container code ON/OFF“ auf „OFF“ stellen.

Aber was ist nun eigentlich der dataLayer? Damit bezeichnet man ein JavaScript-Objekt, in dem verschiedene Trackinginformationen zwischengespeichert werden. Die empfehlenswerte Seite analyticsmania.com hat dazu eine recht gute Darstellung erstellt, welche du unterhalb sehen kannst. Diese Objektschicht liegt somit zwischen der Website und dem Tag Manager und ermöglicht erst das E-Commerce Tracking auf Webseiten (egal ob dies nun WooCommerce, Shopify, Shopware oder irgendein anderes Shopsystem ist)

(c) analyticsmania.com

Dieser dataLayer kann manuell (von eine:r Entwickler:in) eingebunden werden, dies ist jedoch in 99 von 100 Fällen nicht notwendig, weil es in jedem relevanten Shopsystem ein Plugin oder eine Extension dafür gibt, welche den E-Commerce dataLayer ganz einfach in eine Seite einbindet. Alles Wissenswerte über den dataLayer findet man in der Tag-Manager Hilfe von Google: zum einen im Artikel Die Datenschicht bzw. zum anderen in Enhanced Ecommerce for Tag Manager.

Setup von EEC in GTM4WP

Doch zurück zu unserem GTM4WP-Plugin. Alle Variablen und Trigger, welche man für das E-Commerce-Tracking in GA4 benötigt, werden von diesem Plugin bereitgestellt. Du findest das Plugin nach Installation unter Einstellungen > Google Tag Manager.

Du solltest bei den Einstellungen zumindest „Track enhanced e-commerce“ aktivieren, ich würde an dieser Stelle auch die Aktivierung von „Customer data in data layer“ sowie „Order data in data layer“ empfehlen. Alle anderen Einstellungen sind nicht zwingend, können aber je nach Anwendungsfall recht sinnvoll sein.

Sobald du diese Einstellungen im Plugin getroffen hast, sind alle deine notwendigen Arbeiten im Backend deiner Website abgeschlossen und du brauchst ab diesem Zeitpunkt zur weiteren Einrichtung nur mehr den Google Tag Manager und GA4.

Parameter definieren

Nun wird es etwas tricky. Die Namen einiger E-Commerce-Ereignisse und -Parameter haben sich bei GA4 geändert. Google weist in der „Measure Ecommerce“ Dokumentation für GA4 auch extra darauf hin:

Dementsprechend muss man für das E-Commerce-Tracking in GA4 eine Migration durchführen. Die UA-Implementierung muss dabei unverändert gelassen werden und man muss doppelte Ereignisse für die GA4 Property erstellen.

Das klingt nun etwas verwirrend, ist aber im Endeffekt gar nicht einmal so kompliziert. In der nachfolgenden Tabelle siehst du die Namen der Parameter in Universal Analytics und daneben die geänderten Parameter-Namen in GA4:

Universal Analytics Parameter	GA4 Parameter
ecommerce.affiliation	affiliation
ecommerce.coupon	coupon
ecommerce.currency	currency
ecommerce.shipping	shipping
ecommerce.tax	tax
ecommerce.transaction_id	transaction_id
ecommerce.value	value
ecommerce.items	items

Bei allen UA-Parametern handelt es sich um dataLayer-Variablen. Lediglich bei ecommerce.items handelt es sich um eine benutzerdefinierte JavaScript-Variable. Doch mehr dazu später. Nicht jeder dieser Parameter wird übrigens für jedes Tracking-Event verpflichtend benötigt.

Google hat im Hilfeartikel für die Migration von UA nach GA4 eine gute Übersicht erstellt, welche Parameter bei welchen Ereignissen benötigt werden. Wenn man also beispielsweise nur das Ereignis „purchase“ tracken will, dann benötigt man hierzu zumindest die Parameter items, transaction_id sowie value (siehe Screenshot unten), ansonsten funktioniert das Tracking nicht ordnungsgemäß.

Variablen in GTM erstellen

Aufgrund dessen solltest du zuerst Data Layer Variables (bzw. Datenschichtvariablen) für die benötigten Parameter anlegen. Am nachfolgenden Screenshot sieht man das Beispiel von „value“, also dem Bestellwert eines Kaufs im Webshop.

Den gleichen Vorgang für ecommerce.transaction_id wiederholen.

Für ecommerce.items gibt es in der GTM Template Gallery eine Vorlage, welche du in deinen GTM-Arbeitsbereich laden kannst. Die Template Gallery findest du unter Vorlagen > Variablenvorlagen. Anschließend einfach nach „GA4 Ecom Items – DLV Version 1“ suchen oder direkt unter diesem Link herunterladen.

Anschließend eine benutzerdefinierte Variable anlegen (Variablen > Neu > benutzerdefinierte Variable), die Vorlage aus der Galerie anklicken und die Variable abspeichern, z.B. eben als ecommerce.items. Man könnte die Variable auch mit einem benutzerdefinierten JavaScript erstellen, dies hat aber einige technische Nachteile.

Daher wird die hier beschriebene Vorgehensweise u.a. von Simo Ahava empfohlen, weil damit kein dataLayer.push zwischen Ecommerce Pushes stattfindet. Bei dieser Variable handelt es sich übrigens um ein Helferlein, welches die aktuellen Ecommerce-Daten aus dem dataLayer herauszieht.

GA4 Event Tag für E-Commerce Tracking

Nun hast du alle notwendigen Vorbereitungen abgeschlossen und kannst daher das Event-Tag für das E-Commerce-Tracking in GA4 zusammenbauen. Dazu erstellst du ein Tag vom Typen „Google Analytics: GA4 Event„. Beim Configuration-Tag wählst du das initial angelegte Tag aus. Beim Event Name trägst du „purchase“ ein. Anschließend bei den „Event Parameters“ die zuvor erwähnten Parameter eintragen. Links immer die Bezeichnungen aus GA4. Rechts kannst du über einen Klick auf den Lego-Stein dann die zuvor angelegten dataLayer- bzw. JavaScript-Variablem hinzufügen.

Anschließend musst du jetzt nur mehr einen Trigger erstellen, der das GA4 Event „purchase“ auslöst. Dazu einen Trigger vom Typ Custom Event (benutzerdefiniertes Ereignis) erstellen und als Event Name „purchase“ eintragen.

Anschließend kannst du das Tag mit dem Trigger zusammenführen und eine neue Container-Version des Google Tag Managers live schalten. Et voila – ab sofort (bzw. mit 24 Stunden Verzögerung) gehen in deinem GA4-Account auch die E-Commerce-Daten aus deinem Webshop ein.

Empfehlung: Ecommerce Events Tracking

Das Event „purchase“ ist jedoch nur eines von vielen Ereignissen im E-Commerce Tracking. Wie du weiter oben auf der Tabelle aus der Google-Hilfe siehst, gibt es auch andere interessante Events wie „add_to_cart“, „begin_checkout“ oder „view_item“. Die guten Neuigkeiten sind, dass du nicht für jedes einzelne dieser Events ein eigenes Tag und einen eigenen Trigger erstellen musst.

Stattdessen kannst du bei der Implementierung mit GTM4WP auch ein Custom Event mit allen relevanten Events auf einmal erstellen. Dazu erneut einen Trigger vom Typen benutzerdefiniertes Ereignis erstellen und dort folgenden Text einfügen:

view_item|view_item_list|select_item|add_to_cart|
remove_from_cart|view_cart|begin_checkout|
add_payment_info|add_shipping_info|purchase

Achtung: ich habe hier zwei Umbrüche eingefügt, damit die mobile Darstellung des Blogartikels nicht gesprengt wird. Diese Umbrüche nach dem kopieren und einfügen unbedingt wieder herausnehmen, der Text muss ohne Leerzeichen hinein!

Anschließend RegEx-Matching aktivieren und den Trigger abspeichern. Das Pipe-Symbol „|“ hat in RegEx die Aussage von „oder“.

Im nächsten Schritt kannst du ein neues, passendes GA4 Event-Tag erstellen (oder das „purchase“-Tag bearbeiten). Dazu beim Event Namen {{Event}} eintragen – auf diese Weise wird durch die Konfiguration des Triggers immer jenes Event verwendet, welches gerade relevant ist, z.B. eben „add_to_cart“ wenn jemand ein Produkt in seinen Warenkorb legt. Bei den Parametern diesmal am besten alle Parameter aus der Tabelle eintragen bzw. zunächst als Datenschichtvariablen anlegen. Last but not least kannst du den oben erstellten Trigger zuweisen.

Update OKT 22: Kompatibilität zwischen UA und GA4

Mit Anfang Oktober 2022 hat Google Analytics die E-Commerce Reports Integration vereinfacht. Nun ist es auch möglich, die UA-Implementierung zu verwenden, um damit die GA4 Ecommerce Events zu befüllen. Hier die Release Notes von Google:

Google stellt nun auch einen Ecommerce migration helper zur Verfügung. Dort bekommt man nach Eingabe der verwendeten Implementierung (gtag oder Google Tag Manager) sowie der UA-Property und der GA4 Mess-ID eine Anleitung zur Umsetzung des E-Commerce-Trackings, inkl. hilfreicher Screenshots.

Funktionalität des E-Commerce-Trackings testen

Ob das Tracking richtig funktioniert und die relevanten Events in GA4 aufscheinen, kannst du mit dem Preview Modus des GTM sowie dem DebugView in GA4 überprüfen. Dazu im ersten Schritt in den Vorschaumodus des GTM wechseln und anschließend in deinem Shop einen Kauf durchführen (hierbei eignet sich die Bezahlmethode „Vorkasse“ – besonders, wenn dein Shop schon live ist).

Sobald du auf der Bestellbestätigungsseite gelandet bist, nach GA4 wechseln. Den DebugView in GA4 findest du unter Konfigurieren > DebugView. Hier sollte anscheinend innerhalb von wenigen Sekunden nach dem Kaufabschluss das grüne „purchase“ Event auftauchen. Du siehst auf dem nachfolgenden Screenshot, dass hier auch andere Events wie „begin_checkout“ auftauchen. Schaut also gut aus.

Durch einen Klick auf das „purchase“-Event kannst du auch genauer überprüfen, ob die richtigen Parameter mitgesendet werden. In diesem Fall wird durch den Klick auf „value“ (Bestellwert) ein Wert von 8.20€ ausgegeben. Wenn du oben zum Tab „Elemente“ wechselst, siehst du die SKU des gekauften Produkts mitsamt der Produkteigenschaften wie „item_id“, „quantity“, „item_name“ oder „item_category“. Diese Werte verdanken wir unserem benutzerdefiniertem JavaScript für „items“ bzw. „ecommerce.items“, welches wir zuvor erstellt haben.

E-Commerce-Käufe in GA4

Die Statistik zu den E-Commerce-Käufen findest du in GA4 unter Berichte > Monetarisierung > E-Commerce Käufe. Dort findest du auch optisch ansprechende Graphen für „Artikelaufrufe nach Artikelname im Zeitverlauf“ sowie „Artikelaufrufe und Einlagen in Einkaufswagen nach Artikelname“. Zentral ist aber die tabellarische Darstellung der Verkäufe. Standardmäßig ist die Tabelle nach dem Artikelnamen gefiltert, du kannst die Tabelle jedoch auch nach der Artikelkategorie, Artikelmarke oder anderen Parametern sortieren.

Bonus: Erstellung einer explorativen Trichteranalyse

Du willst herausfinden, wo bzw. ob es Probleme im Checkout-Flow deines Webshops gibt? Dann ist eine Trichteranalyse genau das richtige für dich. Unter Erkunden > Explorative Trichteranalyse kannst du dir deinen Trichter (=Funnel) nach Belieben selbst zusammenstellen. Es sind hier diverse Voreinstellungen bei den Segmenten, Dimensionen und Messwerten getroffen.

Wirklich relevant sind jedoch die Schritte: hier kannst du durch einen Klick auf das Bleistift-Symbol die bereits angelegten Schritte anpassen bzw. durch eigene/andere Schritte ersetzen. Wenn du also beispielsweise wissen willst, wie viele Menschen ein Produkt in den Warenkorb legen, anschließend den Checkout beginnen und den Kauf letztendlich abschließen, dann würde die Konfiguration folgendermaßen aussehen:

Schritt 1 : Ereignis – add_to_cart // Schritt 2: Ereignis – begin_checkout // Schritt 3: Ereignis – purchase

GA4 besteht – wie schon eingangs erwähnt – nur mehr aus Events (Ereignissen). Hier habe ich im ersten Schritt das add_to_cart Event gewählt, im zweiten Schritt das begin_checkout Event und im letzten Schritt das purchase Event. Du siehst rechts in der Zusammenfassung auch gleich immer eine Vorschau, wie viele Nutzer:innen sich in einem bestimmten Zeitraum im zusammengebauten Funnel befinden.

Auf dem nachfolgenden Screenshot siehst du also beispielsweise, dass der Ausgangswert add_to_cart bei 100% liegt (logisch, wir wollen initial alle Nutzer:innen kennen, die ein Produkt in den Warenkorb gelegt haben). Knapp 70% der Nutzer beginnen mit dem Checkout (= bei WooCommerce im Bereich /kasse/) aber weniger als 20% aller Nutzer:innen schließen den Kauf dann auch wirklich ab.

Dies spricht in diesem konkreten Fall dafür, dass es im Checkout-Prozess irgendein (technisches oder inhaltliches) Problem geben könnte. Bei „Aufschlüsselung“ kannst du den Funnel auch nach anderen Parametern sortieren, beispielsweise nach dem Land oder nach der Art der ersten Benutzerinteraktion (cpc, organic, referral, email, etc.).

Zusammenfassung und Ausblick

Du siehst also, die Möglichkeiten von GA4 im E-Commerce-Tracking sind nahezu unendlich. Musste man bei Universal Analytics noch auf bestimmte Reports zurückgreifen, so kann man sich in GA4 einen individuellen Report für beinahe jeden beliebigen Anwendungsfall zusammenstellen. Wichtig ist dabei auch stets das optimale Zusammenspiel mit dem Google Tag Manager.

Dieses Tutorial zum E-Commerce-Tracking in GA4 ist eine Momentaufnahme, es ist gut möglich, dass sich die Ausgangsbedingungen bereits in wenigen Wochen wieder geändert haben. GA4 bekommt aktuell fast täglich neue Features und Funktionalitäten und so wird das auch weitergehen.

Web Analytics by MONOBUNT

Das alles klingt etwas zu kompliziert? Du hast gar keinen WooCommerce-Shop, sondern verwendest ein anderes Shopsystem? Wenn du das E-Commerce-Tracking in deinem Shop nicht selber einrichten willst oder kannst, kannst du uns gerne jederzeit kontaktieren und wir übernehmen das Setup für dich (inkl. der Einrichtung weiterer Conversion-Aktionen). Unter Webanalyse & Tracking findest du alle Infos zu unseren Dienstleistungen rund um GA4 und GTM.

 

---

Über den Autor

Gerald Emprechtinger ist seit 2017 im Team von MONOBUNT und seit Februar 2022 als Agenturleiter tätig. Er hat ein Diplomstudium für Marketing und Medienmanagement an der FH Salzburg sowie ein berufsbegleitendes MSc-Studium für Digital Marketing & Analytics am MCI Innsbruck abgeschlossen. Seine Leidenschaft gilt der Suchmaschinenoptimierung und der Webanalyse. Seit 2015 beschäftigt er sich mit Google Tag Manager und hat dazu viele Blogartikel und Gastartikel verfasst. Hier geht es zu den weiteren Blogartikeln von Gerald bei MONOBUNT.