So richten Sie GA4 E-Commerce-Tracking auf Shopify ein

Inzwischen sollten Sie wissen, dass Google Universal Analytics im Juli 2023 einstellen und alles auf GA4 verschieben wird. Das bedeutet, dass Websitebesitzer GA4 so schnell wie möglich einrichten müssen. Für E-Commerce-Websites gibt es die zusätzliche Komplikation, dass E-Commerce-Tracking auch in GA4 funktioniert. Für Shopify-Shops war dieser Prozess bei Universal Analytics wirklich einfach, ist aber bei GA4 eine größere Herausforderung.

Lesen Sie weiter für einen einfachen Prozess zum Einrichten von GA4 E-Commerce-Tracking auf jeder Shopify-Website, ohne Apps installieren oder Entwickler einsetzen zu müssen.

Während jeder in der Lage sein sollte, diesem Leitfaden zu folgen, ist es einfacher, wenn Sie ein grundlegendes Verständnis der Funktionsweise von GTM haben.

Erstellen Sie eine Datenschicht in Shopify

Unsere erste Aufgabe besteht darin, eine Datenschicht zu erstellen. Die Datenschicht ist ein einfacher Code, der Informationen über die Website-Sitzung eines Besuchers enthält. Diese Informationen können dann an andere Plattformen wie GTM weitergegeben werden.

Wir haben für Sie eine Datenschicht erstellt, die auf der Bestellabschlussseite von Shopify angezeigt wird. Es füllt sich automatisch mit Informationen über die Bestellung des Kunden, wie Bestellwert, Versandkosten und gekaufte Artikel.

• Kopieren Sie das folgende Skript und fügen Sie es in das Feld „Checkout“-Skripte in Ihren Shopify-Admin-Einstellungen ein. Diese finden Sie unter „Einstellungen > Checkout & Konten > Zusätzliche Skripte“.

