Benutzerdefinierte Pixel testen

Nachdem du ein benutzerdefiniertes Pixel erstellt haben, musst du es testen, um sicherzustellen, dass dein Pixel Daten richtig sendet, wenn Ereignisse auf deiner Website auftreten.

Du kannst den Shopify Pixel Helper verwenden, um zu testen, ob deine Pixel-Ereignisse geladen werden und ob du Shopify-Ereignisse ordnungsgemäß abonniert hast. Mit dem Shopify Pixel Helper kannst du dein benutzerdefiniertes Pixel in deinem Onlineshop testen, um die empfangenen Ereignisse in Echtzeit zusammen mit den Daten für diese Ereignisse anzuzeigen.

Wenn dein benutzerdefiniertes Pixel in eine Drittanbieter-Plattform integriert wird, die über ein eigenes Pixel-Hilfstool verfügt, kannst du den Drittanbieter-Pixel-Helfer zusätzlich zum Shopify Pixel Helper verwenden, um zu testen, ob deine Pixel-Ereignisse verarbeitet und von der Drittanbieter-Plattform empfangen werden. Wenn du beispielsweise ein benutzerdefiniertes TikTok-Pixel zu deinem Shop hinzufügst, kannst du sowohl den Shopify Pixel Helper als auch den Pixel-Helfer von TikTok verwenden, um dein Pixel zu testen.

Du kannst den Shopify Pixel Helper in derselben Browser-Sitzung wie den Drittanbieter-Pixel-Helfer verwenden, um Ereignisse für beide Plattformen gleichzeitig zu testen.

Hier ist ein benutzerdefiniertes Pixel-Skript, das alle Standard-Ereignisse in der Sandbox-Umgebung auslöst und die Ereignisdaten in der Konsole protokolliert. Die Standard-Ereignisse sind im Shopify Pixel Helper sichtbar. Darüber hinaus kannst du andere Bulk-Abonnements, all_events, all_custom_events und all_dom_eventsabonnieren, um alle Funktionen zu entdecken, die durch Web-Pixel bereitgestellt werden. In der Web-Pixel-API findest du weitere Informationen.

analytics.subscribe("all_standard_events", event => {
console.log("Event data ", event?.data);
});

Verbindung mit benutzerdefiniertem Pixel gewährleisten

Stelle vor dem Testen deines benutzerdefinierten Pixels sicher, dass das benutzerdefinierte Pixel verbunden ist.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Einstellungen > Kundenereignisse.

  2. Vergewissere dich, dass neben dem Pixel, das du testen möchtest, in der Spalte Status der Status Verbunden angezeigt wird.

  3. Wenn das Pixel nicht verbunden ist, klicke auf ... und anschließend auf Verbinden.

Benutzerdefiniertes Pixel mit dem Shopify Pixel Helper testen

