Implementierung des Shopify-GA4-E-Commerce-Trackings

Einleitung

Google Analytics 4 ist ein beliebtes Tool für Analyseberichte, das von Millionen Unternehmen verwendet wird. Es gilt allgemein als das Tool, das Unternehmen mitteilt, wie viel Webtraffic sie erhalten, wichtige Marketingkanäle überwacht und ihre wichtigsten KPIs erfasst.

In dieser Schritt-für-Schritt-Anleitung erklären wir Ihnen, wie Sie das GA4-E-Commerce-Tracking in einem Shopify-Shop mit einem Plus-Plan konfigurieren.

Für Shopify-Shops gibt es zwei Arten von Tarifen: den Basis- bzw. sogenannten Non-Plus-Tarif und die Plus-Version. Die Implementierung des Google-Analytics-4-E-Commerce-Trackings hängt von der Version Ihres Onlineshops ab. Wenn Sie die standardmäßige Non-Plus-Version haben, können Sie Google Analytics auf allen Seiten Ihres Shops installieren (mit Ausnahme der Checkout-Seiten). Shopify Plus ermöglicht es Ihnen dagegen, den Tracking-Code (oder den Google Tag Manager) auf allen Seiten Ihres Shops zu platzieren.

Zum Zeitpunkt der Erstellung dieses Leitfadens gibt es in den Shopify-Einstellungen keine integrierte Lösung, die einen Shopify-Shop ähnlich wie die Lösung mit Universal Analytics mit GA4 verbindet. Mit Universal Analytics konnten Sie das erweiterte E-Commerce-Tracking einfach per Mausklick aktivieren, und alle E-Commerce-Daten wurden automatisch an Ihre Universal-Analytics-Property gesendet.

Mit GA4 ist der Prozess etwas komplizierter.

Wir haben dieses Tracking bereits für viele unserer Kunden implementiert und können Ihnen bei der Konfiguration helfen, selbst wenn Sie die Non-Plus-Version Ihres Shops verwenden.

GTM in Ihrem Shop installieren

Zu Beginn der GA4-Konfiguration müssen Sie entscheiden, auf welche Weise Sie den GA4-Tracking-Code zu Ihrem Shopify-Shop hinzufügen. Es gibt 2 Möglichkeiten: durch das Hinzufügen des Tracking-Codes mithilfe des Global-Site-Tag-Verfahrens (gtag.js) oder über den Google Tag Manager. Wir verwenden bevorzugt den Google Tag Manager, da Sie damit Ihr Tracking einfach und unkompliziert konfigurieren können, anstatt schwierige und umfangreiche gtag.js-Codes manuell zu Ihrer Website hinzuzufügen. Außerdem müssen Sie möglicherweise einen Entwickler um Hilfe bitten, obwohl Sie dies gleichzeitig selbst in GTM erledigen könnten.

Here ist die offizielle Dokumentation von Google zu allen E-Commerce-Events und ihren Parametern sowie zu den Beispielen für die Übergabe an GA mit gtag.js.

Wenn Sie das E-Commerce-Tracking mit GTM implementieren (und bereits Ihren GTM-Container erstellt haben), müssen Sie es im Code Ihres Shopify-Shops installieren. Gehen Sie dazu in Ihrem GTM-Konto zu „Admin“ – „Install Google Tag Manager“:

Kopieren Sie anschließend das erste Snippet und fügen Sie es so weit oben wie möglich nach dem <head>-Tag in den Dateien theme.liquid und checkout.liquid ein: „Online Store“ – „Edit code“ des aktuellen Themes:

Das zweite GTM-Snippet sollte sowohl in die Dateien theme.liquid als auch checkout.liquid eingefügt werden, jedoch nach dem <body>-Tag:

Nachdem GTM nun erfolgreich in Ihrem Shop installiert ist, besteht der nächste Schritt darin, eine Data Layer mit allen erforderlichen Events und Parametern zu erstellen, damit GA4 mithilfe von GTM auf die Informationen zugreifen kann.

