Shopify Web Pixels zijn Shopify’s oplossing voor het volgen van aankoopgegevens, zoals conversiepercentages. Er zijn twee primaire manieren waarop je ermee te maken krijgt:

App Web Pixels
Custom Web Pixels

App Web Pixels

Sommige app-pixels (bijv. Omega Facebook Pixel) integreren rechtstreeks met Shopify Web Pixels. Deze apps vereisen geen verdere configuratie om met Aftersell te werken.

Custom Web Pixels

Custom pixels maken maatwerkoplossingen mogelijk als er geen app-pixel op de Shopify-marktplaats te vinden is die aan je behoeften voldoet. Hieronder lees je hoe je bestaande trackingscripts van de bestelstatuspagina omzet naar custom pixels. Let op de mogelijke risico’s van custom pixels voordat je verdergaat. Als je specifiek Google Tag Manager gebruikt, biedt Shopify handige documentatie om deze migratie uit te voeren. Er zijn 3 kernstappen voor het maken van een custom pixel voor conversietracking.

De JavaScript-SDK van de derde partij voorbereiden
Conversietracking instellen met web pixels
Je custom pixel koppelen

1. De JavaScript-SDK van de derde partij voorbereiden

Verwijder alle HTML uit de aangeleverde pixelcode. JavaScript die via een HTML-<script>-tag wordt geladen, moet in plaats daarvan via een JavaScript-only aanpak worden geladen. Dit proces wordt hier in meer detail behandeld. Een voorbeeld met Google Tag Manager Originele pixelcode:

<!-- Global site tag (gtag.js) - Google Analytics -->  
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>  
<script>  
  window.dataLayer = window.dataLayer || [];  
  function gtag(){dataLayer.push(arguments);}  
  gtag('js', new Date());  
  gtag('config', ''YOUR_PIXEL_ID'');  
</script>

Na het verwijderen van HTML en het herschrijven van de <script>-tags:

const script = document.createElement('script');  
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');  
script.setAttribute('async', '');  
document.head.appendChild(script);  
  
window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  
gtag('js', new Date());  
gtag('config', 'YOUR_PIXEL_ID');

Merk op dat de pixel-SDK van Google niet automatisch gegevens verzendt vanuit een Shopify custom pixel. Om gegevens te verzenden, moet je je abonneren op events.

2. Conversietracking instellen met web pixels

Om conversies te volgen met custom pixels, abonneer je je op het checkout_completed-event dat Shopify aanbiedt. Dit event wordt geactiveerd op de post-purchase pagina, als die aan je klant wordt getoond, of anders op de bedankpagina. Dit event wordt in beide gevallen slechts één keer geactiveerd, dus er is geen extra logica nodig om te voorkomen dat een aankoop dubbel wordt geteld.

analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});

Gebruik deze referentie om te zien welke gegevens je uit het event kunt ophalen. Shopify checkout_completed event Een voorbeeld van een custom Meta-pixel Trackingcode die wordt geactiveerd wanneer een checkout is voltooid:

!function(f,b,e,v,n,t,s)  
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?  
n.callMethod.apply(n,arguments):n.queue.push(arguments)};  
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';  
n.queue=[];t=b.createElement(e);t.async=!0;  
t.src=v;s=b.getElementsByTagName(e)[0];  
s.parentNode.insertBefore(t,s)}(window, document,'script',  
'https://connect.facebook.net/en_US/fbevents.js');  
  
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party  
fbq('init', YOUR_PIXEL_ID);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});

3. Je custom pixel koppelen

Voordat je een custom pixel toevoegt, verwijder of wijzig je bestaande pixels om te voorkomen dat klantevents dubbel worden geteld. Bestaande pixelcode moet handmatig worden verwijderd van elke plek waar die staat, zoals theme.liquid, checkout.liquid (alleen Plus-merchants) en de Additional scripts in je checkout-instellingen. Zodra dat is gedaan, volg je deze stappen om een custom pixel aan je winkel te koppelen.

Ga naar Settings > Customer Events > Custom Pixels > Add Custom Pixel
1. Voer een naam in voor je custom pixel.
Plak je custom pixelcode in de sectie “Code”.
Zorg dat de privacyinstellingen voor klanten correct zijn geconfigureerd.
Klik op “Save” bij je custom pixel.
Klik op “Connect” om je custom pixel live te zetten!

Aan de slag

Startpagina

Best practices

Post-purchase upsells

Checkout-upsells (Shopify Plus)

Bedankpagina

Upsells op de productpagina

Rokt Thanks

Strategieën

Analytics en tracking

Integraties

Aftersell MCP

Facturering en account

Probleemoplossing

Shopify web pixels configureren

App Web Pixels

Custom Web Pixels

1. De JavaScript-SDK van de derde partij voorbereiden

2. Conversietracking instellen met web pixels

3. Je custom pixel koppelen

​App Web Pixels

​Custom Web Pixels

​1. De JavaScript-SDK van de derde partij voorbereiden

​2. Conversietracking instellen met web pixels

​3. Je custom pixel koppelen

App Web Pixels

Custom Web Pixels

1. De JavaScript-SDK van de derde partij voorbereiden

2. Conversietracking instellen met web pixels

3. Je custom pixel koppelen