Wichtigste Erkenntnisse

Die Customer Events API von Shopify (Einstellungen → Kundenereignisse → Benutzerdefiniertes Pixel hinzufügen) ist der richtige Ort für das Tracking benutzerdefinierter Events.

Zu den Standard-Events von Shopify gehören page_viewed, product_viewed, product_added_to_cart und checkout_completed.

Benutzerdefinierte Pixel laufen in einer Sandbox-Umgebung mit Zugriff auf alle Checkout-Events – etwas, das theme.liquid-Skripte nicht können.

Sie schreiben Standard-JavaScript im Editor für benutzerdefinierte Pixel – es ist keine Shopify-spezifische Syntax erforderlich.

Das Tracking benutzerdefinierter Events verrät Ihnen, was Shopper tatsächlich in Ihrem Store tun – nicht nur, welche Seiten sie besuchen, sondern auch, wann sie Produkte in den Warenkorb legen, den Checkout starten oder Ihre Danke-Seite erreichen. Mit der Customer Events API von Shopify lässt sich dies tracken, ohne im Theme-Code graben zu müssen.

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.

Standard-Events von Shopify

Shopify stellt eine Reihe von Standard-Events entlang der Shopping-Journey bereit. Ihr benutzerdefiniertes Pixel kann auf jedes davon reagieren:

Seiten-Events:

page_viewed — wird bei jedem Laden der Seite ausgelöst

Produkt-Events:

product_viewed — wird ausgelöst, wenn eine Produktseite aufgerufen wird
product_added_to_cart — wird ausgelöst, wenn ein Artikel in den Warenkorb gelegt wird
search_submitted — wird ausgelöst, wenn eine Suchanfrage abgeschickt wird

Checkout-Events:

checkout_started — wird ausgelöst, wenn der Checkout beginnt
checkout_address_info_submitted — wird ausgelöst, wenn die Adresse eingegeben wird
checkout_shipping_info_submitted — wird ausgelöst, wenn die Versandart ausgewählt wird
payment_info_submitted — wird ausgelöst, wenn die Zahlungsinformationen eingegeben werden
checkout_completed — wird auf der Bestellbestätigungsseite ausgelöst
order_created — wird ausgelöst, wenn eine Bestellung erfolgreich aufgegeben wurde

Diese Events enthalten kontextbezogene Daten – das Produkt, das angesehen wurde, der Warenkorbwert zu Beginn des Checkouts, die Gesamtsumme der Bestellung beim Abschluss.

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 (falls 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 bei Abschluss des Checkouts:

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 Sandbox-Umgebung von Shopify bereitgestellt. Sie müssen sie nicht importieren – sie ist automatisch in allen benutzerdefinierten Pixeln verfügbar.

Schritt für Schritt ein benutzerdefiniertes Pixel einrichten

Schritt 1 - Gehen Sie zu Einstellungen → Kundenereignisse

Schritt 2 - Klicken Sie auf Benutzerdefiniertes Pixel hinzufügen

Schritt 3 - Vergeben Sie einen Namen (z. B. „GA4 Custom Events“ oder „Meta Purchase Event“)

Schritt 4 - Schreiben Sie im Bereich „Code“ Ihr JavaScript unter Verwendung von analytics.subscribe()

Schritt 5 - Legen Sie die Datenschutzberechtigung fest:

Nicht erforderlich — wird für alle Besucher unabhängig von der Einwilligung ausgelöst
Präferenzen — erfordert Einwilligung für Analytics
Statistiken — erfordert Einwilligung für Analytics
Marketing — erfordert Einwilligung für Marketing

Wählen Sie für das Purchase-Tracking „Marketing“, wenn Sie Daten an Anzeigeplattformen senden, oder „Statistiken“ für GA4.

Schritt 6 - Klicken Sie 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 verfügt über vorgefertigte Integrationen für Google Analytics, Google Ads, Meta, TikTok, Snapchat und andere im Bereich Kundenereignisse. Diese übernehmen das Standard-Purchase-Tracking automatisch.

Verwenden Sie benutzerdefinierte Pixel, wenn:

Sie Events tracken müssen, die die Standard-Integration nicht abdeckt (z. B. Klicks auf bestimmte Buttons, Scrolltiefe, benutzerdefinierte Funnel-Schritte)
Sie Events an eine weniger verbreitete Analytics-Plattform senden müssen
Sie mit Standard-Events zusätzliche benutzerdefinierte Daten senden möchten (z. B. Customer Lifetime Value, Produktkategorie)

Für die meisten Stores decken die Standard-Integrationen 80 % der Anforderungen ab. Benutzerdefinierte Pixel füllen die Lücken.