Server-side tracking op Shopify: zo werkt het en zo stel je het in

Server-side tracking op Shopify betekent dat elke aankoop vanuit de bestelgegevens van je webshop, verstuurd door een server, bij Meta, TikTok en andere advertentieplatforms terechtkomt en niet alleen vanuit een pixel in de browser van de shopper. Shopify meldt elke betaalde bestelling via een webhook aan de trackingapp, en de app stuurt die naar de conversions API van elk platform, gekoppeld aan de advertentieklik die de shopper binnenbracht.

Deze gids behandelt de Shopify-onderdelen van die flow: de theme app embed en de app proxy, pixels in de checkout, de orders/paid-webhook, bestellingen koppelen, ontdubbeling, toestemming en de installatie in ROASaurus. Voor het algemene idee lees je eerst wat server-side tracking is.

Hoe server-side tracking op Shopify werkt

De klik en de aankoop vinden op verschillende momenten en op verschillende plekken plaats. De klik is alleen zichtbaar in de browser, op de landingspagina. De betaalde bestelling is alleen aan de kant van Shopify zeker, wanneer de betaling is vastgelegd. Server-side tracking legt het eerste vast, wacht op het tweede en voegt ze samen.

De Shopify-onderdelen: app embed, app proxy, pixels en webhooks

Een Shopify-webshop geeft een trackingapp vier plekken om te werken. Elke plek heeft een andere taak en een complete installatie gebruikt ze alle vier.

De theme app embed en de app proxy

Een theme app embed is een blok dat een app aan je thema toevoegt. Je zet het aan in de thema-editor, dus er is geen code om te plakken. De ROASaurus-embed laadt een script op elke pagina. Op de landingspagina leest het click-id's zoals fbclid, ttclid en gclid en de UTM-parameters, en slaat het ze op met een first-party bezoeker-id.

Het script verstuurt zijn events via de app proxy van Shopify. Een app proxy stuurt verzoeken van een pad op je eigen domein, zoals yourstore.com/apps/roasaurus, door naar de server van de app. Voor de browser is dit een verzoek aan je eigen site, wat kan helpen tegen adblockers die bekende trackingdomeinen blokkeren. Shopify verwijdert de Cookie-header uit app proxy-verzoeken en de Set-Cookie-header uit de antwoorden, dus het bezoeker-id reist mee in het event zelf, niet in een cookie.

Customer events en pixels in de checkout

In de checkout van Shopify draaien trackingscripts als pixels in een sandbox, niet in de pagina zelf. Je beheert ze onder Settings › Customer events. Er zijn twee soorten. App pixels komen met een app mee en draaien in een strikte sandbox. Custom pixels worden door de winkeleigenaar toegevoegd en draaien in een minder strikte sandbox, die scripts van derden kan laden, zoals de Meta-pixel.

ROASaurus gebruikt beide. De app pixel wordt ingeschakeld wanneer je de app installeert. Die meldt het begin van de checkout, de contactstap en de voltooide checkout aan ROASaurus. De optionele custom pixel voegt de browserpixels van Meta, TikTok, Snapchat, Pinterest en Reddit toe aan de checkout en verstuurt Google Ads-conversies.

Bestelwebhooks

Een webhook is een bericht dat Shopify naar een app stuurt wanneer er iets in de webshop gebeurt. ROASaurus abonneert zich onder meer op orders/paid en orders/create. De bestelling in de webhook bevat het bestel-id, de waarde, de orderregels, de klantgegevens, de cart- en checkouttokens, de cart attributes en het IP-adres en de browser waarmee de bestelling is geplaatst. Hij komt van de servers van Shopify, dus een adblocker of een gesloten tabblad kan hem niet tegenhouden.

Hoe bestellingen aan advertentieklikken worden gekoppeld

De webhook vertelt ROASaurus dat een bestelling is betaald. Om een bruikbare conversie te versturen, moet ROASaurus ook weten welke bezoeker de bestelling heeft geplaatst, want het bezoekerrecord bevat de click-id's. Het probeert deze koppelingen in volgorde, van de meest directe tot de minst directe:

Cart attributes zijn de reden dat de koppeling bij Shopify direct is. Het zijn sleutel-waardeparen die op de winkelwagen worden opgeslagen, en Shopify kopieert ze naar de bestelling. Een waarde die op de productpagina is geschreven, staat er nog steeds wanneer de webhook binnenkomt, ook als de shopper de bedankpagina vroeg heeft gesloten.