• Diese Datenschicht sendet ein „Kauf“-Ereignis an GTM, das Informationen über die Bestellung des Kunden enthält.

 {% if first_time_accessed %} <script> dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. window.dataLayer.push({ 'event': 'purchase', ecommerce: { 'transaction_id': '{{ order.name || order.order_number }}', 'value': {{ total_price | money_without_currency | remove:',' }}, // Includes tax & shipping 'tax': {{ tax_price | money_without_currency | remove:',' }}, 'shipping': {{ shipping_price | money_without_currency | remove:',' }}, 'currency': '{{ shop.currency }}', 'payment_type': '{{ order.transactions[0].gateway }}', //optional parameter 'items': [ {% for line_item in line_items %} { 'item_id': '{{ line_item.sku || line_item.product_id }}', //if no SKU exists, use product Id 'item_name': '{{ line_item.product.title }}', 'discount': {{ line_item.line_level_total_discount | money_without_currency }}, 'item_variant': '{{ line_item.variant.title }}', 'price': {{ line_item.final_price | money_without_currency }}, 'quantity': {{ line_item.quantity }} }, {% endfor %} ]} }); </script> {% endif %}**

Erstellen Sie einen Auslöseauslöser in GTM

Jetzt müssen wir einen Trigger einrichten, der ausgelöst wird, wenn Kunden eine Bestellung abschließen. Wenn der Trigger ausgelöst wird, wird das Tag mit den Bestellinformationen an GA4 gesendet.

Wir müssen die Bedingungen definieren, unter denen unser Kaufauslöser ausgelöst wird. Die Bedingung für unseren Trigger wird sein, wenn das Kaufereignis in unserer Datenschicht gepusht wird. Um dies einzurichten:

• Melden Sie sich bei GTM an, gehen Sie zum linken Menü und wählen Sie „Auslöser“.
• Drücken Sie die blaue Schaltfläche „Neu“.
• Nennen Sie Ihren Auslöser „GA4 – Kauf“.
• Drücken Sie das Symbol „Bearbeiten“ in der Ecke des Fensters „Trigger-Konfiguration“.
• Wählen Sie unter „Auslösertyp auswählen“ „Benutzerdefiniertes Ereignis“ aus.
• Geben Sie im Feld „Name der Veranstaltung“ „Kauf“ ein.
• Setzen Sie „Dieser Trigger wird ausgelöst bei“ auf „Einige benutzerdefinierte Ereignisse“.
• Legen Sie die Ereignisbedingungen fest auf:
• Ereignis - Gleich - Kauf

Wenn Sie fertig sind, sollte es so aussehen:

Erstellen Sie Datenschichtvariablen in GTM

Bevor wir unser Tag einrichten, müssen wir GTM-Variablen erstellen, um Informationen aus unserer Datenschicht abzurufen. Wenn Variablen neu für Sie sind, stellen Sie sie sich als Pakete vor, die kleine Informationen enthalten.

Diesen Variablen werden spezifische Werte aus der Datenschicht hinzugefügt, die dann an GA4 gesendet werden.

Wir müssen Variablen erstellen, um die folgenden Werte aus Ihrer Datenschicht zu extrahieren:

• Bestellumsatz

• Auftragsnummer

• Währung

• Steuer

• Versandkosten

• Artikel gekauft

• Klicken Sie in GTM im linken Menü auf die Seite „Variablen“.

• Klicken Sie im Feld „Benutzerdefinierte Variablen“ auf die Schaltfläche „Neu“.

• Auf diesem Bildschirm können Sie eine neue GTM-Variable erstellen. Sie müssen den folgenden Prozess für jede der oben aufgeführten Variablen durchführen. Die Details für jede einzelne Variable sind unten aufgeführt:

Bestellumsatz

Name: dlv - Dankesseite - Bestellumsatz

Variable Konfiguration:

Variablentyp: Datenschichtvariable

Name der Datenschichtvariablen: ecommerce.value

Auftragsnummer

Name: dlv - Dankesseite - Bestell-ID

Variable Konfiguration:

Variablentyp: Datenschichtvariable

Name der Datenschichtvariablen: ecommerce.transaction_id

Währung

Name: dlv - Dankesseite - Währung

Variable Konfiguration:

Variablentyp: Datenschichtvariable

Name der Datenschichtvariablen: ecommerce.currency

Steuer

Name: dlv - Dankesseite - Steuer

Variable Konfiguration:

Variablentyp: Datenschichtvariable

Name der Datenschichtvariablen: ecommerce.tax

Versandkosten

Name: dlv - Dankesseite - Versand

Variable Konfiguration:

Variablentyp: Datenschichtvariable

Name der Datenschichtvariablen: ecommerce.shipping

Artikel gekauft

Name: dlv - Dankesseite - Artikel

Variable Konfiguration:

Variablentyp: Datenschichtvariable

Name der Datenschichtvariablen: ecommerce.items

Jede Variable sollte nach Fertigstellung etwa so aussehen:

Erstellen Sie E-Commerce-Tags in GTM

Um E-Commerce-Daten in GA4 abzurufen, muss GTM ein Tag auf der Bestellabschlussseite auslösen. Dieses Tag enthält Informationen zu jeder Bestellung und wird zum Ausfüllen der GA4-Berichte verwendet.

• Gehen Sie zurück zu GTM und klicken Sie im linken Menü auf „Tags“.
• Drücken Sie die blaue Schaltfläche „Neu“.
• Nennen Sie Ihr Tag „GA4-Kauf“.
• Klicken Sie im Feld „Tag-Konfiguration“ auf das Bearbeitungssymbol in der oberen rechten Ecke
• Wählen Sie „Google Analytics: GA4-Ereignis“ aus.
• Wählen Sie im Feld „Configuration Tag“ Ihr Tag „GA4 Config“ aus.
• Geben Sie im Feld „Name der Veranstaltung“ „Kauf“ ein.
• Erweitern Sie das Dropdown-Menü „Ereignisparameter“ und klicken Sie auf „Zeile hinzufügen“.

Ereignisparameter sind Informationen über die Bestellung, die wir an GA4 weitergeben möchten, wenn das Tag ausgelöst wird. Stellen Sie sich Event-Parameter als die einzelnen Elemente einer Kundenbestellung vor (z. B. Bestellwert, Versandkosten etc.). Jedes dieser Elemente muss als Ereignisparameter zum Kaufereignis-Tag hinzugefügt werden.

Um diese einzurichten, klicken Sie auf die Schaltfläche „Zeile hinzufügen“. Jede Zeile hat zwei Felder

• Parametername – Der offizielle Name des von GA4 definierten Parameters. Wenn ein Kaufereignis mit einem der von GA4 definierten Kaufparameter ausgelöst wird, erkennt GA4 dies. Beispielsweise sind „transaction_id“, „tax“ und „shipping“ beide anerkannte Kaufparameter. Eine vollständige Liste der verfügbaren Kaufereignisparameter kann hier eingesehen werden.

• Wert – Der tatsächliche Wert des Parameters. Dies ist ein dynamischer Wert, der auf der Kundenbestellung basiert. Unter Verwendung der obigen Beispielparameter könnten dies sein:

Transaktions-ID: #245

Steuer: 2,56

Versand: 3,99

Die Ereignisparameterwerte sind dynamische Informationsbits aus Ihrer Datenschicht. Erinnern Sie sich an die Datenschichtvariablen, die wir zuvor erstellt haben? Es sind diese Variablen, die verwendet werden, um die Ereignisparameterwerte zu füllen.

Klicken Sie auf das Symbol rechts neben dem Feld „Wert“. Dadurch wird ein Bildschirm geladen, in dem Sie eine Variable auswählen können. Suchen und wählen Sie die richtige Variable für diesen Parameter aus (es wird eine der Variablen sein, die Sie zuvor erstellt haben und die mit „dlv“ beginnt).

Tun Sie dies für die folgenden Parameter:

Wenn Sie fertig sind, sollte Ihr Bildschirm so aussehen:

Debuggen

Schließlich müssen wir testen, ob unser Tag-Setup funktioniert. Um dies zu tun:

• Gehen Sie zu GTM und klicken Sie auf die Schaltfläche „Vorschau“ in der oberen rechten Ecke
• Befolgen Sie die Schritte, um den GTM-Vorschaumodus in Ihrem Shop zu aktivieren
• Sobald Sie fertig sind, gelangen Sie zum Frontend Ihres Shops mit einem Tag-Assistenten-Fenster in der Ecke

Auf der vorherigen Registerkarte (mit dem Titel „Tag Assistant [Verbunden]“) werden nun die Tags angezeigt, die beim Durchsuchen Ihrer Website auf der Registerkarte „Vorschau“ ausgelöst werden.

• Öffnen Sie Ihr GA4-Konto und gehen Sie im linken Menü zu „Konfigurieren > DebugView“.
• Gehen Sie zurück zu der Registerkarte, die eine Vorschau Ihres Shop-Frontends anzeigt, und führen Sie eine Testtransaktion durch
• Gehen Sie schließlich auf die Registerkarte GA4 DebugView. Wenn das GA4-Kauf-Tag erfolgreich ausgelöst wurde, sehen Sie ein grünes Kaufereignis in der Zeitachse. Klicken Sie auf dieses Ereignis und das Fenster auf der rechten Seite wird mit Informationen über die Bestellung gefüllt.

GTM-Änderungen veröffentlichen

Sobald Sie zufrieden sind, dass Transaktionen in Ihrem GA4-E-Commerce-Tracking erfasst werden, können Sie fortfahren und Ihre GTM-Änderungen veröffentlichen. Nach der Veröffentlichung empfehlen wir, sowohl Ihr GA4-Konto als auch Ihr UA-Konto genau zu beobachten, um sicherzustellen, dass Bestellungen wie erwartet aufgezeichnet werden.