Data-Layer-Code erstellen

Kurz gesagt ist die Data Layer eine virtuelle Ebene, auch ein Array, auf einer Website, in der Entwickler oder andere Tools Daten (etwa Nutzer- oder Inhaltsinformationen) speichern können. Mithilfe dieser Informationen verwendet der Google Tag Manager Trigger, Tags und Variablen, um Daten an andere Tools wie Google Analytics, Google Ads, Facebook Pixel und weitere zu senden.

Google verfügt über eine ausgezeichnete offizielle Dokumentation in der Sie alles über die Definition, Verarbeitung und Data-Layer-Variablen lesen können.

Es gibt inzwischen viele Open-Source-Lösungen mit fertigem Data-Layer-Code für Shopify-E-Commerce-Events (Tipp: Verwenden Sie GitHub resource).

Im nächsten Schritt unserer Implementierung erstellen wir ein Snippet namens „dataLayer-allPages“ und fügen dort den gesamten Code aus unserer Lösung mit der Data Layer ein.

Beispiel für den dataLayer-Code, der ein E-Commerce-Event übermittelt view_item:

Beachten Sie, dass Sie den Operator divided_by: 100.0 anwenden müssen, um für Parameter wie „price“, „discount“ oder „value“ einen Float-Wert zu erhalten, der auch bei unterschiedlichen Währungen oder Formaten korrekt ist.

Als zusätzliche Events konfigurieren wir außerdem blog und 404 -Events. Jede Blogseite löst das blog -Event mit Informationen zum Beitragsautor, Erstellungsdatum und Titel des Beitrags aus, sofern Sie über einen entsprechenden Website-Bereich verfügen.

404 -Event wird ausgelöst, wenn eine nicht gefundene Datei oder Seite aufgerufen wird, und übermittelt die URL-Pfadinformationen.

Wenn Sie die Dimension „Seitenposition“ in Ihre Explore-Berichte in GA4 aufnehmen, können Sie analysieren, wie oft Nutzer solche Seiten besucht haben:

Als weiteren Schritt für Ihren Plus-Shop sollten Sie das Snippet ‚dataLayer-allPages‘ in Ihre Liquid-Datei einfügen. Fügen Sie den Code {% include ‘dataLayer-allPages’ %} direkt vor den schließenden </head>-Tags in den Layouts theme.liquid und checkout.liquid ein:

Wie bereits erwähnt, erlaubt Shopify Shops mit einem Non-Plus-Tarif keine Änderungen am Code der Checkout-Seiten, und für diese Shops besteht kein Zugriff auf die Datei checkout.liquid. Daher können solche Shops keine Events der Checkout-Phase erfassen (begin_checkout, add_shipping_info, add_payment_info).

Für einen Plus-Shop steht Ihnen das purchase -Event im Data-Layer-Code von checkout.liquid zur Verfügung. Bei einem Non-Plus-Shop müssen Sie ein spezielles Skript auf der Bestellbestätigungsseite einfügen. Suchen Sie dazu in den Einstellungen unter „Checkout“ den Bereich „Order status page – Additional scripts“ und fügen Sie das Skript dort ein:

Vergessen Sie außerdem nicht, Ihr GTM-Hauptsnippet direkt nach diesem Skript einzufügen, damit Ihre Bestellbestätigung korrekt getaggt wird und Sie purchase Ereignis an GA4.

Damit ist Ihre Data Layer bereit. Als Nächstes konfigurieren Sie GTM-Variablen, Trigger und Tags, um Informationen aus dieser Data Layer an GA4 zu senden.

GTM-Tags konfigurieren

