Wie richte ich GA4 E-Commerce-Tracking auf Shopify ein? Schritt für Schritt Anleitung

Veröffentlicht: 2022-09-13
  • Wie installiere ich Google Tag Manager (GTM) auf Shopify?
    • Phase Eins: GTM-Container-Code und Kundendetails-Skript zur theme.liquid unter <head> hinzufügen.
    • Phase Zwei: Fügen Sie der Checkout-Seite den GTM-Containercode und das Skript für Kundendetails hinzu.
  • Datenschichtvariable auf dem GTM erstellen
  • GA4-Page-View-Tag auf GTM erstellen
  • Verfolgen Sie view_item und Purchase als Ereignis und übergeben Sie benutzerspezifische und produktbezogene Details an GA4
    • Phase Eins: View_item Data Layer auf Shopify hinzufügen.
    • Phase Zwei: GTM-Auslöser für das Ereignis „view_item“ und „Kauf“ erstellen.
    • Phase Drei: GTM-Tag erstellen.
  • GTM-Rezept herunterladen

Wie installiere ich Google Tag Manager (GTM) auf Shopify?

Phase Eins: GTM-Container-Code und Kundendetails-Skript zur theme.liquid unter <head> hinzufügen.

  1. Melden Sie sich bei Ihrem Gmail-Konto an.
  2. Gehen Sie zum Google Tag Manager.
  3. Wählen Sie das richtige GTM-Konto aus.
  4. Klicken Sie auf die GTM- Container-ID .
  5. Kopieren Sie das erste Skript des GTM-Containercodes , das Anweisungen zum Einfügen des Codes in den Abschnitt <head> enthält.
  6. Melden Sie sich bei Ihrem Shopify-Shop an und klicken Sie auf Designs unter Online-Shop auf der linken Seite des Navigationsbereichs.
  7. Klicken Sie im Dropdown- Menü Aktionen auf Code bearbeiten .
  8. Klicken Sie unter Layout auf theme.liquid .
  9. Fügen Sie den kopierten GTM-Containercode (in Schritt 5) so hoch wie möglich im <head> der Seite ein.
  10. Kopieren Sie das unten erwähnte Skript für Kundendetails und fügen Sie es in den Abschnitt <head> über dem GTM-Containercode ein .
  11. Klicken Sie in der theme.liquid in der rechten oberen Ecke auf Speichern.

Schritt 1: Melden Sie sich bei Ihrem Gmail-Konto an.

Schritt 2: Gehen Sie zum Google Tag Manager, indem Sie diesem Link folgen: https://tagmanager.google.com/

Schritt 3: Wählen Sie das richtige GTM-Konto aus

Select the correct GTM account

Schritt 4: Klicken Sie auf die GTM-Container-ID

GTM - click on the container id

Schritt 5: Kopieren Sie das erste Skript des GTM-Containercodes, das Anweisungen zum Einfügen des Codes in den Abschnitt <head> enthält .

copy the GTM container code

Schritt 6: Melden Sie sich jetzt bei Ihrem Shopify-Shop an und klicken Sie im linken Navigationsbereich unter Online-Shop auf Designs .

select themes under online store

Schritt 7: Klicken Sie im Dropdown- Menü Aktionen auf Code bearbeiten .

Click on Edit code under Actions drop down

Schritt 8: Klicken Sie unter Layout auf theme.liquid .

Click on theme.liquid

Schritt 9: Fügen Sie den kopierten GTM-Containercode (in Schritt 5) so hoch wie möglich im <head> der Seite ein.

Schritt 10: Kopieren Sie das folgende Skript für Kundendetails. Fügen Sie es nun in den Abschnitt <head> über dem GTM-Containercode ein, wie im folgenden Bild gezeigt. Dieses Skript hilft dabei, die USER-bezogenen Daten an den GA4 zu übergeben.

