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.

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.

Zum Messen der Ergebnisse siehe Add Tracking Scripts to Shopify.


Standard-Events von Shopify

Shopify stellt eine Reihe von Standard-Events entlang der Shopping Journey bereit. Dein Custom Pixel kann auf jedes dieser Events hören:

Page-Events:

Produkt-Events:

Checkout-Events:

Diese Events enthalten kontextbezogene Daten — das aufgerufene Produkt, der Warenkorbwert zu Beginn des Checkouts, der Gesamtbetrag der Bestellung beim Abschluss.

Passend dazu: So passen Sie die checkout.liquid in Shopify Plus an (2026).


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 beim Checkout-Abschluss:

Passend dazu: So fügen Sie den Google Tag Manager zu Shopify hinzu (2026).

Passend dazu: So fügen Sie benutzerdefiniertes JavaScript in Shopify hinzu (2026).

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 Pixeln verfügbar.


Schritt für Schritt ein benutzerdefiniertes Pixel einrichten

Schritt 1 - Gehe zu Einstellungen → Kunden-Events

Schritt 2 - Klicke auf Benutzerdefiniertes Pixel hinzufügen

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

Schritt 4 - Schreibe im Bereich „Code“ dein JavaScript mithilfe von analytics.subscribe()

Schritt 5 - Lege die Berechtigungsstufe für den Datenschutz fest:

Wähle für das Purchase-Tracking „Marketing“, wenn du Daten an Werbeplattformen sendest, oder „Statistik“ für GA4.

Um Ergebnisse zu messen, siehe add tracking scripts to shopify.

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 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:

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

Jacques's signature
Fügen Sie conversion-orientierte Elemente zu Ihrem Shopify-Store hinzu, indem Sie sie einfach beschreiben.

You might also be interested in

So fügst du Tracking-Skripte zu Shopify hinzu (2026)
Erfahren Sie, wie Sie Tracking-Skripte zu Shopify hinzufügen — via Customer Events (Pixel-Manager), App Embeds oder theme.liquid. Inklusive Platzierung und Einschränkungen.
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.
So behebst du doppelte Pixel-Events in Shopify (2026)
Doppelte Purchase-Events in Shopify beheben. Kollidierende Pixel-Installationen finden, Customer Events API vs. manuellen Code prüfen und GTM bereinigen.