Tutorials

How to add the pixel script on the customer event for Shopify [Einfache Anleitung]

Melden

Hier ist ein aktueller und leicht verständlicher Guide, wie du Pixelskipe über die „Customer Events“ (Kundenereignisse) in Shopify einbindest. Diese Methode ist der moderne Standard, da sie sicher in einer Sandbox läuft und die Performance deines Shops nicht beeinträchtigt.

Shopify hat die Art und Weise, wie Tracking-Skripte (wie Meta Pixel, Google Ads oder TikTok Pixel) eingebunden werden, revolutioniert. Anstatt den Code direkt in die theme.liquid oder die Checkout-Einstellungen zu kopieren, nutzt man heute die Customer Events.

Warum Customer Events?

  • Datenschutz: Sie laufen in einer sicheren Sandbox.
  • Performance: Dein Shop lädt schneller, da die Skripte isoliert ausgeführt werden.
  • Präzision: Du kannst exakt festlegen, bei welchem Ereignis (z. B. Kauf abgeschlossen) das Pixel feuern soll.

Schritt 1: Das Menü „Kundenereignisse“ öffnen

  1. Logge dich in deinen Shopify-Adminbereich ein.
  2. Klicke unten links auf Einstellungen (Settings).
  3. Wähle im linken Menü den Punkt Kundenereignisse (Customer Events).

Schritt 2: Ein neues Pixel erstellen

  1. Klicke oben rechts auf den Button Benutzerdefiniertes Pixel hinzufügen (Add custom pixel).
  2. Gib dem Pixel einen Namen (z. B. „Mein Meta Pixel“ oder „Google Analytics 4“).
  3. Klicke auf Pixel hinzufügen.

Schritt 3: Den Pixel-Code konfigurieren

Du siehst nun ein Code-Fenster. Im Gegensatz zu früher kannst du hier nicht einfach nur ein Standard-Skript reinkopieren. Du musst die Shopify-Javascript-API nutzen, um auf Ereignisse zu „hören“.

Die Struktur sieht immer so aus:

// 1. Initialisierung des Drittanbieter-Skripts (Beispiel)
!function(f,b,e,v,n,t,s){...}(window, document, 'script', 'https://...');

// 2. Abonnieren von Ereignissen
analytics.subscribe("checkout_completed", (event) => {
  // Hier wird der Tracking-Code für den Kauf ausgeführt
  console.log("Kauf abgeschlossen!", event);

  // Beispiel für einen Aufruf:
  // fbq('track', 'Purchase', { value: event.data.checkout.totalPrice.amount, currency: 'EUR' });
});

Wichtige Ereignisse (Events), die du abonnieren kannst:

  • page_viewed: Wenn eine Seite geladen wird.
  • product_viewed: Wenn ein Produkt angesehen wird.
  • product_added_to_cart: Wenn ein Artikel in den Warenkorb gelegt wird.
  • checkout_completed: Wenn der Kauf erfolgreich war.

Schritt 4: Das Pixel speichern und verbinden

  1. Wenn du deinen Code eingefügt hast, klicke oben rechts auf Speichern.
  2. Ganz wichtig: Das Pixel ist jetzt zwar gespeichert, aber noch nicht aktiv. Klicke auf den Button Verbinden (Connect).
  3. Bestätige die Verbindung im Pop-up-Fenster. Erst jetzt sammelt das Pixel Daten.

Schritt 5: Testen (Wichtig!)

Um sicherzustellen, dass dein Pixel korrekt funktioniert, solltest du es testen:

  1. Öffne deinen Shop in einem neuen Browser-Tab.
  2. Nutze Browser-Erweiterungen wie den Meta Pixel Helper oder den Tag Assistant von Google.
  3. Führe die Aktion aus (z. B. ein Produkt in den Warenkorb legen) und prüfe, ob das Plugin das Ereignis grün anzeigt.

Pro-Tipps für die Einrichtung

  • Keine doppelten Pixel: Wenn du bereits eine App für Meta oder Google nutzt, stelle sicher, dass du das Pixel nicht zusätzlich über die Customer Events einbindest, sonst werden deine Daten (z. B. Verkäufe) doppelt gezählt.
  • Variablen nutzen: Über das event-Objekt hast du Zugriff auf viele Daten wie Produktname, Preis, Währung und E-Mail-Adresse (gehasht für den Datenschutz).
  • Sandbox-Einschränkung: Beachte, dass in der Sandbox manche Standard-Window-Befehle nicht funktionieren. Nutze immer die von Shopify bereitgestellte analytics.subscribe Methode.

Zusammenfassung

Das Hinzufügen von Pixeln über Customer Events ist der sicherste Weg, um deinen Shopify Store zukunftsfähig zu machen. Du trennst das Tracking vom Design deines Themes und sorgst für eine saubere Datenstruktur.

0