Eén uitzondering: versnelde checkoutknoppen zoals Buy it now slaan de winkelwagen over. ROASaurus raadt aan ze uit te schakelen, zodat Add to cart altijd wordt getrackt. Bestellingen die erdoor worden geplaatst, kunnen nog steeds via het checkouttoken worden gekoppeld.

Eén bestelling, van begin tot eind

Dit gebeurt er bij één bestelling vanuit een Meta-advertentie, met de custom pixel geïnstalleerd:

Wanneer de aankoop wordt verstuurd: orders/paid of orders/create

Welke webhook de aankoop activeert, hangt af van hoe je klanten betalen. Je kiest dit als het checkouttype in Store settings.

ROASaurus houdt elke aankoop kort vast nadat de webhook binnenkomt. In die tijd komt meestal ook het event van de voltooide checkout uit de browser binnen. De pagina-URL, het IP-adres en de user agent daarvan worden dan aan het serverevent toegevoegd, naast de click-id's uit het bezoekerrecord. Bestellingen die Shopify als testbestellingen markeert, worden vastgelegd maar niet naar de advertentieplatforms gestuurd.

Hoe ontdubbeling werkt met de browserpixels

Wanneer de browserpixels naast de serverevents draaien, ontvangt het platform elke aankoop twee keer en moet het er maar één bewaren. Dat doet het met het event-id. ROASaurus geeft beide kopieën van een aankoop hetzelfde id, opgebouwd uit het Shopify-bestel-id: order-6123456789012 voor de bestelling met id 6123456789012. Dit is het lange getal in de admin-URL van de bestelling, niet de bestelnaam zoals #1042. De checkoutpixel gebruikt het voor de Purchase in de browser en de server gebruikt het voor het conversions API-event. Meta bewaart bijvoorbeeld één kopie wanneer de eventnaam en het event-id overeenkomen en beide binnen 48 uur aankomen.

Het event-id werkt alleen tussen events die het meedragen. Verstuurt een andere app dezelfde pixel, dan hebben de events daarvan eigen id's en telt het platform de bestelling opnieuw. Bij Shopify zijn de gebruikelijke oorzaken het kanaal Facebook & Instagram dat aan dezelfde pixel is gekoppeld, de TikTok-app en pixelcode die in theme.liquid is geplakt. In onze gids over dubbele aankoopevents lees je hoe je ze vindt, en Dubbeltelling voorkomen geeft de oplossingen.

Toestemming via de Customer Privacy API van Shopify

De Customer Privacy API van Shopify slaat de cookiekeuze van elke bezoeker op. Je cookiebanner vult die in, of je nu de eigen banner van Shopify gebruikt of een toestemmingsapp die aan de API is gekoppeld. Scripts en pixels kunnen dan aan de API vragen of marketing is toegestaan voor deze bezoeker.

Staat Respect visitor consent aan, wat de standaard is in Store settings, dan vragen het storefront-script en de checkoutpixels van ROASaurus het aan de API voordat ze tracken.

E-mailadressen, telefoonnummers, namen en adressen worden met SHA-256 gehasht voordat ze naar een advertentieplatform worden gestuurd. Nog drie details zijn belangrijk:

• Je banner bepaalt. ROASaurus volgt wat de API meldt. Is de API niet beschikbaar op de pagina, dan behandelt ROASaurus de bezoeker als toestemmend, dus controleer of je banner eraan is gekoppeld.
• De landingspagina blijft bij de bestelling. Shopify slaat het adres van de landingspagina bij elke bestelling op, en dat kan campagnetags en click-id's bevatten. ROASaurus gebruikt het in zijn eigen attributierapporten, ook voor bezoekers die hebben geweigerd, en stuurt het niet naar de advertentieplatforms.
• Het versturen van de bestelling is een juridische beslissing. Of de betaalde bestelling van een bezoeker die heeft geweigerd wel mag worden verstuurd, is een juridische vraag voor je webshop.

In onze gids over Consent Mode v2 en de AVG staan de regels op hoofdlijnen, en Toestemming en privacy geeft de details.

Server-side tracking op Shopify instellen in ROASaurus

Doorloop de installatiestappen in deze volgorde:

