> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify web pixels configureren

> Conversietracking instellen met Web Pixels bij post-purchase upsells

[Shopify Web Pixels](https://help.shopify.com/en/manual/promoting-marketing/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

<div id="app-web-pixels">
  # App Web Pixels
</div>

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

<div id="custom-web-pixels">
  # Custom Web Pixels
</div>

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](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks) voordat je verdergaat.

Als je specifiek Google Tag Manager gebruikt, biedt Shopify [handige documentatie om deze migratie uit te voeren](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial).

Er zijn 3 kernstappen voor het maken van een custom pixel voor conversietracking.

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

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. De JavaScript-SDK van de derde partij voorbereiden
</div>

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](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk) 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.

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. Conversietracking instellen met web pixels
</div>

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](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

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,  
  });  
});
```

<div id="3-connecting-your-custom-pixel">
  ## 3. Je custom pixel koppelen
</div>

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.

1. Ga naar Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. Voer een naam in voor je custom pixel.
2. Plak je custom pixelcode in de sectie "Code".
3. Zorg dat de privacyinstellingen voor klanten correct zijn geconfigureerd.
4. Klik op "Save" bij je custom pixel.
5. Klik op "Connect" om je custom pixel live te zetten!