So fügen Sie benutzerdefinierte Events in Shopify hinzu (2026)

Zuletzt aktualisiert
Von Experten geprüft
5 Min. Lesezeit
Jacques Blom
Jacques Blom
CTO bei Fudge.

Key Takeaways

  • Shopifys Customer Events API (Einstellungen → Kundenereignisse → Benutzerdefinierten Pixel hinzufügen) ist der richtige Ort für das 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, was theme.liquid-Skripte nicht können.
  • Du schreibst Standard-JavaScript im Custom Pixel Editor – es ist keine Shopify-spezifische Syntax erforderlich.

Custom Event Tracking zeigt dir, was Käufer tatsächlich in deinem Shop tun – nicht nur, welche Seiten sie besuchen, sondern wann sie Produkte in den Warenkorb legen, den Checkout starten oder deine Dankesseite erreichen. Die Customer Events API von Shopify macht dies trackbar, ohne dass du in den Theme-Code eingreifen musst.

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:

Produkt-Events:

Checkout-Events:

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

    // Send to GA4 via dataLayer (if GTM is installed)
    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:

Verwandt: Google Tag Manager zu Shopify hinzufügen.

Verwandt: 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 Shopifys Sandbox-Umgebung bereitgestellt. Du musst sie nicht importieren – sie ist automatisch in allen Custom Pixels verfügbar.

Browserseitige Meta-Events wie dieses werden durch Ad-Blocker und iOS-Datenschutzeinstellungen gefiltert. Kombiniere sie daher mit Server-Side Tracking – siehe Shopify Meta Conversions API Setup für diese Hälfte.


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:

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.

Fügen Sie Conversion-Tracking-Elemente zu Ihrem Shopify-Store hinzu.
Try Fudge for Free

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:

Für die meisten Shops decken die Standardintegrationen 80 % der Anforderungen ab. Custom Pixels schließen die Lücken.


FAQ

Wo werden Custom Pixels auf der Storefront ausgeführt?

Innerhalb eines Sandboxed-iFrames, das von Shopify eingefügt wird – deshalb kannst du nicht direkt auf window oder das Seiten-DOM zugreifen. Der Vorteil ist Zuverlässigkeit: Die Pixel feuern weiterhin auf den Checkout-Seiten, wo Händler traditionell die Sichtbarkeit verlieren, und sie können nicht durch Theme-Updates kaputtgehen.

Kann ich jQuery oder andere Bibliotheken in einem Custom Pixel verwenden?

Nein. Custom Pixels laufen in einer Sandbox-Umgebung mit begrenzten globalen Variablen – nur reines Vanilla-JavaScript. Wenn du eine Bibliothek benötigst, binde sie entweder über ein CDN innerhalb des Pixel-Codes ein oder baue die Integration ohne sie. Das meiste Tracking kann mit fetch und Standard-Browser-APIs erledigt werden.

Funktionieren Custom Pixels für Shopify-Checkout-Events auch in den Basic-Plänen?

Ja. Die Customer Events API ist in allen Shopify-Plänen verfügbar, einschließlich Basic. Das ist wichtig, denn vor 2023 war das Server-Side Checkout Tracking größtenteils Shopify Plus vorbehalten. Custom Pixels machen das Tracking von Checkout-Events in jedem Plan möglich.

Wie sende ich Checkout-Events aus einem Custom Pixel an den Google Tag Manager?

Pushe aus dem Pixel heraus in den dataLayer – aber weil das Pixel in einer Sandbox läuft, musst du mit parent.window.dataLayer.push() in den dataLayer des übergeordneten Fensters pushen. Die meisten Shops überspringen dies und nutzen stattdessen den nativen GTM-Connector von Shopify und fügen dann nur für Events, die der Connector nicht abdeckt, ein Custom Pixel hinzu.

Warum feuert mein Custom Pixel auf der Dankesseite nicht?

Zwei häufige Gründe: (1) Die Datenschutzberechtigung des Kunden ist höher eingestellt als die Zustimmung des Besuchers (z.B. "Marketing" erforderlich, aber der Besucher hat Marketing abgelehnt), oder (2) das Pixel ist für das falsche Event abonniert – checkout_completed feuert auf der Dankesseite, nicht order_created (das serverseitig ausgelöst wird und nicht immer an Client-Pixels gesendet wird).

Jacques's signature
Füge conversion-fokussierte Elemente zu deinem Shopify-Store hinzu, indem du sie einfach beschreibst.

You might also be interested in

So tracken Sie Scroll-Events in Shopify (2026)
Fügen Sie Scrolltiefen-Tracking zu Ihrem Shopify-Store hinzu. Lösen Sie GA4-Events bei 25 %, 50 %, 75 % und 100 % Scrolltiefe via GTM oder Custom JavaScript aus.
So behebst du doppelte Pixel-Events in Shopify (2026)
Behebe doppelte Purchase-Events in Shopify. Finde widersprüchliche Pixel-Installationen, prüfe Customer Events API vs. manuellen Code und räume den GTM auf.
Conversion-Tracking in Shopify einrichten (2026)
Richte das Conversion-Tracking in Shopify für GA4, Google Ads und das Meta-Pixel ein. Deckt integrierte Analytics und die Customer Events API ab.