Das Wichtigste in Kürze
- Die Customer Events API von Shopify (Einstellungen → Kundenereignisse → Benutzerdefiniertes Pixel hinzufügen) ist der richtige Ort fürs Custom Event Tracking.
- Zu den Standard-Shopify-Events gehören page_viewed, product_viewed, product_added_to_cart und checkout_completed.
- Custom Pixels laufen in einer Sandbox-Umgebung mit Zugriff auf alle Checkout-Events – etwas, das theme.liquid-Skripte nicht können.
- Im Custom Pixel Editor schreibst du ganz normales JavaScript – es ist keine Shopify-spezifische Syntax erforderlich.
Custom Event Tracking verrät dir, was Käufer in deinem Shop tatsächlich tun – nicht nur, welche Seiten sie besuchen, sondern auch, wann sie Produkte in den Warenkorb legen, den Checkout starten oder auf der Dankesseite landen. Mit der Customer Events API von Shopify lässt sich das tracken, ohne im Theme-Code herumzuwühlen.
Wie füge ich Events in Shopify hinzu?
Gehen Sie zu Einstellungen → Kundenereignisse → Benutzerdefiniertes Pixel hinzufügen. Dies öffnet einen JavaScript-Editor, in dem Sie Code schreiben, der auf die Standard-Events von Shopify hört und als Reaktion Ihren eigenen Tracking-Code ausführt.
Zum Messen der Ergebnisse siehe Add Tracking Scripts to Shopify.
Standard-Events von Shopify
Shopify stellt entlang der gesamten Customer Journey eine Reihe von Standard-Events bereit. Dein Custom Pixel kann auf jedes davon reagieren:
Page-Events:
page_viewed— wird bei jedem Seitenaufruf ausgelöst
Produkt-Events:
product_viewed— wird ausgelöst, wenn eine Produktseite angesehen wirdproduct_added_to_cart— wird ausgelöst, wenn ein Artikel in den Warenkorb gelegt wirdsearch_submitted— wird ausgelöst, wenn eine Suchanfrage abgesendet wird
Checkout-Events:
checkout_started— wird ausgelöst, wenn der Checkout beginntcheckout_address_info_submitted— wird ausgelöst, wenn die Adresse eingegeben wirdcheckout_shipping_info_submitted— wird ausgelöst, wenn die Versandart ausgewählt wirdpayment_info_submitted— wird ausgelöst, wenn die Zahlungsinformationen eingegeben werdencheckout_completed— wird auf der Bestellbestätigungsseite ausgelöstorder_created— wird ausgelöst, wenn eine Bestellung erfolgreich aufgegeben wurde
Diese Events enthalten kontextbezogene Daten — das angesehene Produkt, den Warenkorbwert zu Beginn des Checkouts, die Bestellsumme bei Abschluss.
Mehr dazu: Checkout.liquid in Shopify Plus bearbeiten.
Ein benutzerdefiniertes Pixel schreiben
Hier ist ein einfaches Beispiel, das ein GA4-Event sendet, wenn ein Produkt in den Warenkorb gelegt wird:
analytics.subscribe('product_added_to_cart', (event) => {
const cartLine = event.data.cartLine
// Über dataLayer an GA4 senden (sofern GTM installiert ist)
window.dataLayer = window.dataLayer || []
window.dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: cartLine.merchandise.product.vendor,
items: [
{
item_id: cartLine.merchandise.sku,
item_name: cartLine.merchandise.product.title,
price: cartLine.cost.totalAmount.amount,
quantity: cartLine.quantity,
},
],
},
})
})
Und für ein Meta Pixel Purchase-Event nach Abschluss des Checkouts:
Mehr dazu: Google Tag Manager in Shopify hinzufügen.
Mehr dazu: Custom JavaScript in Shopify hinzufügen.
analytics.subscribe('checkout_completed', (event) => {
const order = event.data.checkout
fbq('track', 'Purchase', {
value: order.totalPrice.amount,
currency: order.currencyCode,
content_ids: order.lineItems.map((item) => item.variant.sku),
content_type: 'product',
})
})
Wichtig: Die Funktion analytics.subscribe() wird von der Shopify-Sandbox-Umgebung bereitgestellt. Du musst sie nicht importieren – sie ist automatisch in allen Custom Pixels verfügbar.
Schritt für Schritt ein benutzerdefiniertes Pixel einrichten
Schritt 1 - Gehe zu Einstellungen → Kundenereignisse
Schritt 2 - Klicke auf Benutzerdefiniertes Pixel hinzufügen
Schritt 3 - Vergib einen Namen (z. B. “GA4 Custom Events” oder “Meta Purchase Event”)
Schritt 4 - Schreibe dein JavaScript im Code-Bereich unter Verwendung von analytics.subscribe()
Schritt 5 - Lege die Berechtigungsstufe für den Kundendatenschutz fest:
- Nicht erforderlich — wird bei allen Besuchern unabhängig von ihrer Zustimmung ausgelöst
- Präferenzen — erfordert Zustimmung für Analytics
- Analytics — erfordert Zustimmung für Analytics
- Marketing — erfordert Zustimmung für Marketing
Wähle für das Purchase-Tracking “Marketing”, wenn du Daten an Werbeplattformen sendest, oder “Analytics” für GA4.
Um Ergebnisse zu messen, siehe Tracking-Skripte in Shopify hinzufügen.
Schritt 6 - Klicke auf Speichern und dann auf Verbinden
Testen Ihres benutzerdefinierten Pixels
Der integrierte Debugger von Shopify. Im Editor für Kundenereignisse gibt es einen Live-Event-Feed, der ausgelöste Events in Echtzeit anzeigt. Öffnen Sie Ihren Storefront in einem anderen Tab und surfen Sie ein wenig herum – Sie sollten sofort page_viewed-Events sehen.
Browser-Konsole. Da benutzerdefinierte Pixel in einem Sandboxed-Iframe laufen, können Sie deren console.log-Ausgaben nicht direkt sehen. Nutzen Sie stattdessen das Debugger-Panel von Shopify.
GA4 DebugView. Gehen Sie in Ihrer GA4-Property auf Konfigurieren → DebugView. Lösen Sie Events in Ihrem Storefront aus und beobachten Sie, wie sie in Echtzeit erscheinen.
Benutzerdefinierte Events vs. Standard-App-Integrationen
Shopify bietet im Bereich “Kundenereignisse” vorgefertigte Integrationen für Google Analytics, Google Ads, Meta, TikTok, Snapchat und andere. Diese übernehmen automatisch das standardmäßige Purchase-Tracking.
Verwende Custom Pixels, wenn:
- Du Events tracken musst, die von der Standardintegration nicht abgedeckt werden (z. B. spezifische Button-Klicks, Scroll-Tiefe, benutzerdefinierte Funnel-Schritte)
- Du Events an eine weniger verbreitete Analytics-Plattform senden musst
- Du zusätzliche benutzerdefinierte Daten zusammen mit Standard-Events senden möchtest (z. B. Customer Lifetime Value, Produktkategorie)
Für die meisten Shops decken die Standardintegrationen 80 % der Anforderungen ab. Custom Pixels schließen die Lücken.
FAQ
Innerhalb eines Sandbox-iFrames, der von Shopify eingefügt wird – weshalb du nicht direkt auf window oder das Seiten-DOM zugreifen kannst. Der Vorteil ist die Zuverlässigkeit: Pixels werden auch auf den Checkout-Seiten weiterhin ausgelöst, wo Händler traditionell die Sichtbarkeit verlieren, und sie können nicht durch Theme-Updates kaputtgehen.
Nein. Custom Pixels laufen in einer Sandbox-Umgebung mit begrenzten globalen Variablen – nur Vanilla JavaScript. Wenn du eine Bibliothek benötigst, binde sie entweder über ein CDN innerhalb des Pixel-Codes ein oder baue die Integration ohne eine. Das meiste Tracking kann mit fetch und Standard-Browser-APIs durchgeführt werden.
Ja. Die Customer Events API ist in allen Shopify-Plänen verfügbar, auch im Basic-Plan. Das ist bedeutend, da das serverseitige Checkout-Tracking vor 2023 weitgehend Shopify Plus vorbehalten war. Custom Pixels öffnen das Tracking von Checkout-Events für jeden Plan.
Pushe aus dem Pixel heraus in den dataLayer – da das Pixel jedoch in einer Sandbox läuft, musst du in den dataLayer des übergeordneten Fensters pushen, indem du parent.window.dataLayer.push() verwendest. Die meisten Shops überspringen dies und nutzen stattdessen den nativen GTM-Konnektor von Shopify. Anschließend fügen sie ein Custom Pixel nur für die Events hinzu, die der Konnektor nicht abdeckt.
Zwei häufige Ursachen: (1) Die Berechtigung für den Kundendatenschutz ist höher eingestellt als die Zustimmung des Besuchers (z. B. "Marketing" erforderlich, aber der Besucher hat Marketing abgelehnt), oder (2) das Pixel ist auf das falsche Event abonniert – checkout_completed wird auf der Dankesseite ausgelöst, nicht order_created (welches serverseitig ausgelöst wird und nicht immer an Client-Pixels gesendet wird).