Kopieren

 <Skript>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
{% wenn Kunde %}
userType: "Mitglied",
Kunde: {
id: {{ kunden.id }},
lastOrder: "{{ customer.orders.first.created_at | date: '%B %d, %Y %I:%M%p' }}",
orderCount: {{ customer.orders.size }},
totalSpent: {% wenn Kunde %}{% weist total_spent = 0 zu %}{% für Artikel in Kundenbestellungen %}{% weist total_spent = total_spent zu | plus: item.total_net_amount %}{% endfor %}{{ total_spent | Geld_ohne_Währung | entfernen:"," }}{% else %}""{% endif %},
tags: {{- kunden.tags | json -}}
},
{% anders %}
userType: "Besucher",
Kunde: {
Ich würde: "",
letzte Bestellung: "",
orderCount: "",
Gesamtausgaben: "",
Stichworte: ""
},
{% endif %}
});
</script>

User data script above the GTM code

Schritt 11: Klicken Sie in der theme.liquid in der oberen rechten Ecke auf Speichern.

Click save on theme.liquid

Gut erledigt !!

Sie haben die erste Phase des Hinzufügens von GTM-Containercode zu Shopify abgeschlossen. Als Nächstes müssen Sie den GTM-Containercode , das Skript für Kundendetails und den Kauf von Data Layer auf der Checkout-Seite hinzufügen.

Phase Zwei: Fügen Sie den GTM-Containercode und das Skript für Kundendetails hinzu und kaufen Sie Data Layer auf der Checkout-Seite.

  1. Klicken Sie im Shopify-Shop-Adminbereich auf die Einstellungen in der linken unteren Ecke.
  2. Klicken Sie auf Kasse und Konten
  3. Scrollen Sie nach unten und suchen Sie nach den zusätzlichen Skripts unter der Bestellung im Statusblock.
  4. Fügen Sie zuerst den GTM-Containercode ein. Kopieren Sie nun das folgende Skript für Kundendetails und fügen Sie es über dem GTM-Containercode ein.
  5. Kopieren Sie die folgende Kaufdatenschicht und fügen Sie sie zwischen dem Kundendetailsskript und dem GTM-Containercode ein.

Schritt 1: Klicken Sie im Shopify-Shop-Adminbereich auf die Einstellungen in der linken unteren Ecke.

On Shopify admin click on Settings towards the laft hand side bottom corner

Schritt 2: Klicken Sie auf Kasse und Konten.

Click on Checkout and accounts

Schritt 3: Scrollen Sie nach unten und suchen Sie nach den zusätzlichen Skripten unter der Bestellung im Statusblock.

Scroll Down and below Order Status block look for the Additional Scripts

Schritt 4: Fügen Sie zuerst den GTM-Containercode ein. Kopieren Sie nun das folgende Skript für Kundendetails und fügen Sie es über dem GTM-Containercode ein.

Paste the GTM container code first and above the GTM container code paste the customer details script

Schritt 5: Kopieren Sie die folgende Kaufdatenschicht und fügen Sie sie zwischen dem Kundendetailsskript und dem GTM-Containercode ein.

Kopieren

 <script>{% if first_time_accessed %}
window.dataLayer.push({
'page_type': 'Kauf',
'event': 'purchase', /* erstelle ein benutzerdefiniertes Event in GTM */
'transaction_id': '{{ bestellname || order.order_number }}',
'Gesamtwert': {{ Gesamtpreis | Geld_ohne_Währung | remove:',' }}, // Enthält Steuern und Versand
'Zwischensummenwert': {{ Zwischensummenpreis | Geld_ohne_Währung | Löschen:',' }},
'Steuer': {{ Steuerpreis | Geld_ohne_Währung | Löschen:',' }},
'Versand': {{ Versandpreis | Geld_ohne_Währung | Löschen:',' }},
'Währung': '{{ shop.währung }}',
'payment_type': '{{ order.transactions[0].gateway }}', //optionaler Parameter
'E-Commerce': {
'checkout_currency': '{{ checkout.currency }}', 
'Wert': '{{ checkout.total_price | Geld_ohne_Währung | remove:',' }}', // Bestellsumme (Preis aller Produkte + Versand)
'Steuer': '{{ checkout.tax_price | Geld_ohne_Währung | entfernen:',' }}', // Steuer
'Versand':'{{ checkout.shipping_price | Geld_ohne_Währung | remove:',' }}', // Versandkosten
'transaction_id': '{{transactions[0].id }}', // Transaktions-ID
'Artikel': [
{% für line_item in line_items %}
{
'Artikelname': '{{ line_item.product.title | ersetzen: "'","##@@[email protected]@##" }}'.replace("##@@[email protected]@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
'Preis': {{ line_item.final_price | Geld_ohne_Währung | Löschen:',' }},
'item_brand': '{{ line_item.vendor }}',
'Menge': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor %}
]
}
});
{% endif %}
</script>

