Testa anpassade pixlar

När du har skapat en anpassad pixel måste du testa den för att se till att din pixel skickar data korrekt när händelser inträffar på din webbplats.

Du kan använda Shopify Pixel Helper för att testa om dina pixelhändelser läses in och att du har prenumererat på Shopify-händelser korrekt. Med Shopify Pixel Helper kan du testa din anpassade pixel i din webbshop för att se händelserna som tas emot i realtid, tillsammans med data för dessa händelser.

Om din anpassade pixel integreras med en tredjepartsplattform som har ett eget pixelhjälpverktyg kan du använda tredjepartens pixelhjälpare utöver Shopify Pixel Helper för att testa om dina pixelhändelser behandlas och tas emot av tredjepartsplattformen. Om du till exempel lägger till en anpassad TikTok-pixel i din butik kan du använda både Shopify Pixel Helper och TikToks pixelhjälpare för att testa din pixel.

Du kan använda Shopify Pixel Helper i samma webbläsarsession som en tredjeparts pixelhjälpare för att testa händelser för båda plattformarna samtidigt.

Här är ett anpassat pixelskript som utlöser alla standardhändelser till sandlådan och loggar händelsedata till konsolen. Standardhändelserna kommer att synas i Shopify Pixel Helper. Dessutom kan du prenumerera på andra massprenumerationer, all_events, all_custom_events och all_dom_events, för att upptäcka allt som webbpixlar kan erbjuda. Besök webbpixlars API för mer information.

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

På den här sidan

Säkerställ att en anpassad pixel är ansluten

Innan du testar din anpassade pixel, säkerställ att den anpassade pixeln är ansluten.

Steg:

Gå till Inställningar > Kundhändelser från din Shopify-admin.
Verifiera att din pixel har statusen Ansluten i kolumnen Status bredvid den pixel du vill testa.
Om pixeln inte är ansluten klickar du på ... och sedan på Anslut.

Testa en anpassad pixel med Shopify Pixel Helper

När du har verifierat att din anpassade pixel är ansluten kan du använda Shopify Pixel Helper för att testa om din anpassade pixel skickar data och tar emot din butiks data. Du kan testa en anpassad pixel åt gången.

Steg:

Gå till Inställningar > Kundhändelser från din Shopify-admin.
Klicka på den anpassade pixel som du vill testa.
Klicka på Testa för att öppna den anpassade pixeln på din webbplats för testning.
Valfritt: Beroende på din butiks samtyckesinställningar och den anpassade pixelns kundintegritetsinställningar kan dialogrutan Pixelhjälpare visa Pixel väntar på samtycke. Gör något av följande för att fortsätta testa:
- Godkänn spårning på din butiks cookiebanner eller i inställningarna.
- Klicka på Ge samtycke för att fortsätta testa.
- Om din pixel fortfarande inte läses in, granska dina kundintegritetsinställningar.
För att se vilka händelser som läses in, besök varje sida som du vill testa pixeln för och granska dialogrutan Pixelhjälpare för att säkerställa att händelsen har prenumererats på och att callback-funktionen har lyckats i avsnittet Mottagna händelser:
- Gå till en ny sida för att testa händelsen page_viewed.
- Klicka på en produkt för att testa händelsen product_viewed.
- Lägg till en produkt i din varukorg för att testa händelsen product_added_to_cart.
- Gå till din kassa för att testa händelsen checkout_started.
- Ange din fraktinformation i kassan för att testa att händelsen checkout_shipping_info_submitted ersätter händelsen checkout_started.
- Slutför kassan för att testa att händelsen checkout_completed ersätter händelsen checkout_shipping_info_submitted. Mer information om att lägga en testorder.
Klicka på för att expandera pixelhjälpardialogen och visa mottagen händelsedata.

Granska avsnittet Mottagna händelser

När du testar vilka händelser som läses in i steg 5 visas en av följande statusar i avsnittet Mottagna händelser i dialogrutan Pixelhjälpare:

En grön prick indikerar att händelsen har prenumererats på och att callback-funktionen har lyckats.
En röd prick indikerar att händelsen har prenumererats på, men att callback-funktionen misslyckades. Lär dig hur du felsöker din anpassade pixel.
Pixelhjälparen visar ohanterade fel som inträffar på toppnivå eller i callback-funktionen. Fel på toppnivå visas när pixelhjälparen läses in. Felmeddelanden för callback visas när du klickar för att expandera en händelse med en röd prick.
Följande kodexempel innehåller ett återanropsfel och ett fel på toppnivå. Beroende på var felet på toppnivå finns kan pixeln fungera delvis.

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Mer information om hur du åtgärdar JavaScript-fel finns i Felsökning av JavaScript.

Felsökning av anpassade pixlar

Om din pixel inte läses in eller utlöses under testning och du redan har granskat dina händelsedata och din pixelkod efter fel, kan du prova följande felsökningsåtgärder.

Granska inställningar för kundintegritet

Om din pixel inte läses in eller utlöses under testning kan det bero på att inställningar för kundintegritet förhindrar att den läses in.

Gå till Inställningar > Kundintegritet i din Shopify-admin för att kontrollera inställningar för kundintegritet i din Shopify-admin som kan gälla för din session. Beroende på dina inställningar för kundintegritet, vidta följande steg:

Om du har inställningar för kundintegritet som kräver samtycke i din region, se till att du har gett samtycke via din cookiebanner.
Om du inte har några inställningar för kundintegritet som blockerar pixeln från att läsas in, rensa webbläsarens cookies för att återställa din cookiebanner och ge ditt samtycke.

Om du använder ett tredjepartsverktyg för att hantera samtycke, kontakta din tredjepartsleverantör för att få support.

Ytterligare felsökning

Om det fortfarande är oklart om din anpassade pixel prenumererar korrekt på en kundhändelse, kan du prova följande felsökningsåtgärder:

Rensa webbläsarens cookies.
Om du testar en standardhändelse, granska Shopifys utvecklardokumentation för beskrivningar av standardhändelser för att säkerställa att du utför de steg som krävs för att utlösa händelsen.

Testning med pixelhjälpare från tredjepart

Ett pixel-SDK (programvaruutvecklingskit) innehåller de verktyg som din pixel behöver för att samla in information om kundbeteende. Du kan använda pixelhjälparen från din tredjepartsleverantör för att testa följande beteenden för din pixel och se till att ditt pixel-SDK fungerar som förväntat:

Testa om ett pixel-SDK från tredjepart har lästs in

Vilka steg som krävs för att kontrollera din nätverksflik beror på vilken webbläsare du använder. Om du till exempel vill veta hur du kontrollerar nätverksfliken i Google Chrome kan du läsa dokumentationen Inspect network activity från Chrome for Developers.

För att testa att ett pixel-SDK från tredjepart har lästs in måste du först hämta koden för SDK-URL:en från din tredjepartsleverantör så att du kan lägga till den i din pixelkod. Kontakta din tredjepartsleverantör för att få support.

Steg:

Gå till Inställningar > Kundhändelser från din Shopify-admin.
Klicka på den anpassade pixel som du vill testa.
Ange det pixel-SDK som du fick från din tredjepartsleverantör i slutet av din pixelkod i avsnittet Kod.
Klicka på Spara.
Besök din webbshop och kontrollera sedan din nätverksflik för att se till att SDK-URL:en från tredjepartsleverantören laddas ner.
Valfritt: Om pixel-SDK:t från tredjepart inte läses in, kontrollera om det finns JavaScript-runtimefel i sandlådan. I Chrome kan du till exempel välja en viss iFrame att granska konsolloggar för, och sedan begränsa loggarna till den specifika pixel du testar. Mer information om hur du kontrollerar JavaScript-runtimefel i Chrome finns i Chromes dokumentation Felsök JavaScript.

Om pixel-SDK:t från tredjepart inte läses in under testningen, kontakta din tredjepartsleverantör för support.

Övrig testning av pixel-SDK från tredjepart

Se dokumentationen från din tredjepartsleverantör för att testa om ett pixel-SDK från tredjepart initieras eller samlar in händelser.

För att testa om ett pixel-SDK samlar in händelser kan du bli ombedd att kontrollera din webbläsares nätverksflik. Stegen för att kontrollera nätverksfliken beror på vilken webbläsare du använder. Om du till exempel vill lära dig hur du kontrollerar nätverksfliken i en Google Chrome-webbläsare kan du läsa dokumentationen Inspect network activity från Chrome for Developers.