Nachdem du überprüft hast, ob dein benutzerdefiniertes Pixel verbunden ist, kannst du mit dem Shopify Pixel Helper testen, ob das benutzerdefinierte Pixel Daten sendet und die Daten deines Shops empfängt. Du kannst jeweils ein benutzerdefiniertes Pixel testen.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Einstellungen > Kundenereignisse.

  2. Klicke auf das benutzerdefinierte Pixel, das du testen möchtest.

  3. Klicke auf Testen, um das benutzerdefinierte Pixel auf deiner Website zum Testen zu öffnen.

  4. Optional: Abhängig von den Zustimmungseinstellungen deines Shops und den Einstellungen für den Schutz von Kundendaten wird im Dialogfenster Pixel Helper möglicherweise die Meldung Pixel wartet auf Genehmigung angezeigt. Führe einen der folgenden Schritte aus, um mit dem Test fortzufahren:

    • Akzeptiere das Tracking im Cookie-Banner oder in den Einstellungen deines Shops.
    • Klicke auf Zustimmung zur Fortsetzung des Tests erteilen.
    • Wenn dein Pixel immer noch nicht geladen wird, überprüfe deine Einstellungen zum Schutz von Kundendaten.
  5. Um anzuzeigen, welche Ereignisse geladen werden, besuche die einzelnen Seiten, für die du das Pixel testen möchtest, und überprüfe den Abschnitt Ereignisse empfangen im Dialogfenster Pixel Helper, um sicherzustellen, dass das Ereignis erfolgreich abonniert wurde und dass die Callback-Funktion erfolgreich war:

    • Navigiere zu einer neuen Seite, um das Ereignis page_viewed zu testen.
    • Klicke auf ein Produkt, um das Ereignis product_viewed zu testen.
    • Füge deinem Warenkorb ein Produkt hinzu, um das Ereignis product_added_to_cart zu testen.
    • Gehe zu deinem Checkout, um das Ereignis checkout_started zu testen.
    • Gib beim Checkout deine Versandinformationen ein, um zu testen, ob das Ereignis checkout_shipping_info_submitted das Ereignis checkout_started ersetzt.
    • Schließe den Checkout ab, um zu testen, ob das Ereignis checkout_completed das Ereignis checkout_shipping_info_submitted ersetzt. Erfahre mehr über das Aufgeben einer Testbestellung.
  6. Um die empfangenen Ereignisdaten anzuzeigen, klicke auf die Schaltfläche Maximieren, um das Dialogfenster "Pixel Helper" zu erweitern.

Abschnitt "Ereignisse empfangen" anzeigen

Wenn du testet, welche Ereignisse in Schritt 5 geladen werden, wird einer der folgenden Status im Abschnitt Ereignisse empfangen des Dialogfensters Pixel Helper angezeigt:

  • Ein grüner Punkt gibt an, dass das Ereignis erfolgreich abonniert wurde und die Callback-Funktion erfolgreich war.
  • Ein roter Punkt gibt an, dass das Ereignis erfolgreich abonniert wurde, aber die Callback-Funktion fehlgeschlagen ist. Erfahre, wie du Fehler bei deinem benutzerdefinierten Pixel beheben kannst.
  • Der Pixel Helper zeigt nicht erkannte Top-Level-Fehler und Fehler in der Callback-Funktion an. Top-Level-Fehler werden angezeigt, wenn der Pixel Helper geladen wird. Callback-Fehlermeldungen werden angezeigt, wenn du auf ein Ereignis mit einem roten Punkt klickst, um es zu erweitern.
  • Das folgende Codebeispiel enthält einen Callback-Fehler und einen Top-Level-Fehler. Je nachdem, wo der Top-Level-Fehler auftritt, funktioniert das Pixel u. U. teilweise.
analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Weitere Informationen zum Beheben von JavaScript-Fehlern findest du im Artikel zur Fehlerbehebung in JavaScript.

Fehlerbehebung beim benutzerdefinierten Pixel

Wenn dein Pixel während des Tests nicht geladen oder ausgelöst wird und du deine Ereignisdaten und deinen Pixel-Code bereits auf Fehler überprüft hast, probiere die folgenden Schritte zur Fehlerbehebung aus.

Einstellungen für den Schutz von Kundendaten überprüfen

Wenn dein Pixel während des Tests nicht geladen oder ausgelöst wird, können Einstellungen für den Schutz von Kundendaten die Ursache dafür sein.

Gehe in deinem Shopify-Adminbereich zu Einstellungen > Schutz von Kundendaten, um in deinem Shopify-Adminbereich nach Einstellungen für den Schutz von Kundendaten zu suchen, die möglicherweise auf deine Sitzung zutreffen. Führe je nach den Kunden-Datenschutzeinstellungen die folgenden Schritte aus:

  • Wenn du Einstellungen zum Schutz von Kundendaten verwendest, die in deiner Region eine Zustimmung durch Kunden erfordern, musst du sicherstellen, dass du die Zustimmung über dein Cookie-Banner einholst.
  • Wenn du keine Einstellungen zum Schutz von Kundendaten verwendest, die das Laden des Pixels verhindern, lösche die Cookies deines Browsers, um dein Cookie-Banner zurückzusetzen und eine Zustimmung einzuholen.

Wenn du ein Drittanbieter-Tool verwendest, um die Zustimmung zu verwalten, wende dich für Unterstützung an deinen Drittanbieter.

Zusätzliche Fehlerbehebung

Wenn du dir nicht sicher bist, ob dein benutzerdefiniertes Pixel ein Kundenereignis ordnungsgemäß abonniert hat, führe die folgenden Schritte zur Fehlerbehebung aus:

  • Lösche die Cookies deines Browsers.
  • Wenn du ein Standard-Ereignis testest, überprüfe in der Entwicklerdokumentation die Standard-Ereignis-Beschreibungen von Shopify, um sicherzustellen, dass du die erforderlichen Schritte zum Auslösen des Ereignisses durchführst.

Mit Drittanbieter-Pixel-Helfer testen

Ein Pixel-SDK (Software Development Kit für Pixel) enthält Tools für dein Pixel, um Informationen über das Kundenverhalten zu erfassen. Du kannst den Pixel-Helfer eines Drittanbieters verwenden, um die folgenden Pixel-Verhaltensweisen zu testen und sicherzustellen, dass das Pixel-SDK wie erwartet funktioniert:

Testen, ob ein Drittanbieter-Pixel-SDK geladen wird

Die Schritte zum Überprüfen deines Netzwerk-Tabs hängen vom verwendeten Webbrowser ab. Weitere Informationen dazu, wie du dein Netzwerk-Tab in Google Chrome überprüfst, findest du zum Beispiel in der Chrome for Developers-Dokumentation unter Netzwerkaktivität überprüfen.

Um zu testen, ob ein Drittanbieter-Pixel-SDK geladen wird, musst du zunächst den Code deines Drittanbieters für die SDK-URL abrufen, damit du ihn zu deinem Pixel-Code hinzufügen kannst. Wende dich für Unterstützung an deinen Pixel-Anbieter.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Einstellungen > Kundenereignisse.

  2. Klicke auf das benutzerdefinierte Pixel, das du testen möchtest.

  3. Gib im Abschnitt Code am Ende deines Pixel-Codes das Pixel-SDK ein, das dein Drittanbieter bereitgestellt hat.

  4. Klicke auf Speichern.

  5. Besuche deinen Onlineshop und überprüfe dann deinen Netzwerk-Tab, um sicherzustellen, dass die SDK-URL des Drittanbieters heruntergeladen wird.

  6. Optional: Wenn das Drittanbieter-Pixel-SDK nicht lädt, überprüfe die Sandbox-Umgebung auf JavaScript-Laufzeitfehler. In Chrome kannst du zum Beispiel einen bestimmten iFrame auswählen, für den du die Konsolenprotokolle überprüfen möchtest, und die Protokolle dann auf den spezifischen Pixel eingrenzen, den du testest. Weitere Informationen zur Überprüfung von JavaScript-Laufzeitfehlern in Chrome findest du in der Chrome-Dokumentation unter JavaScript-Fehler beheben.

Wenn das Drittanbieter-Pixel-SDK während des Tests nicht geladen wird, wende dich an deinen externen Pixel-Anbieter, um Unterstützung zu erhalten.

Weitere Drittanbieter-Pixel-SDKs testen

Um zu testen, ob ein Drittanbieter-Pixel-SDK initialisiert wird oder Ereignisse erfasst, überprüfe die Dokumentation eines externen Pixel-Anbieters.

Um zu testen, ob ein Pixel-SDK Ereignisse erfasst, wirst du u. U. dazu aufgefordert, den Netzwerk-Tab deines Browsers zu überprüfen. Die Schritte zum Überprüfen deines Netzwerk-Tabs hängen vom verwendeten Webbrowser ab. Weitere Informationen dazu, wie du dein Netzwerk-Tab in einem Google Chrome-Browser für Google Chrome überprüfst, findest du zum Beispiel in der Chrome for Developers-Dokumentation unter Netzwerkaktivität überprüfen.

Du hast die gesuchten Antworten nicht gefunden? Wir helfen dir gerne weiter.