Es gibt mehrere Möglichkeiten, Ihr GTM zu konfigurieren, um E-Commerce-Informationen an GA4 zu senden. Eine davon besteht darin, einen fertigen GTM-Container zu importieren, in dem alle erforderlichen Tags, Trigger und Variablen bereits eingerichtet sind. Alternativ können Sie Tags selbst erstellen. Wir verwenden einen fertigen GTM-Container und importieren ihn in ein GTM-Konto. Öffnen Sie im GTM-Konto den Bereich „Admin“, wählen Sie „Import Container“, wählen Sie eine JSON-Datei mit dem GTM-Container und anschließend den Arbeitsbereich sowie die Option „Overwrite“ oder „Merge“ aus.

Seien Sie vorsichtig, wenn Sie Ihren aktuellen Arbeitsbereich überschreiben, damit keine wichtigen Inhalte verloren gehen.

Danach finden Sie in Ihrem Arbeitsbereich alle vorhandenen Tags mit E-Commerce-Events, Variablen und Triggern.

Sehen wir uns ein Beispiel für Data-Layer-Variablen und einen Trigger an, die wir in der Data Layer verwenden, um das Tag zu erstellen, das view_item event.

Zunächst erstellen Sie Data-Layer-Variablen, die Informationen aus der Data Layer zum angesehenen Produkt abrufen (auch wenn es in den Warenkorb gelegt oder im Warenkorb angesehen wurde). Später können Sie mithilfe dieser benutzerdefinierten Variablen wichtige Details zu E-Commerce-Daten an Google Analytics übertragen.

Unsere Variable heißt Products. Sie ist aber auch hilfreich, wenn Sie mit anderen Nutzern in GTM arbeiten und eine Namenskonvention verwenden möchten, etwa ‚dlv-products‘, um Informationen sinnvoll bereitzustellen.

Achten Sie darauf, dass der Name der Data-Layer-Variable exakt mit dem Namen in Ihrer Data Layer übereinstimmt. Im Bild oben sehen Sie, wo wir den Code mit dem dataLayer.push von view_item Ereignis, das die Data-Layer-Variable ecommerce mit items array.

Anschließend können Sie einen Trigger vom Typ „Custom Event“ erstellen und den Event-Namen exakt wie in Ihrem dataLayer.push eingeben:

Nun ist alles für die Einrichtung des Tags bereit.

Geben Sie den Parameternamen Items in den Event-Parametern ein, die als GA4- view_item Eventparameter an GA4 gesendet werden. Als Wert verwenden Sie die zuvor erstellte Data-Layer-Variable. Für das Configuration-Tag wählen Sie Ihr allgemeines Tag mit der Mess-ID Ihres GA4-Datenstreams aus.

Klicken Sie auf „Save“ – herzlichen Glückwunsch! Nun ist Ihr view_item -Event konfiguriert. Auf dieselbe Weise richten Sie alle anderen E-Commerce-Events ein. Dies ist ein Beispiel für einen purchase event tag:

Jetzt ist es an der Zeit, das Setup zu debuggen und einige Testkäufe durchzuführen.

Einrichtung für Tests und Fehlerbehebung

Nachdem Sie alle Tags konfiguriert haben, sollten Sie überprüfen, ob sie korrekt ausgelöst werden und GA4 alle Informationen erhält. Öffnen Sie dazu den GTM-Vorschaumodus in Ihrem GTM-Konto, sehen Sie sich Produkte an, legen Sie sie in den Warenkorb, starten Sie den Checkout und führen Sie einen Testkauf durch.

Sehen wir uns die Data Layer im Tag Assistant an, indem wir eine Produktseite öffnen.

Das bedeutet, dass die Data Layer alle von Ihrem Shopify-Shop bereitgestellten Informationen erhält. Anschließend sollte sie diese über die konfigurierten GTM-Tags an GA4 weitergeben.

Wenn Sie in Ihrer GA4-Property im Bereich „Configure“ den DebugView öffnen, können Sie alle in GA4 erscheinenden Events debuggen. In unserem Fall:

