Conversiepixel op Shopify

Shopify ondersteunt het plakken van een rauwe <script>-tag in de checkout niet meer — tracking van derden gaat via Custom Pixels, een sandboxomgeving gebouwd op Shopify's Customer Events API. Deze gids laat zien hoe je de Styrar-conversiepixel inbouwt in een custom pixel.

De sandbox geeft geen directe DOM-toegang, dus in plaats van Styrar's scripttag in te sluiten, roep je het trackingendpoint rechtstreeks aan met fetch telkens wanneer een Shopify-klantgebeurtenis vuurt.

Setup

1. Ga in je Shopify-admin naar Instellingen → Customer events → Custom pixel toevoegen.

2. Geef het een naam (bijvoorbeeld "Styrar conversions") en voeg code toe zoals deze:

   JavaScript

   analytics.subscribe('checkout_completed', (event) => {
     const url = new URL(window.location.href);
     const clickToken = url.searchParams.get('styrar_ck') ||
       (typeof localStorage !== 'undefined' && localStorage.getItem('styrar_ck'));
     if (!clickToken) return;
   
     fetch('https://api.styrar.com/v1/pixel/track', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         clickToken,
         eventName: 'purchase',
         value: event.data.checkout.totalPrice.amount,
         eventData: { currency: event.data.checkout.totalPrice.currencyCode },
       }),
       keepalive: true,
     });
   });
   

   Abonneer op de gebeurtenis die past bij de conversie waar je in geïnteresseerd bent — checkout_completed, payment_info_submitted, product_added_to_cart, en andere zijn allemaal beschikbaar.

3. Sta netwerktoegang toe. Shopify blokkeert standaard uitgaande verzoeken van custom pixels. Voeg in de instellingen van dezelfde pixel api.styrar.com toe onder Permissions → Connect to third-party servers, anders mislukt het verzoek hierboven stilletjes.

4. Zet de pixel op Actief.

Een opmerking over het clicktoken

Shopify's pixelsandbox kan localStorage niet uitlezen zoals een normale pagina dat kan, dus styrar_ck moet nog in de URL aanwezig zijn (of meegevoerd worden als cart-attribuut) op het moment dat je gebeurtenis vuurt. Als je checkoutflow de queryparameter strippeert voordat checkout_completed vuurt, vang het token dan eerder af — bij page_viewed — en bewaar het als cart-attribuut zodat je het later kunt teruglezen.

Dit gebruikt nog steeds exact hetzelfde publieke, ongeauthenticeerde POST /v1/pixel/track-endpoint als elk ander platform — er is geen Shopify-specifieke app om aan Styrar's kant te installeren.

Verwant

• Conversiepixel — volledige referentie