Um die KundenInnen Ihres Online-Stores zu verstehen, spielt Shopify Analytics eine zentrale Rolle, die unter die Bereiche der Webanalyse und Digital Analytics fällt. Mit dem Google Tag Manager und benutzerdefiniertem Theme-Code können Unternehmen nicht nur die Interaktionen der NutzerInnen auf ihrer Website nachverfolgen. Dadurch können sie auch gezielte Marketing-Maßnahmen optimieren und die Conversion-Rate durch datengestützte Erkenntnisse verbessern.
Einführung: Warum Advanced Tracking wichtig ist!
Kennen Sie das? Sie starten eine Werbekampagne auf Facebook, die BesucherInnen auf Ihren Shopify-Shop lenken soll. Durch eine Mischung aus Facebook-Anzeigen, E-Mail-Marketing und einer zufälligen Erwähnung durch InfluencerInnen können Sie die Herkunft der BesucherInnen jedoch nicht eindeutig zuweisen. Präzise Daten-Analyse kann dieses Rätsel für Sie lösen!
Google Tag Manager (GTM) und Google Analytics 4 (GA4) ermöglichen Ihnen die Verfolgung und Messung der folgenden Aktivitäten:
- Welche Produkte die meiste Aufmerksamkeit der NutzerInnen auf sich ziehen.
- Welche Marketingkanäle am besten konvertieren.
- Die Bewegungen der KundenInnen an der Kasse und die Stellen, an denen sie den Checkout-Prozess verlassen.
Anhand dieser Daten können Sie bessere Entscheidungen treffen, Ihre Marketingstrategie verfeinern und letztendlich den Umsatz steigern. Fortgeschrittenes Tracking ist der Schlüssel, um von Vermutungen zu verwertbaren Erkenntnissen zu gelangen.
Wir besprechen in diesem Leitfaden alles für Sie Wichtige – angefangen bei der Erstellung eines GTM-Kontos über die Fehlerbehebung Ihres Codes, bis hin zur Anwendung moderner Tracking-Techniken. Sie erfahren ebenfalls, wie Sie Shopify-Theme-Dateien mit individuellem Code anpassen können. So haben Sie die volle Kontrolle über Ihre Analysen.
Shopify Theme-Grundlagen
Allgemeine Shopify-Theme-Dateien
Shopify-Themes werden mit Liquid, der Templating-Sprache von Shopify, erstellt. Zu den wichtigsten Dateien, mit denen Sie arbeiten werden, gehören:
theme.liquid
: Dies ist die Hauptlayoutdatei. Sie umschließt die Tags<head>
und<body>
. Jeder Inhalt hier wird auf jeder Seite Ihres Shops erscheinen.product.liquid
,product-template.liquid
, orproduct.liquid
+ sections/snippets: Diese Dateien steuern das Layout der einzelnen Produktseite.collection.liquid
: Gibt eine Übersicht über die Produkte einer bestimmten Kollektion.cart.liquid
: Zeigt den Inhalt des Warenkorbs der KundenInnen an.- Sektionen und Snippets: Wiederverwendbare Code-Blöcke, die in verschiedenen Templates eingebunden werden können.
checkout.liquid
(Nur Shopify Plus): Ermöglicht eine tiefere Anpassung des Checkout-Prozesses.
Liquid-Syntax und Variablen verstehen
Shopifys Liquid verwendet spezielle Tags und Syntax, um dynamische Inhalte anzuzeigen. Hier ist eine kurze Übersicht:
{{...}}
: Das Ausgabetag, das verwendet wird, um Inhalte oder Variablen anzuzeigen.
Zum Beispiel:{{product.title}}
gibt den Namen des Produkts aus.{% ... %}
: Logik-Tags oder Steueranweisungen, wie Schleifen oder Bedingungen.
Zum Beispiel:{% for item in cart.items %}
{{item.title}}
{% endfor %}
Diese Schleife durchläuft jedes Element im Warenkorb(cart.items)
und zeigt den Titel jedes Produkts an.
Häufig verwendete Variablen sind:
shop.currency
: Die Standardwährung des Shops, z. B. „USD“ oder „EUR“.cart.items
: Eine Liste der im Warenkorb hinzugefügten Artikel. Jedes Element hat Untereigenschaften wie item.product_id, item.title, item.quantity usw.product.id oder product.title
: Variablen, die die eindeutige ID oder den Namen eines Produkts repräsentieren.item.price
: Der Preis eines einzelnen Produkts oder Positionselements.
Diese Variablen und Schleifen sind entscheidend, um dynamische Daten zu generieren. Diese Daten können anschließend in den dataLayer
von Google Tag Manager überführt werden, um das Tracking zu ermöglichen.
Überblick über den Google Tag Manager
Der Google Tag Manager (GTM) ist ein zentrales Dashboard, mit dem alle Ihre Marketing- und Analyse-Skripte oder „Tags“ verwaltet werden. Anstatt mehrere Tracking-Codes in Ihr Shopify-Theme einzufügen, müssen Sie nur einen einzigen GTM-Container-Schnipsel hinzufügen. Über die benutzerfreundliche Oberfläche des GTM können Sie alles Weitere steuern – wie Google Analytics, Facebook Pixel und Remarketing-Tags.
Hauptvorteile von GTM:
- Zentralisierte Verwaltung: Fügen Sie Skripte einfach hinzu oder entfernen Sie sie, ohne wiederholt Ihre Theme-Dateien bearbeiten zu müssen.
- Vereinfachte Codebasis: Halten Sie Ihr Theme sauber und verringern Sie die Wahrscheinlichkeit von Konflikten.
- Kein Entwickler erforderlich: MarketerInnen können Tags oder Trigger hinzufügen, ohne auf EntwicklerInnen angewiesen zu sein.
- Erweiterte Funktionen: Nutzen Sie leistungsstarke Tools wie die Datenebene, benutzerdefinierte Trigger, Versionshistorie, Vorschau-Modus und mehr.
Grundlagen: Wichtige Informationen vor dem Start
- Zugang zum Shopify-Shop
Stellen Sie sicher, dass Sie die erforderlichen Berechtigungen haben, um den Code des Themes zu bearbeiten, insbesondere die Dateitheme.liquid
.
Sie sind nicht der Shop-InhaberIn? Fordern Sie die notwendigen Zugriffsrechte an. - Google Tag Manager Konto
Falls noch nicht geschehen – erstellen Sie ein Google Tag Manager-Konto unter tagmanager.google.com. Es ist kostenlos, und die Einrichtung dauert nur wenige Minuten. - Google Analytics 4 Property
Sie müssen ein Google Analytics 4 (GA4) Property einrichten. Dies ist der aktuelle Standard und wird für eine präzise Datenerfassung sehr empfohlen. - Grundlegendes Verständnis von Liquid und HTML
Sie müssen kein Experte sein. Aber ein grundlegendes Verständnis des Liquid-Templating-Systems von Shopify und HTML wird den Prozess erheblich erleichtern und beschleunigen.
Schritt 1: Erstellen und Konfigurieren Ihres GTM-Containers
- Melden Sie sich bei Google Tag Manager an oder erstellen Sie ein Konto
Besuchen Sie tagmanager.google.com und melden Sie sich mit Ihrem Google-Konto an.
Falls Sie noch kein Konto haben: Klicken Sie auf „Sign Up“ und erstellen Sie ein Konto. - Erstellen Sie einen neuen Container
a. Klicken Sie auf „Create Account“.
b. Geben Sie Ihren Kontonamen ein (z. B. „Mein Shopify-Shop“).
c. Wählen Sie „Web“ als Container-Typ (dies ist wichtig für Shopify).
d. Klicken Sie auf „Create“ und lesen Sie die Allgemeinen Geschäftsbedingungen von Google, bevor Sie zustimmen.
- Holen Sie sich die GTM-Container-Code-Schnipsel
Nachdem Sie das Konto und den Container erstellt haben, erhalten Sie zwei Code-Schnipsel. Diese müssen in Ihrem Shopify-Theme eingebunden werden. Der erste Code-Schnipsel (für den<head>
-Bereich Ihres Themes) sieht ungefähr so aus:
Erster Code-Schnipsel (für den <head>-Bereich Ihres Themes):<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({
'gtm.start': new Date().getTime(), event:'gtm.js'
});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager -->
Zweiter Code-Schnipsel (für den <noscript>-Bereich, erforderlich für Browser mit deaktiviertem JavaScript):<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) →
- Bewahren Sie diese Snippets sicher auf
Kopieren Sie diese beiden Snippets. Sie werden sie später benötigen, um den GTM in Ihrem Shopify-Shop zu integrieren.
Schritt 2: Fügen Sie die GTM-Code-Snippets in Shopify ein
Ändern der theme.liquid-Datei
- Zugriff auf das Shopify-Admin-Panel
Melden Sie sich in Ihrem Shopify-Shop an und gehen Sie im Dashboard zu Online-Shop > Themes. - Wählen Sie das Theme aus, das Sie bearbeiten möchten
Suchen Sie das Theme, das Sie ändern möchten, und klicken Sie auf Aktionen > Code bearbeiten. - Finden Sie die theme.liquid-Datei
Öffnen Sie im Ordner Layout die Dateitheme.liquid
. Hier werden Sie die GTM-Code-Snippets hinzufügen. - Fügen Sie das erste Snippet (für das
<head>
-Tag) ein
Suchen Sie das öffnende<head>
-Tag in dertheme.liquid
-Datei. Fügen Sie das erste GTM-Code-Snippet (das<script>
-Tag) direkt nach dem öffnenden<head>
-Tag ein. Es sollte ungefähr so aussehen:<!DOCTYPE html>
<html lang="en">
<head>
<!-- Shopify automatically generates meta tags, so you’ll see them here. -->
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({
'gtm.start': new Date().getTime(), event:'gtm.js'
});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager --> - Fügen Sie das zweite Snippet (für das
<body>
-Tag) ein
Suchen Sie das öffnende<body>
-Tag und fügen Sie das zweite GTM-Code-Snippet (das<noscript>
-Tag) direkt danach ein. Der Code sollte dann so aussehen:</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- End Google Tag Manager (noscript) -->
<!-- The rest of your theme.liquid content here -->
</body>
</html> - Speichern Sie Ihre Änderungen
Sobald beide Code-Snippets eingefügt sind, klicken Sie auf Speichern, um Ihr Theme zu aktualisieren.
Überprüfung Ihrer Data Layer-Einrichtung
Zu diesem Zeitpunkt könnte Ihr dataLayer
entweder leer sein oder nur das GTM-Startereignis anzeigen – das ist völlig normal. In den nächsten Schritten fügen wir benutzerdefinierte Code-Snippets hinzu, um eCommerce-Ereignisse wie add_to_cart
, purchase
und andere Interaktionen der Nutzer mit Ihrem Shop in den dataLayer
zu übermitteln.
Schritt 3: Überprüfung Ihrer GTM-Implementierung
Nachdem Sie die GTM-Code-Snippets in Ihr Shopify-Theme eingefügt haben, ist es wichtig, sicherzustellen, dass alles wie erwartet funktioniert. Befolgen Sie diese Schritte, um die erfolgreiche Implementierung von Google Tag Manager zu überprüfen.
- Veröffentlichen Sie Ihr Theme
Wenn Sie die GTM-Snippets in einem Entwicklungsthema hinzugefügt haben, müssen Sie entweder:- Das Theme veröffentlichen: Machen Sie das Theme live, indem Sie im Shopify-Admin-Bereich auf Aktionen > Veröffentlichen klicken.
- Die Vorschau-Funktion nutzen: Alternativ können Sie die Vorschau-Funktion nutzen, um die Implementierung zu testen, bevor Sie das Theme live schalten.
- Verwenden Sie den GTM-Vorschau-Modus
Um zu überprüfen, ob Ihre GTM-Tags korrekt ausgelöst werden, verwenden Sie den Vorschau-Modus in GTM:- Gehen Sie im GTM-Dashboard auf Vorschau (oben rechts).
- Geben Sie die URL Ihres Shops in das Pop-up-Fenster ein.
- Klicken Sie auf Starten.
Das Debug-Panel von GTM erscheint unten auf Ihrem Bildschirm und zeigt an, welche Tags auf jeder Seite ausgelöst werden. So können Sie sehen, ob Ihre Einrichtung korrekt funktioniert.
- Überprüfen Sie die Echtzeitberichte in Google Analytics
Wenn Sie Google Analytics (GA) bereits über GTM eingerichtet haben, können Sie die Funktionalität anhand der Echtzeitberichte in GA überprüfen:- Gehen Sie zu Ihrem Google Analytics-Konto.
- Navigieren Sie im linken Menü zu Echtzeit.
- Während Sie Ihre Website durchstöbern, sollten Sie Ihre Aktivität in den Echtzeit-Daten sehen. Wenn keine Aktivität angezeigt wird, stellen Sie sicher, dass Ihr GA-Tag korrekt im GTM konfiguriert ist.
Die Standard-GA4 E-Commerce-Ereignisse
Google Analytics 4 (GA4) bietet standardisierte E-Commerce-Ereignisse, um das Verhalten der NutzerInnen von der Produktentdeckung bis zum Kauf zu verfolgen. Wichtige Ereignisse sind:
view_item_list
– NutzerInnen sehen eine Liste von Produkten (z. B. auf einer Kategorieseite).select_item
– NutzerInnen klicken auf ein Produkt aus einer Liste.view_item
– NutzerInnen landen auf einer Produktdetailseite.add_to_cart
– NutzerInnen fügen einen Artikel zum Warenkorb hinzu.remove_from_cart
– NutzerInnen entfernen einen Artikel aus dem Warenkorb.view_cart
– NutzerInnen sehen sich die Warenkorb-Seite an.begin_checkout
– NutzerInnen gehen zum ersten Schritt des Check-outs über.add_shipping_info
– NutzerInnen geben Versandinformationen an.add_payment_info
– NutzerInnen geben Zahlungsinformationen an.purchase
– NutzerInnen schließen eine Transaktion ab.add_to_wishlist
– NutzerInnen fügen einen Artikel der Wunschliste hinzu.
Nicht alle Shops verwenden jedes Ereignis (z. B. Wunschliste). Dennoch helfen diese Ereignisse dabei, die gesamte Kundenreise zu verfolgen und bieten wertvolle Einblicke in das Nutzerengagement sowie in Abbruchpunkte während des Kaufprozesses.
Wo Sie Ihren Data Layer-Code in Shopify platzieren sollten
1. product.liquid
– Produkt-Template-Dateien
Verwendung: Ideal, um view_item
-Ereignisse zu erfassen. Wenn NutzerInnen eine Produktseite laden, können Sie Produktdaten (ID, Name, Preis usw.) in den Data Layer pushen.
2. collection.liquid
– Kollektion-Template-Dateien
Verwendung: Erfasst view_item_list
, wann immer NutzerInnen eine Produktkollektion sehen. Verfolgt auch select_item
, wenn auf ein Produkt im Grid geklickt wird.
3. cart.liquid
Verwendung: Ideal für view_cart
-Ereignisse oder um in die Logik von remove_from_cart
einzugreifen, wenn NutzerInnen auf „Entfernen“ im Warenkorb klicken.
4. theme.liquid
– Globale Skripte
Verwendung: Auf Shopify Plus verwenden Sie checkout.liquid
, um Ereignisse wie begin_checkout
, add_shipping_info
, add_payment_info
und purchase
zu pushen.
Non-Plus: Fügen Sie Skripte auf der „Bestellstatus“-Seite über Einstellungen > Checkout > Bestellstatus-Seite > Zusätzliche Skripte hinzu, um das purchase-Ereignis zu erfassen.
Erstellen von Data Layer Pushes: Code-Beispiele
Hier zeigen wir Code-Snippets, die Ereignisdaten in den Data Layer pushen. Das Grundformat lautet:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'name_of_the_event',
ecommerce: {
// Additional data like items, transaction value, etc.
}
});
Tipp: Da Shopify Liquid verwendet, können Sie Produktinformationen oder Zeilenartikel-Daten dynamisch in diesem Skriptblock einfügen.
Code-Beispiel 1: view_item_list
Wo? In der Regel in collection.liquid
oder dort, wo mehrere Produkte aufgelistet sind.
{% for product in collection.products %}
<!-- Render product data... -->
{% endfor %}
<!-- dataLayer push for view_item_list -->
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'view_item_list',
ecommerce: {
items: [
{% for product in collection.products %}
{
item_id: '{{ product.id }}',
item_name: '{{ product.title | escape }}',
price: '{{ product.price | money_without_currency }}',
item_category: '{{ collection.title | escape }}'
}
{% if forloop.last == false %},{% endif %}
{% endfor %}
]
}
});
</script>
In diesem Snippet passiert Folgendes:
- Wir durchlaufen
collection.products
, um jedes Produkt aufzulisten. - Wir erstellen ein Array von Items mit den relevanten Feldern (ID, Name, Preis, Kategorie).
- Wir pushen das
view_item_list
-Ereignis direkt nach der Produktauflistung.
Code-Beispiel 2: select_item
Wo? Wird oft ausgelöst, wenn jemand auf einen Produktlink von der Produktliste-Seite klickt. Dies kann durch Hinzufügen eines onclick
-Events oder mit einem JavaScript-Event-Listener erfolgen.
<a href="{{ product.url }}"
onclick="
window.dataLayer.push({
event: 'select_item',
ecommerce: {
items: [{
item_id: '{{ product.id }}',
item_name: '{{ product.title | escape }}',
price: '{{ product.price | money_without_currency }}'
}]
}
});
">
{{ product.title }}
</a>
Code-Beispiel 3: view_item
Wo? Üblicherweise in product.liquid
.
<!-- product.liquid -->
<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
<p>Price: {{ product.price | money }}</p>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'view_item',
ecommerce: {
items: [{
item_id: '{{ product.id }}',
item_name: '{{ product.title | escape }}',
price: '{{ product.price | money_without_currency }}',
item_category: '{% if product.collections.size > 0 %}{{ product.collections.first.title }}{% endif %}'
}]
}
});
</script>
Code-Beispiel 4: add_to_cart
Wo? Normalerweise ausgelöst durch den „In den Warenkorb“-Button. Je nach Theme kann der Button in product.liquid
oder einem Snippet wie add-to-cart.liquid
sein.
<button class="add-to-cart-btn"
onclick="
window.dataLayer.push({
event: 'add_to_cart',
ecommerce: {
items: [{
item_id: '{{ product.id }}',
item_name: '{{ product.title | escape }}',
price: '{{ product.price | money_without_currency }}',
quantity: 1
}]
}
});
">
Add to Cart
</button>
Hinweis: Einige Themes verwenden AJAX, um Artikel in den Warenkorb hinzuzufügen. In diesem Fall müssen Sie den Data Layer Push möglicherweise innerhalb des AJAX-Callbacks oder der benutzerdefinierten JavaScript-Funktion hinzufügen, die die „In den Warenkorb“-Aktion behandelt.
Code-Beispiel 5: remove_from_cart
Wo? Wird ausgelöst, wenn der Nutzer auf der Warenkorb-Seite landet (oder nachdem die Warenkorb-Artikel gerendert wurden) in cart.liquid
.
{% for item in cart.items %}
<p>{{ item.product.title }} (x{{ item.quantity }})</p>
<button
class="remove-item"
onclick="
window.dataLayer.push({
event: 'remove_from_cart',
ecommerce: {
items: [{
item_id: '{{ item.product_id }}',
item_name: '{{ item.title | escape }}',
quantity: {{ item.quantity }}
}]
}
});
">
Remove
</button>
{% endfor %}
Code-Beispiel 6: view_cart
Wo? Auch in cart.liquid
, ausgelöst, wenn der Nutzer auf der Warenkorb-Seite landet (oder nachdem die Warenkorb-Artikel gerendert wurden).
<h1>Your Shopping Cart</h1>
{% for item in cart.items %}
<!– Display each cart item –>
{% endfor %}
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: ‘view_cart’,
ecommerce: {
items: [
{% for item in cart.items %}
{
item_id: ‘{{ item.product_id }}’,
item_name: ‘{{ item.title | escape }}’,
price: ‘{{ item.price | money_without_currency }}’,
quantity: {{ item.quantity }}
}
{% if forloop.last == false %},{% endif %}
{% endfor %}
]
}
});</script>
Code-Beispiel 7: begin_checkout
Wo? Wird normalerweise ausgelöst, wenn der Nutzer auf den „Check-out“-Button auf der Warenkorb-Seite klickt oder zum Checkout-Prozess weitergeleitet wird.
<button class="begin-checkout"
onclick="
window.dataLayer.push({
event: 'begin_checkout',
ecommerce: {
items: [
{% for item in cart.items %}
{
item_id: '{{ item.product_id }}',
item_name: '{{ item.title | escape }}',
price: '{{ item.price | money_without_currency }}',
quantity: {{ item.quantity }}
}
{% if forloop.last == false %},{% endif %}
{% endfor %}
]
}
});
">
Checkout
</button>
Code-Beispiel 8: add_shipping_info
Wo? Wenn Sie Shopify Plus haben, können Sie dies in checkout.liquid
im Versand-Schritt einfügen. Für Nicht-Plus können Sie keine vollständige Anpassung jedes Checkout-Schritts vornehmen, aber Sie können „Zusätzliche Skripte“ auf der Bestellbestätigungs-Seite einfügen.
<!-- checkout.liquid on Shopify Plus -->
<!-- Let's assume this snippet runs when shipping details are successfully entered -->
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'add_shipping_info',
ecommerce: {
currency: '{{ shop.currency }}',
items: [
/* Typically stored from previous cart data or a global object */
],
shipping_tier: 'Express' // or 'Standard', 'Overnight', etc.
}
});
</script>
Code-Beispiel 9: add_payment_info
Wo? Auch in checkout.liquid
auf Shopify Plus, ausgelöst, wenn NutzerInnen Zahlungsinformationen eingeben.
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'add_payment_info',
ecommerce: {
currency: '{{ shop.currency }}',
payment_type: 'Credit Card', // This is an example. You could dynamically insert actual payment type
items: [
/* same items array as before */
]
}
});
</script>
Code-Beispiel 10: purchase
Wo? Typischerweise auf der Bestellstatus-Seite (Danke-Seite). Für Nicht-Plus können Sie Code unter Einstellungen > Check-out > Bestellstatus-Seite > Zusätzliche Skripte hinzufügen. Für Shopify Plus erfolgt dies in checkout.liquid
oder order.liquid
.
Non-Plus Beispiel:
- Gehen Sie zu Einstellungen > Check-out.
- Scrollen Sie zur Bestellstatus-Seite > Zusätzliche Skripte.
- Fügen Sie etwas wie folgt hinzu:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: "{{ order.order_number }}",
affiliation: "{{ shop.name }}",
value: "{{ total_price | money_without_currency }}",
currency: "{{ shop.currency }}",
items: [
{% for line_item in order.line_items %}
{
item_id: "{{ line_item.product_id }}",
item_name: "{{ line_item.title | escape }}",
price: "{{ line_item.price | money_without_currency }}",
quantity: {{ line_item.quantity }}
}
{% if forloop.last == false %},{% endif %}
{% endfor %}
]
}
});
</script>
Auf diese Weise wird das purchase
-Ereignis zusammen mit den vollständigen Transaktionsdetails an den Data Layer übermittelt, sobald ein Kauf abgeschlossen wurde.
Code-Beispiel 11: add_to_wishlist
Wo? Falls Sie eine Wunschlisten-Funktion über eine App oder benutzerdefinierten Code implementiert haben, können Sie dieses Snippet in die „Zur Wunschliste hinzufügen“-Schaltfläche einfügen.
<button class=”wishlist-btn”
onclick=”
window.dataLayer.push({
event: ‘add_to_wishlist’,
ecommerce: {
items: [{
item_id: ‘{{ product.id }}’,
item_name: ‘{{ product.title | escape }}’,
price: ‘{{ product.price | money_without_currency }}’‘
}]
}
});
“>
Add to Wishlist
</button>
In diesem Snippet:
- Das
add_to_wishlist
-Ereignis wird gepusht, wenn der Nutzer ein Produkt zur Wunschliste hinzufügt. - Produktinformationen wie ID, Name und Preis werden in den Data Layer übermittelt.
Konfigurieren von GTM-Tags und Triggern für diese Ereignisse
Nachdem Sie die dataLayer
-Pushes implementiert haben, müssen Sie Google Tag Manager (GTM) so konfigurieren, dass er auf diese Ereignisse hört und sie an Google Analytics 4 (GA4) sendet. Hier ist eine Schritt-für-Schritt-Anleitung:
- Erstellen eines neuen Triggers in GTM:
- Gehen Sie zu Ihrem GTM-Workspace.
- Erstellen Sie einen neuen Trigger des Typen Custom Event.
- Geben Sie einen Namen wie Event –
add_to_cart
ein. - Im Feld „Eventname“ geben Sie den Eventnamen wie
add_to_cart
ein (dies muss genau dem Namen imdataLayer.push
entsprechen).
- Erstellen eines neuen Tags:
- Tag-Typ: Wählen Sie Google Analytics: GA4 Event.
- Konfigurations-Tag: Wählen Sie Ihr GA4-Konfigurationstag (Property-ID).
- Eventname: Geben Sie den gleichen Namen ein wie den im Trigger, z. B.
add_to_cart
. - Parameter: Optional können Sie Parameter wie das
items
-Array,currency
usw. hinzufügen.
- Trigger festlegen:
Setzen Sie den Trigger so, dass er auf Event –add_to_cart
reagiert. - Container veröffentlichen:
Sobald Sie den Tag und den Trigger erstellt haben, klicken Sie auf „Veröffentlichen“, um die Änderungen in Ihrem GTM-Container zu übernehmen.
Wiederholen Sie diesen Vorgang für jedes benutzerdefinierte Ereignis (z. B. view_item
, remove_from_cart
, usw.), sodass jedes dataLayer.push
-Ereignis erkannt und an GA4 gesendet wird.
Pro-Tipp: Nutzen Sie den GTM Preview Mode und die Real-Time-Reports in GA4, um sicherzustellen, dass jedes Ereignis korrekt übertragen wird.
Testen & Debuggen
Testen und Debuggen sind entscheidend. Stellen Sie also sicher, dass Ihre Implementierung von Google Tag Manager (GTM) und Google Analytics 4 (GA4) wie erwartet funktioniert. Hier sind die wichtigsten Methoden, um Ihre Einrichtung zu überprüfen und Probleme zu beheben:
- Verwendung des GTM Preview-Modus
Tipp: Navigieren Sie durch Ihren Shop und suchen Sie nach spezifischen Ereignissen wieadd_to_cart
,view_item
, usw. im Debugging-Panel.- Klicken Sie im GTM auf die Schaltfläche „Vorschau“.
- Geben Sie die URL Ihres Shopify-Shops oder den Vorschau-Link für ein nicht veröffentlichtes Theme ein.
- Das GTM-Debugging-Panel wird unten auf Ihrem Bildschirm angezeigt und zeigt:
- Welche Tags ausgelöst werden.
- Welche Trigger aktiviert wurden.
- Welche Daten an den dataLayer übergeben wurden.
- Verwenden des Shopify Preview-Modus
Wenn Sie an einem nicht veröffentlichten Theme arbeiten, können Sie Änderungen privat testen, bevor sie öffentlich gemacht werden. Sie können den Shopify Preview Modus mit dem GTM Preview Modus kombinieren, um Tests gleichzeitig durchzuführen:- Gehen Sie zu Online-Store > Themes.
- Klicken Sie neben dem bearbeiteten Theme auf Aktionen > Vorschau.
- Navigieren Sie durch den Vorschau-Shop, um sicherzustellen, dass die GTM-Skripte und
dataLayer.push
-Ereignisse wie gewünscht funktionieren.
- Überprüfen der GA4 Real-Time Reports
- GA4 Echtzeit ermöglicht Ihnen:
- Zu sehen, welche Ereignisse in Echtzeit eintreffen.
- Zu überprüfen, ob benutzerdefinierte Event-Parameter (z. B.
item_name
,price
) korrekt übergeben werden.
- Öffnen Sie Ihre GA4-Property.
- Gehen Sie in der linken Navigationsleiste zu Berichte > Echtzeit.
- Führen Sie Aktionen auf Ihrem Shop aus (z. B. ein Produkt anzeigen, es in den Warenkorb legen).
- Stellen Sie sicher, dass die entsprechenden Ereignisse (z. B.
view_item
,add_to_cart
) im Echtzeit-Dashboard angezeigt werden. Öffnen Sie Ihre GA4-Property. - Gehen Sie in der linken Navigationsleiste zu Berichte > Echtzeit.
- Führen Sie Aktionen auf Ihrem Shop aus (z. B. ein Produkt anzeigen, es in den Warenkorb legen).
- Stellen Sie sicher, dass die entsprechenden Ereignisse (z. B.
view_item
,add_to_cart
) im Echtzeit-Dashboard angezeigt werden.
- GA4 Echtzeit ermöglicht Ihnen:
- Verwendung von GA4 DebugView
Dieser Modus bietet eine detaillierte Sicht darauf, was GA4 erfasst, und kann fehlende oder falsch konfigurierte Ereignisdaten aufdecken. Für eine detailliertere Inspektion Ihrer Ereignisse und Parameter:- Aktivieren Sie den Debug Modus in GTM:
- Gehen Sie im GTM-Workspace zu Admin > Container-Einstellungen.
- Aktivieren Sie das Debugging in GA4:
- Gehen Sie zu Admin > DebugView in Ihrer GA4-Property.
- Dies öffnet eine zeitleistenbasierte Debugging-Oberfläche.
- Führen Sie Aktionen in Ihrem Shop aus, während der Debug-Modus aktiv ist.
- Aktivieren Sie den Debug Modus in GTM:
- Häufige Probleme
- Fehlende oder falsch geschriebene Ereignisnamen:
- Container nicht veröffentlicht:
- Stellen Sie sicher, dass Sie nach der Erstellung oder Aktualisierung von Tags und Triggern im GTM auf Absenden > Veröffentlichen klicken. Änderungen bleiben im Entwurfsmodus, bis sie veröffentlicht werden.
- Konflikte zwischen Theme und Apps:
- Shopify-Apps (z. B. Warenkorb-Apps oder benutzerdefinierte Checkout-Prozesse) könnten Standardverhalten überschreiben. Wenn eine App einen Teil Ihres Shops steuert (z. B. AJAX-basierte Warenkörbe), könnte deren benutzerdefinierte Implementierung Ihre
dataLayer
-Ereignisse nicht auslösen. In solchen Fällen:- Suchen Sie nach der Dokumentation der App oder wenden Sie sich an deren Support.
- Verwenden Sie die native
dataLayer.push
-Funktion der App (falls verfügbar) oder passen Sie benutzerdefinierte Skripte entsprechend an.
- Shopify-Apps (z. B. Warenkorb-Apps oder benutzerdefinierte Checkout-Prozesse) könnten Standardverhalten überschreiben. Wenn eine App einen Teil Ihres Shops steuert (z. B. AJAX-basierte Warenkörbe), könnte deren benutzerdefinierte Implementierung Ihre
Wichtige Debugging-Tools zusammengefasst
Tool | Zweck | Wie zugänglich? |
GTM Preview Mode | Überprüfen, welche Tags ausgelöst werden und warum; Debuggen von Triggern und Variablen. | GTM Workspace > Vorschau |
Shopify Preview Mode | Testen von Theme-Änderungen, ohne sie zu veröffentlichen. | Shopify Admin > Themes > Aktionen > Vorschau |
GA4 Real-Time | Überprüfen, ob Ereignisse in Echtzeit an GA4 gesendet werden. | GA4 Admin > Berichte > Echtzeit |
GA4 DebugView | Detaillierte Inspektion von Ereignissen und Parametern. | GA4 Admin > DebugView |
Pro-Tipp: Kombinieren Sie alle Tools:
- Vorschau Ihres Shopify-Themes.
- Aktivieren Sie den GTM Preview Mode, um zu sehen, wie Tags ausgelöst werden.
- Öffnen Sie gleichzeitig GA4 Real-Time und DebugView. So stellen Sie sicher, dass Daten korrekt von GTM an GA4 fließen.
Dieser gestufte Testansatz stellt sicher, dass Ihre Tracking-Implementierung korrekt und zuverlässig funktioniert.
Wartungstipps & Best Practices
- Verwenden Sie ein Duplikat-Theme für Tests:
Verwenden Sie ein Duplikat-Theme für Tests. Wenn möglich, erstellen Sie eine Kopie Ihres Haupt-Themes und testen Sie Änderungen dort, um Auswirkungen auf live Kunden zu vermeiden. - Dokumentieren Sie Ihre Änderungen:
Halten Sie fest, welchen Ereigniscode Sie in welcher Datei hinzugefügt haben – das spart später Zeit beim Debuggen. - Regelmäßige Audits:
Überprüfen Sie regelmäßig IhredataLayer
-Pushes, um sicherzustellen, dass sie weiterhin gültig sind und keine alten Produkt-IDs oder Logik referenzieren. - Synchronisieren Sie mit Marketing-Tools:
Wenn Sie auf Plattformen wie Facebook oder Pinterest Werbung schalten, können Sie diese Pixels ebenfalls in GTM verwalten. Dies gewährleistet konsistente Marketingdaten. - Bleiben Sie auf dem Laufenden:
GA4 und Shopify entwickeln sich weiter. Achten Sie auf offizielle Dokumentationen, um neue Best Practices oder Änderungen bei E-Commerce-Ereignissen zu erfahren.
Fazit: Aufbau eines datengetriebenen Shopify-Geschäfts
Herzlichen Glückwunsch! Sie haben einen wichtigen Schritt in Richtung eines fortschrittlichen eCommerce-Trackings gemacht, den viele Store-BesitzerInnen übersehen. Durch die Implementierung von GA4-Events über den Google Tag Manager eröffnen Sie sich die Möglichkeiten:
- Das Nutzerverhalten in jeder Phase zu verstehen – von der Ansicht einer Produktliste (
view_item_list
) über das Entfernen von Artikeln aus dem Warenkorb (remove_from_cart
) bis hin zum endgültigen Kauf (purchase
). - Marketingstrategien und Website-Optimierungen auf Grundlage echter Daten anzupassen – nicht auf Vermutungen.
- Ihr Geschäft mit Klarheit zu skalieren – genau zu ermitteln, welche Kanäle am besten konvertieren, welche Produkte häufig im Warenkorb abgebrochen werden und wie Sie die Reibung im Checkout-Prozess verringern können.
Wichtige Erkenntnisse
- Planen Sie Ihre Veranstaltungsstrategie: Entscheiden Sie, welche Veranstaltungen für Ihr Geschäft von entscheidender Bedeutung sind.
- Binden Sie GTM in
theme.liquid
ein, damit Sie Tracking-Skripte leicht hinzufügen oder ändern können. - Übertragen Sie Daten an kritische Interaktionspunkte an die
dataLayer
, z. B. wenn BenutzerInnen ein Produkt ansehen, auf ein Produkt klicken, einen Artikel in den Warenkorb legen und so weiter. - Konfigurieren Sie GTM Custom Event Triggers für jedes Ereignis und senden Sie diese wie empfohlen an GA4.
- Testen, debuggen und iterieren: Prüfen Sie immer im GTM Vorschaumodus, GA4 Real-Time und behalten Sie Ihre Trichtermetriken im Auge.
- Pflege und Optimierung: Halten Sie Ihren Shop immer auf dem Laufenden. Er wird sich zusammen mit Ihren Marketinganforderungen weiterentwickeln.
Wenn Sie diese Schritte befolgen, erreichen Sie einen robusten und genauen Fluss von eCommerce-Daten. Diese Daten werden direkt in Ihre Google Analytics 4-Eigenschaft übertragen. Auf dieser Grundlage können Sie erweiterte Funnel-Analysen durchführen, hochgradig zielgerichtete Remarketing-Zielgruppen mithilfe von Ereignisdaten erstellen und datengesteuerte Berichte erstellen.
Mehr zum Thema Tracking & Analytics:
Sie benötigen Unterstützung bei der Implementierung oder haben weiterführende Fragen? Gerne erläutern wir als Digital Analytics Agentur Ihnen die Vor- und Nachteile der gängigen Tracking- und Tag-Management-Lösungen.
Zudem bieten wir Ihnen ein Digital Analytics Seminar an, welches je nach Ihren Wünschen bei Ihnen im Haus, in unseren Räumlichkeiten oder online stattfindet. Im Seminar werden die Themen Tool-Integration, KPIs und Reporting behandelt.
Nehmen Sie noch heute Kontakt mit uns auf und profitieren Sie von den Vorteilen eines individuellen Trackingkonzepts.