Schritt 6: Klicken Sie rechts unten auf Speichern.

Herzliche Glückwünsche! Sie haben den GTM-Containercode erfolgreich auf Shopify hinzugefügt. Jetzt werden wir fortfahren und Data Layer-Variablen auf dem GTM erstellen, bevor wir das GA4 Page View Tag erstellen. Wenn das Seitenaufruf-Tag geladen wird, ermöglichen uns diese Variablen, benutzerbezogene Daten zu sammeln und an GA4 weiterzuleiten.

Erstellen Sie Datenschichtvariablen auf dem GTM

  1. Klicken Sie im linken Navigationsbereich von GTM auf Variablen .
  2. Klicken Sie unter Benutzerdefinierte Variablen auf Neu .
  3. Klicken Sie irgendwo auf Variablenkonfiguration .
  4. Wählen Sie Datenschichtvariable unter Seitenvariablen aus.
  5. Datenschicht-Variablennamen zuweisen .
  6. Benennen Sie die Variable um und klicken Sie auf Speichern.

Schritt 1: Klicken Sie im linken Navigationsbereich von GTM auf Variablen .

Click on Variables on the left hand navigation panel

Schritt 2: Klicken Sie unter Benutzerdefinierte Variablen auf Neu.

Click New under User Defined Variables

Schritt 3: Klicken Sie irgendwo auf Variablenkonfiguration.

Click anywhere on Variable configuration

Schritt 4: Wählen Sie Datenschichtvariable unter Seitenvariablen aus.

Select Data Layer variable under page variables

Schritt 5: Datenschicht-Variablennamen zuweisen .

Data Layer Variable Name

Schritt 6: Benennen Sie die Variable um und klicken Sie auf Speichern .

Rename the variable and click save

Erstellen Sie nach den oben genannten Schritten die unten genannten Data Layer-Variablen.

Datalayer-Variablenname: Benennen Sie die Variable um
Benutzeridentifikation „dlv – Kunde – ID – Variable“
Kunde.letzteBestellung „dlv – Kunde – letzte Bestellung – Variable“
Kunde.Auftragszahl „dlv – Kunde – Auftragszahl – Variable“
kunden.tags „dlv – Kunde – Tags – Variable“
Kunde.Gesamtausgaben „dlv – Kunde – Gesamtausgaben – Variable“
Kunde.Benutzertyp „dlv – Kunde – Benutzertyp – Variable“
Veranstaltung „dlv – Ereignis – Variable“

GA4-Page-View-Tag auf GTM erstellen

  1. Gehen Sie zu Google Analytics und wählen Sie GA4-Property aus. https://analytics.google.com/
  2. Klicken Sie auf das Zahnradsymbol unten links.
  3. Klicken Sie unter Eigenschaftsebene auf den Datenstrom.
  4. Wählen Sie den Webstream aus und klicken Sie auf den Pfeil (>).
  5. Kopieren Sie die GA4-Messungs-ID.
  6. Gehen Sie zum Google Tag Manager. https://tagmanager.google.com/
  7. Klicken Sie auf Neues Tag hinzufügen.
  8. Klicken Sie auf eine beliebige Stelle in der Tag-Konfiguration.
  9. Wählen Sie Google Analytics: GA4-Konfiguration aus.
  10. Fügen Sie die zuvor kopierte GA4-Messungs-ID unter dem Feld „Messungs-ID“ ein.
  11. Klicken Sie unter Festzulegende Felder auf die Zeile „Hinzufügen“ und fügen Sie dann den Feldnamen und seinen Wert hinzu.
  12. Fügen Sie unter Benutzereigenschaften Folgendes als Eigenschaftsname und -wert hinzu.
  13. Klicken Sie irgendwo auf das Triggering.
  14. Wählen Sie Alle Seiten als Trigger aus.
  15. Benennen Sie das Tag um und klicken Sie auf Speichern.

Schritt 1: Gehen Sie zu Google Analytics und wählen Sie GA4-Property aus. https://analytics.google.com/

Schritt 2: Klicken Sie unten links auf das Zahnradsymbol.

Click on the Gear Icon bottom left hand

Schritt 3: Klicken Sie unter der Eigenschaftsebene auf die Datenströme.

Click on the Data Stream under property level

Schritt 4: Wählen Sie den Webstream aus und klicken Sie auf den Pfeil (>)

Select the Web Stream and click click the arrow (>)

Schritt 5: Kopieren Sie die GA4-Messungs-ID.

Copy the GA4 Measurement ID

Schritt 6: Gehen Sie zum Google Tag Manager. https://tagmanager.google.com/

Schritt 7: Klicken Sie auf Neues Tag hinzufügen.

Click On Add a new tag

Schritt 8: Klicken Sie irgendwo auf die Tag-Konfiguration.

Click anywhere on the tag configuration

Schritt 9: Wählen Sie Google Analytics: GA4-Konfiguration.

Select Google Analytics: GA4 Configuration

Schritt 10: Fügen Sie die zuvor kopierte GA4-Messungs-ID unter dem Feld „Messungs-ID“ ein.

Paste the previously copied GA4 Measurement ID under the "Measurement ID" Box.

Schritt 11: Klicken Sie unter Festzulegende Felder auf die Zeile „Hinzufügen“ und fügen Sie dann den Feldnamen und seinen Wert wie unten beschrieben hinzu:

Feldname : user_id

Wert: {{dlv – Kunde – ID – Variable}}

5 Fügen Sie die Benutzer-ID unter Festzulegende Felder hinzu

Schritt 12: Fügen Sie unter Benutzereigenschaften Eigenschaftsname und -wert wie unten beschrieben hinzu.

Name des Anwesens Wert
Kundennummer {{dlv – Kunde – ID – Variable}}
letzte Bestellung {{dlv – Kunde – letzte Bestellung – Variable}}
Bestell_Anzahl {{dlv – Kunde – Bestellanzahl – Variabel}}
Gesamtausgaben {{dlv – Kunde – Gesamtausgaben – Variable}}
Benutzertyp {{dlv – Kunde – Benutzertyp – Variable}}

User Properties Assign Property Name and value

Schritt 13: Klicken Sie irgendwo auf Triggering.

Trigger-Konfiguration – Klicken Sie auf eine beliebige Stelle

Schritt 14: Wählen Sie Alle Seiten als Trigger aus.

Select All Pages as a Trigger Type

Schritt 15: Benennen Sie das Tag um.

Rename as GA4 - Page View - Tag as and Click Save

Brillant!

Sie haben jetzt das GA4 Page View Tag erstellt.

Sehen wir uns nun an, wie das Ereignis view_item nachverfolgt wird, wenn jemand die Produktseite anzeigt, und wie die erforderlichen Details an GA4 übergeben werden.

Verfolgen und übergeben Sie view_item und Kaufereignisdaten an GA4.

view_item Data Layer auf Shopify hinzufügen.

  1. Melden Sie sich bei Ihrem Shopify-Shop an und klicken Sie im linken Navigationsbereich unter Online-Shop auf Designs.
  2. Klicken Sie im Dropdown-Menü Aktionen auf Code bearbeiten.
  3. Klicken Sie unter Abschnitte auf main-product.liquid.
  4. Kopieren Sie das unten erwähnte Data Layer-Skript und fügen Sie es ein.
  5. Klicken Sie auf „main-product.liquid“ in der rechten oberen Ecke auf „Speichern“.

Schritt 1: Melden Sie sich bei Ihrem Shopify-Shop an und klicken Sie im linken Navigationsbereich unter Online-Shop auf Designs.

select themes under online store

Abschnitt 2: Klicken Sie im Dropdown-Menü Aktionen auf Code bearbeiten.

Click on Edit code under Actions drop down

Abschnitt 3: Klicken Sie unter Abschnitte auf main-product.liquid.

Click on the main-product.liquid under Sections.

Schritt 4: Kopieren Sie das unten erwähnte Data Layer-Skript und fügen Sie es ein.

Kopieren

 <Skript>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
Ereignis: 'view_item',
E-Commerce: {
Artikel: [{
Artikelname: '{{ Produkt.Titel | ersetzen: "'","##@@[email protected]@##" }}'.replace("##@@[email protected]@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
preis: "{{ produkt.preis | geld_ohne_währung | entfernen:',' }}",
item_brand: "{{ product.vendor | entfernen: "'" | entfernen: '"' }}",
{% zur Sammlung in product.collections %}
item_category{% es sei denn forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor %}
item_variant: "{{ product.s selected_or_first_available_variant.title | entfernen: "'" | entfernen: '"' }}",
Menge: 1'
}]
}
});
</script>

Copy and Paste the below mentioned Data Layer script on the main-product.liquid under Sections

Schritt 5: Klicken Sie in der main-product.liquid in der oberen rechten Ecke auf Speichern.

Click save on the main-product.liquid under Sections

GTM-Trigger für das Ereignis „view_item“ und „purchase“ erstellen.

  1. Gehen Sie zum Google Tag Manager.
  2. Klicken Sie im linken Navigationsbereich auf Trigger.
  3. Klicken Sie auf Neu.
  4. Klicken Sie irgendwo auf Triggerkonfiguration.
  5. Wählen Sie Benutzerdefiniertes Ereignis unter Andere aus.
  6. Ereignisnamen view_item zuweisen.
  7. Benennen Sie den Trigger in CE – EEC – view_item – Trigger um und klicken Sie auf Speichern.

HINWEIS:

  1. Veranstaltungsname als Kauf zuweisen
  2. Benennen Sie den Trigger in CE – EEC – Purchase – Trigger um und klicken Sie auf Save.

Schritt 1: Gehen Sie zum Google Tag Manager.

Schritt 2: Klicken Sie im linken Navigationsbereich auf Trigger.

Click on Trigger on the left hand navigation panel

Schritt 3: Klicken Sie auf Neu.

Click New

Schritt 4: Klicken Sie irgendwo auf Triggerkonfiguration.

Click anywhere on Trigger configuration

Schritt 5: Wählen Sie Benutzerdefiniertes Ereignis unter Andere.

Select Custom Event under Other

Schritt 6: Ereignisnamen view_item zuweisen.

Assign Event Name as view_item

Schritt 7: Benennen Sie den Trigger in CE – EEC – view_item – Trigger um und klicken Sie auf Speichern.

Rename the Trigger - view_item

Mit diesen Schritten haben Sie den Ereignisauslöser view_item erstellt. Jetzt müssen Sie einen Kaufereignisauslöser machen. Um ein Kaufereignis auszulösen, folgen Sie den ersten 5 Schritten oben.

Schritt 8: Veranstaltungsname als Kauf zuweisen

custom event name purchase

Schritt 9: Benennen Sie den Trigger um in CE – EEC – Purchase – Trigger und klicken Sie auf Save.

Rename the Trigger - purchase

Wenn Sie alle Schritte befolgt haben, haben Sie fast alles getan, um view_item zu sammeln und ereignisbezogene Daten aus Ihrem Shopify-Shop mit den benutzerbezogenen Daten zu kaufen. Sehen wir uns nun an, wie diese Details mithilfe von Google Tag Manager an GA4 übergeben werden.

GTM-Tag für das Ereignis „view_item“ und „Purchase“ erstellen.

  1. Klicken Sie im linken Navigationsbereich auf Tag.
  2. Klicken Sie auf Neu.
  3. Klicken Sie irgendwo auf Tag-Konfiguration.
  4. Wählen Sie unter Featured Tag „Google Analytics: GA4 Event“ aus.
  5. Wählen Sie im Konfigurations-Tag „GA4 – Seitenansicht – Tag“ aus der Dropdown-Liste aus.
  6. Ereignisnamen zuweisen. Wählen Sie die zuvor erstellte dataLayer-Variable aus – {{dlv – event – ​​variable}}
  7. Klicken Sie auf Weitere Einstellungen und wählen Sie E-Commerce- Daten senden unter E-Commerce. Wählen Sie Data Layer als Ihre Datenquelle aus.
  8. Klicken Sie irgendwo auf Triggering.
  9. Wählen Sie für das Ereignis view_item den zuvor erstellten Trigger „CE – EEC – view_item – Trigger“ aus.
  10. Bewegen Sie den Mauszeiger in die rechte obere Ecke des Trigger-Bereichs und klicken Sie auf das Stiftsymbol.
  11. Klicken Sie jetzt auf das Plus-Symbol.
  12. Wählen Sie den Kaufereignisauslöser mit dem Namen „CE – Kauf – Auslöser“.
  13. Benennen Sie das Tag um: „GA4 – EEC event – ​​Tag“ und klicken Sie auf Save.

Schritt 1: Klicken Sie im linken Navigationsbereich auf Tag.

Click on tag on the left hand navigation panel

Schritt 2: Klicken Sie auf Neu.

Click New

Schritt 3: Klicken Sie irgendwo auf Tag-Konfiguration.

Tag Configuration - Click Anywhere

Schritt 4: Wählen Sie „Google Analytics: GA4 Event“ unter dem Featured Tag aus.

Select Google Analytics GA4 Event under Featured Tag

Schritt 5: Wählen Sie im Konfigurations-Tag „GA4 – Seitenansicht – Tag“ aus der Dropdown-Liste aus.

Select Configuration Tag form the drop down

Schritt 6: Ereignisnamen zuweisen. Wählen Sie die zuvor erstellte Data Layer-Variable aus – {{dlv – event – ​​variable}}

Event Name Select the previously made Data Layer variable

Schritt 7: Klicken Sie auf Weitere Einstellungen und wählen Sie E-Commerce- Daten senden unter E-Commerce. Wählen Sie Data Layer als Ihre Datenquelle aus.

More Settings Send eCommerce Data select Data Layer as datasource

Schritt 8: Klicken Sie irgendwo auf Triggering.

Trigger Configuration - Click Anywhere

Schritt 9: Wählen Sie den zuvor erstellten Trigger „CE – EEC – view_item – Trigger“ für das Ereignis view_item aus.

select view item trigger

Schritt 10: Bewegen Sie den Mauszeiger in die rechte obere Ecke des Trigger-Bereichs und klicken Sie auf das Stiftsymbol.

Hover over the trigger towards the right hand side top corner and click on pencil icon

Schritt 11: Klicken Sie jetzt auf das Plus-Symbol.

Click on this plus icon

Schritt 12: Wählen Sie den Kaufereignisauslöser mit dem Namen „CE – Kauf – Auslöser“.

Select purchase event trigger

Schritt 13: Benennen Sie das Tag um: „GA4 – EEC event – ​​Tag“ und klicken Sie auf „Save“.

Rename the tag and click save

Herzliche Glückwünsche

Mit diesem Leitfaden können Sie jetzt Produkt- und Kaufereignisdaten auf GA4 nachverfolgen. Sie können die Berichte auch auf GA4 anzeigen, indem Sie diesen Schritten folgen.

Schritt eins: Gehen Sie zur GA4-Eigenschaft.
Schritt zwei: Klicken Sie im linken Navigationsbereich auf Berichte.
Schritt drei: Klicken Sie auf Monetarisierung und dann auf E-Commerce-Käufe.

Wenn Sie den fertigen GTM-Container für diesen Leitfaden erhalten möchten, empfehle ich Ihnen dringend, das GTM-Rezept herunterzuladen.

GTM-Rezept herunterladen

Fazit

Mit dieser Schritt-für-Schritt-Anleitung habe ich alle Register gezogen, um das brennende Problem aller Shopify-Ladenbesitzer anzugehen und zu lösen. E-Commerce-Tracking kann viele Nuancen haben und es ist schwierig, es mit einem einzigen Blog-Beitrag zu behandeln. Wenn Sie Fragen haben, können Sie sich gerne mit mir auf LinkedIn verbinden und dort Ihre Fragen stellen.