Aangepaste pixels testen

Nadat je een aangepaste pixel hebt aangemaakt, moet je deze testen om er zeker van te zijn dat je pixel de gegevens correct verzendt wanneer er events op je site plaatsvinden.

Je kunt de Shopify Pixel Helper gebruiken om te testen of je pixel-events worden geladen en of je je correct hebt geabonneerd op Shopify-events. Met de Shopify Pixel Helper kun je je aangepaste pixel testen in je webshop om de events die in realtime worden ontvangen te bekijken, samen met de gegevens voor die events.

Als je aangepaste pixel kan worden geïntegreerd met een platform van een externe partij dat een eigen pixelhelpertool heeft, kun je de pixelhelper van de externe partij naast de Shopify Pixel Helper gebruiken om te testen of je pixel-events worden verwerkt en ontvangen door het platform van de externe partij. Als je bijvoorbeeld een aangepaste TikTok-pixel aan je winkel toevoegt, kun je zowel de Shopify Pixel Helper als de TikTok Pixel Helper gebruiken om je pixel te testen.

Je kunt de Shopify Pixel Helper in dezelfde browsersessie gebruiken als een pixelhelper van een externe partij om tegelijkertijd events voor beide platforms te testen.

Hier is een aangepast pixelscript dat alle standaardevents naar de sandbox activeert en de eventgegevens in de console logt. De standaardevents zijn zichtbaar in de Shopify Pixel Helper. Daarnaast kun je je abonneren op andere bulkabonnementen, zoals all_events, all_custom_events en all_dom_events, om te ontdekken wat webpixels allemaal te bieden hebben. Ga naar de webpixels-API voor meer informatie.

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

Controleren of een aangepaste pixel is verbonden

Voordat je je aangepaste pixel test, moet je ervoor zorgen dat de aangepaste pixel is verbonden.

Stappen:

  1. Ga vanuit je Shopify-beheercentrum naar Instellingen > Klantevents.

  2. Controleer naast de pixel die je wilt testen of je pixel de status Verbonden weergeeft in de kolom Status.

  3. Als de pixel niet is verbonden, klik je op ... en vervolgens op Verbinden.

Een aangepaste pixel testen met de Shopify Pixel Helper

Nadat je hebt gecontroleerd of je aangepaste pixel is verbonden, kun je de Shopify Pixel Helper gebruiken om te testen of je aangepaste pixel gegevens verzendt en de gegevens van je winkel ontvangt. Je kunt één aangepaste pixel per keer testen.

Stappen:

  1. Ga vanuit je Shopify-beheercentrum naar Instellingen > Klantevents.

  2. Klik op de aangepaste pixel die je wilt testen.

  3. Klik op Testen om de aangepaste pixel op je website te openen om te testen.

  4. Optioneel: afhankelijk van de toestemmingsinstellingen van je winkel en de klantprivacy-instellingen van de aangepaste pixel, wordt in het dialoogvenster Pixelhelper mogelijk de melding Pixel wacht op toestemming weergegeven. Voer een van de volgende handelingen uit om door te gaan met testen:

  5. Bezoek elke pagina waarvoor je de pixel wilt testen om te zien welke events worden geladen en controleer de sectie Ontvangen events in het dialoogvenster Pixelhelper om ervoor te zorgen dat er een geslaagd abonnement op het event is en dat de callbackfunctie is geslaagd:

    • Ga naar een nieuwe pagina om het page_viewed-event te testen.
    • Klik op een product om het product_viewed-event te testen.
    • Voeg een product toe aan je winkelwagen om het product_added_to_cart-event te testen.
    • Ga naar je checkout om het checkout_started-event te testen.
    • Voer je verzendgegevens in bij de checkout om te testen of het checkout_shipping_info_submitted-event het checkout_started-event vervangt.
    • Voltooi de checkout om te testen of het checkout_completed-event het checkout_shipping_info_submitted-event vervangt. Meer informatie over een testbestelling plaatsen.
  6. Klik op Maximize om het dialoogvenster van de pixelhelper uit te klappen en de ontvangen eventgegevens te bekijken.

De sectie Ontvangen events bekijken

Wanneer je in stap 5 test welke events worden geladen, wordt een van de volgende statussen weergegeven in de sectie Ontvangen events van het dialoogvenster Pixelhelper:

  • Een groene stip geeft aan dat er een geslaagd abonnement op het event is en dat de callbackfunctie is geslaagd.
  • Een rode stip geeft aan dat er een geslaagd abonnement op het event is, maar dat de callbackfunctie is mislukt. Meer informatie over het oplossen van problemen met je aangepaste pixel.
  • De pixelhelper geeft niet-onderschepte fouten weer die optreden op het hoogste niveau of in de callbackfunctie. Fouten op het hoogste niveau worden weergegeven wanneer de pixelhelper wordt geladen. Foutmeldingen van callbacks worden weergegeven wanneer je klikt om een event met een rode stip uit te klappen.
  • Het volgende codevoorbeeld bevat een callback-fout en een fout op het hoogste niveau. Afhankelijk van waar de fout op het hoogste niveau zich bevindt, werkt de pixel mogelijk maar gedeeltelijk.
analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Ga naar Problemen met JavaScript oplossen voor meer informatie over het oplossen van JavaScript-fouten.

Problemen met je aangepaste pixel oplossen

Als je pixel niet wordt geladen of geactiveerd tijdens het testen en je de gebeurtenisgegevens en pixelcode al op fouten hebt gecontroleerd, probeer dan de volgende stappen voor probleemoplossing.

Je privacy-instellingen voor klanten controleren

Als je pixel niet wordt geladen of geactiveerd tijdens het testen, kan dit worden veroorzaakt door privacy-instellingen voor klanten.

Ga vanuit je Shopify-beheercentrum naar Instellingen > Klantprivacy om te controleren op privacy-instellingen voor klanten in je Shopify-beheercentrum die mogelijk van toepassing zijn op je sessie. Neem de volgende stappen, afhankelijk van je privacy-instellingen voor klanten:

  • Als je privacy-instellingen voor klanten hebt die toestemming vereisen in jouw regio, zorg er dan voor dat je toestemming hebt gegeven via je cookiebanner.
  • Als je geen privacy-instellingen voor klanten hebt die het laden van de pixel blokkeren, wis dan de cookies van je browser om je cookiebanner opnieuw in te stellen en toestemming te geven.

Als je een tool van een externe partij gebruikt om toestemming te beheren, neem dan contact op met je externe aanbieder voor ondersteuning.

Aanvullende probleemoplossing

Als het nog steeds onduidelijk is of je aangepaste pixel goed is geabonneerd op een klantgebeurtenis, probeer dan de volgende stappen voor probleemoplossing:

  • Wis de cookies van je browser.
  • Als je een standaardgebeurtenis test, bekijk dan de documentatie voor ontwikkelaars van Shopify's beschrijvingen van standaardgebeurtenissen om er zeker van te zijn dat je de vereiste stappen uitvoert om de gebeurtenis te activeren.

Testen met een pixelhelper van een externe partij

Een pixel-SDK (software development kit) bevat de tools voor je pixel om informatie over klantgedrag te verzamelen. Je kunt de pixelhelper van je externe pixelaanbieder gebruiken om het volgende gedrag van je pixel te testen en ervoor te zorgen dat de pixel-SDK naar verwachting werkt:

Testen of een pixel-SDK van een externe partij wordt geladen

De stappen om je netwerktabblad te controleren, zijn afhankelijk van de webbrowser die je gebruikt. Raadpleeg bijvoorbeeld de documentatie Netwerkactiviteit inspecteren van Chrome for Developers voor meer informatie over het controleren van je netwerktabblad in Google Chrome.

Om te testen of een pixel-SDK van een externe partij is geladen, moet je eerst de code van je externe aanbieder voor de SDK-URL ophalen, zodat je deze aan je pixelcode kunt toevoegen. Neem voor ondersteuning contact op met je externe pixelaanbieder.

Stappen:

  1. Ga vanuit je Shopify-beheercentrum naar Instellingen > Klantevents.

  2. Klik op de aangepaste pixel die je wilt testen.

  3. Voeg in de sectie Code de pixel-SDK die je externe aanbieder heeft verstrekt, toe aan het einde van je pixelcode.

  4. Klik op Opslaan.

  5. Bezoek je webshop en controleer vervolgens je netwerktabblad om te controleren of de SDK-URL van de externe aanbieder wordt gedownload.

  6. Optioneel: als de pixel-SDK van de externe partij niet wordt geladen, controleer dan op JavaScript-runtime-fouten in de sandbox. In Chrome kun je bijvoorbeeld een bepaald iFrame selecteren om de consolelogs ervan te bekijken en vervolgens de logs beperken tot de specifieke pixel die je test. Raadpleeg de documentatie Fouten opsporen in JavaScript van Chrome voor meer informatie over het controleren op JavaScript-runtime-fouten in Chrome.

Als de pixel-SDK van de externe partij niet wordt geladen tijdens het testen, neem dan contact op met je externe pixelaanbieder voor ondersteuning.

Andere tests voor de pixel-SDK van externe partijen

Raadpleeg de documentatie van je externe pixelaanbieder om te testen of een pixel-SDK van een externe partij wordt geïnitialiseerd of gebeurtenissen verzamelt.

Om te testen of een pixel-SDK gebeurtenissen verzamelt, wordt je mogelijk gevraagd om het netwerktabblad van je browser te controleren. De stappen om je netwerktabblad te controleren, zijn afhankelijk van de webbrowser die je gebruikt. Raadpleeg bijvoorbeeld de documentatie Netwerkactiviteit inspecteren van Chrome for Developers voor meer informatie over het controleren van je netwerktabblad in een Google Chrome-browser voor Google Chrome.