Wenn Sie außerdem im Bereich „Realtime“ der Standardberichte sowie im DebugView einen Testkauf durchführen, können Sie das purchase -Event mit der Liste der Event-Parameter sehen, die Sie im Tag Manager konfiguriert haben:

Nützliche Tipps

Bei der Implementierung des GA4-E-Commerce-Trackings für Ihre Shopify-Website ist das Senden von E-Commerce-Daten zum Event-Tracking einschließlich Kauf-Tracking zulässig. Daher sollten Sie niemals personenbezogene Daten (personenbezogene Informationen, PII) an Google Analytics senden. Denken Sie daran, wenn Sie Ihre Events erstellen, insbesondere bei Events, die auf der Kaufabschlussseite erfasst werden, auf der Ihre Kunden Namen, Adressen und E-Mail-Adressen eingeben – all diese Daten gelten laut Google als PII. Sie können sie zwar in der Data Layer speichern, dürfen Google Analytics jedoch nicht erlauben, sie über GTM abzurufen. Andernfalls kann Ihr Google-Analytics-Konto gesperrt werden.

Seien Sie vorsichtig, wenn Sie den Code Ihres Shops bearbeiten. Stellen Sie sicher, dass Sie ein Backup des Codes Ihres Live-Themes gespeichert haben. Wenn Sie sich bei der Installation zusätzlicher Skripte oder Snippets nicht sicher sind, wenden Sie sich an Ihren Entwickler oder an eine Person mit Erfahrung in diesem Bereich. Andernfalls können Sie Ihren Shop beschädigen, wenn Sie sogar GTM-Code an der falschen Stelle einfügen.

Testen, testen, testen.

Testen Sie Ihre Konfiguration immer. Ideal wäre es, wenn Sie sie in jeder Phase testen. Sie haben ein Configuration-Tag hinzugefügt, sehen aber keine Seitenaufrufe? Vielleicht haben Sie die falsche Mess-ID Ihres GA4-Datenstreams hinzugefügt. Prüfen und testen Sie sie.

Ein Event wird an GA4 übermittelt und ist dort sichtbar, aber es enthält keine Event-Parameter? Vielleicht haben Sie in GTM den falschen Namen der Data-Layer-Variable als Wert des Event-Parameters eingegeben. Ändern Sie ihn und testen Sie erneut.

Keine Werte in der Data Layer? Vielleicht haben Sie sich bei den Namen der Shopify-Liquid-Objekte und ihrer Eigenschaften in Ihrem Data-Layer-Code vertan. Fragen Sie Ihren Entwickler oder die Shopify-Community oder prüfen Sie die offizielle Shopify Cheat Sheet. Beheben Sie den Fehler anschließend und testen Sie erneut.

Fazit

Das GA4-E-Commerce-Tracking bietet Ihnen hervorragende Möglichkeiten, Ihre Shopify-Verkäufe über verschiedene Traffic-Quellen hinweg zu analysieren. Sie können einen Funnel-Explorationsbericht erstellen und so die Conversion-Rate zwischen verschiedenen Phasen des Kauftrichters messen (view_item, add_to_cart usw.).

Außerdem können Sie die Anzahl Ihrer E-Commerce-Käufe, den Gesamtumsatz sowie die gekauften, angesehenen, hinzugefügten oder aus dem Warenkorb entfernten Artikel sehen.

In diesem Leitfaden haben wir ausführlich beschrieben, wie Sie dieses Tracking für Shopify-Shops mit Plus-Tarif implementieren. Das GA4-E-Commerce-Tracking lässt sich dort deutlich einfacher konfigurieren als beim Non-Plus-Tarif, da bei Letzterem kein Zugriff auf die Checkout-Seite besteht und Sie das Skript für die Purchase Data Layer entwickeln müssen. Wenn Sie dabei Hilfe benötigen, können Sie uns gerne kontaktieren. Wir haben ein eigenes Skript zur Konfiguration des GA4-Trackings für Non-Plus-Shops entwickelt.

Teilen über: