Back to docs

Links

Conversiepixel op Shopify

Installeer de Styrar-conversiepixel op Shopify met een Custom Pixel.

ClaudeChatGPTCursor

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.

Later: automatische setup met de Styrar Shopify-app

Wanneer de Styrar Shopify-app beschikbaar is en op je winkel is geïnstalleerd (en gekoppeld aan je Styrar-account), plaatst Styrar de conversiepixel voor je onder Instellingen → Customer events. Je hoeft dan geen Custom Pixel-code te plakken en api.styrar.com niet handmatig toe te staan.

Tot die tijd gebruik je de Custom Pixel-stappen hieronder.

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.

Verwant