1. De app installeren

   Ga naar Add a store, kies Shopify, voer je .myshopify.com-domein in en klik op Install app. Keur de app goed in Shopify. ROASaurus registreert de bestelwebhooks en schakelt zijn app pixel in.

2. De theme app embed inschakelen

   Klik op de pagina Tracking & platforms op Open theme editor, zet de ROASaurus-app embed aan en sla op.

3. Voeg de checkout-pixel toe

   Ga in Shopify admin naar Settings › Customer events en voeg een custom pixel met de naam ROASaurus toe. Stel de permission in op Not required, omdat het ROASaurus-script zelf de marketingkeuze van de bezoeker controleert. Plak het snippet van Tracking & platforms. Je hebt deze pixel nodig voor browserpixels in de checkout en voor Google Ads.

4. Koppel je advertentieplatforms

   Klik op Tracking & platforms op Add pixel voor elk platform, of op Connect with Facebook voor Meta. Laat de optie om ook de browserpixel te laden aan staan als je ontdubbelde browserevents wilt.

5. De webshopinstellingen controleren

   Kies in Store settings je checkouttype en laat Respect visitor consent aan staan als je verkoopt waar toestemming vereist is.

6. Andere afzenders verwijderen

   Verwijder in het kanaal Facebook & Instagram deze pixel uit de instellingen voor het delen van data. Het niveau van datadeling verlagen is niet genoeg, want elk niveau, ook Standard, verstuurt de Meta-pixel vanuit de browser. Verstuurt de TikTok-app dezelfde pixel, stop dat daar dan ook en verwijder pixelcode uit je thema.

Het snippet van de custom pixel ziet er zo uit. Kopieer het uit Tracking & platforms, waar je webshopsleutel al is ingevuld. De Shopify-instelgids bevat dezelfde stappen.

self.tl = this; document.head.appendChild(document.createElement('script')).src = 'https://app.roasaurus.com/c.js?k=YOUR_STORE_KEY';

Hoe je controleert of het werkt

Test met één echte bestelling voordat je op de cijfers vertrouwt:

1. Open je webshop met ?roasaurus=connected aan het eind van de URL. Een melding bevestigt dat het script live is.
2. Plak voor Meta de code uit Events Manager › Test events in het veld Test event code van de pixel.
3. Plaats een echte bestelling met een lage prijs en betaal die daarna terug. Testbestellingen van Shopify worden niet verstuurd.
4. In de Event log staat de serverlevering voor de bestelling per platform als sent, met het antwoord van het platform.
5. Controleer in de testweergave van het platform of de Purchase uit de browser en die van de server hetzelfde event-id delen: order- plus het Shopify-bestel-id.
6. Verwijder daarna de testcode.

Wat server-side tracking op Shopify niet oplost

• Geweigerde toestemming. Bestellingen van bezoekers die marketingcookies hebben geweigerd, worden wel verstuurd, maar zonder click-id, dus de advertentieplatforms kunnen ze minder goed koppelen.
• De cookielimieten van Safari. Een shopper die na meer dan 7 dagen terugkomt, kan op een nieuwe bezoeker lijken. Een first-party trackingsubdomein houdt de verzameling op je eigen domein, maar Safari kan die cookies nog steeds beperken tot 7 dagen.
• Verschillen in attributie. Elk advertentieplatform schrijft verkopen nog steeds toe volgens zijn eigen attributieperioden en modellen. Wil je kanalen met één set regels vergelijken, gebruik dan je eigen attributie.
• Andere apps op dezelfde pixel. Event-id's ontdubbelen alleen events die ze delen.

Wat het wel oplost, is de aankoop die heeft plaatsgevonden maar het advertentieplatform nooit bereikte omdat het browserevent verloren ging. Wat ROASaurus naar elk platform stuurt, lees je bij server-side tracking en de Shopify-integratie.

Bronnen

1. Shopify: Customer Privacy API
2. Shopify: Authenticate app proxies
3. Shopify Help Center: Manage your custom pixels
4. Shopify Help Center: Facebook data sharing
5. Meta: Handling Duplicate Pixel and Conversions API Events

In ROASaurus

• Help: ROASaurus instellen in Shopify
• Shopify-integratie
• Server-side tracking in ROASaurus
• Help: toestemming en privacy

Lees verder