Aangepaste pixelcode aanmaken

Deze pagina bevat instructies voor het aanmaken van aangepaste pixelcode voor een pixel van een externe partij, zodat je specifieke klantgebeurtenissen kunt volgen. Nadat je de code voor je aangepaste pixel hebt aangemaakt, kun je de pixel toevoegen aan je Shopify-winkel.

Voorbereiden om een aangepaste pixel aan te maken

Lees de volgende informatie goed door om er zeker van te zijn dat je begrijpt hoe je je pixel configureert voordat je een aangepaste pixel aanmaakt:

Wanneer je een aangepaste pixel toevoegt, geef je de volgende gegevens op:

  • de JavaScript-pixel van derden;
  • de gedragingen die je wilt volgen.

Code voor een aangepaste pixel aanmaken

Het aanmaken van code voor een aangepaste pixel bestaat uit de volgende stappen:

  1. Bereid de JavaScript-SDK van derden voor.
  2. Configureer je pixel om klantgebeurtenissen te volgen.

De Javascript-SDK van externe partijen voorbereiden

De service van derden waarmee je werkt, biedt je de code die is geïntegreerd met de pixel. Een pixel heeft meestal twee componenten, een Javascript-SDK en de trackingcode. HTML in de code van derden moet worden verwijderd, omdat de Shopify-pixel-sandbox alleen JavaScript ondersteunt.

Hier is een voorbeeld van een Meta-pixel. Pixels verschillen enigszins per externe partij.

​​<!-- Meta Pixel Code -->
​​<script>
!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');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

Nadat je de HTML uit Meta-code hebt verwijderd, zijn er nog de SDK-pixel en code van Meta om deze te initialiseren. De trackingcode van de PageView-gebeurtenis is ook verwijderd, omdat deze in de volgende stap wordt toegevoegd.

​​!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');
fbq('init', YOUR_PIXEL_ID);

Mogelijk zie je pixels die zijn geladen met script src=. HTML wordt niet ondersteund in de pixels van Shopify, dus vervang dit door het JavaScript-equivalent.

Hier is een voorbeeld van google Analytics-pixel:

<!-- 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>

Het script src= gedeelte kan worden vervangen door het volgende JavaScript-equivalent. Zorg er altijd voor dat het kenmerk src overeenkomt met de HTML-versie:

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');

Klantgebeurtenissen volgen

Na het laden en initialiseren van de pixel-SDK, geef je gebeurtenissen door voor tracking. Dit doe je door je te abonneren op gebeurtenissen en vervolgens de gebeurtenisgegevens door te geven aan de pixel-SDK voor verwerking door de service van een derde.

Abonneren op standaardgebeurtenissen

Shopify biedt een set standaardgebeurtenissen aan, waardoor je er gemakkelijk voor kunt zorgen dat je pixel de juiste gegevens verzamelt.

Je kunt je abonneren op gebeurtenissen met behulp van de Shopify pixelextensie-API. Plaats de pixelcode van derden bij de gebeurtenis waar je een abonnement op wilt.

Dit is een voorbeeld van de PageView-gebeurtenis voor de pixel van Meta. Opmerking: fbq("track") is onderdeel van de code van Meta en elk bedrijf heeft een eigen versie (te vinden in de desbetreffende documentatie).

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Sommige gebeurtenissen hebben metagegevens die je in je pixel kunt doorgeven. Hier is een voorbeeld van het doorgeven van enkele productgegevens naar de ViewContent-gebeurtenis van Meta:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data.productVariant.id],
    content_name: event.data.productVariant.title,
    currency: event.data.productVariant.price.currencyCode,
    value: event.data.productVariant.price.amount,
  });
});

Toekennen aan aangepaste klantgebeurtenissen

Als je extra klantgebeurtenissen wilt volgen, zoals wanneer iemand op een knop klikt, kun je aangepaste klantgebeurtenissen toevoegen. Aangepaste gebeurtenissen kunnen op dezelfde manier worden toegekend als standaardgebeurtenissen. Vermeld de naam van de gebeurtenis die je wilt toekennen en geef de informatie door aan de pixel van de externe serviceprovider.

Dit is een voorbeeld van hoe een gepubliceerde aangepaste gebeurtenis kan worden weergegeven in de Liquid-bestanden van je thema:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Dit is een voorbeeld van hoe je je pixel kunt configureren om deze toe te kennen aan die aangepaste gebeurtenis:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Raadpleeg de documentatie voor ontwikkelaars van Shopify voor meer informatie over aangepaste gebeurtenissen.

Voorbeeld van aangepaste pixels

Hieronder zie je een voorbeeld van de code voor een volledige pixel. Pixelcode varieert afhankelijk van de externe serviceprovider en de gebeurtenissen die je wilt volgen.

Aangepaste Meta-pixel

!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);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data.productVariant.id],
    content_name: event.data.productVariant.title,
    currency: event.data.productVariant.price.currencyCode, 
    value: event.data.productVariant.price.amount,
  });
});

analytics.subscribe("search_submitted", async (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", async (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data.cartLine.merchandise.productVariant.id],
    content_name: event.data.cartLine.merchandise.productVariant.title,
    currency: event.data.cartLine.merchandise.productVariant.price.currencyCode,
    value: event.data.cartLine.merchandise.productVariant.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", async (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", async (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", async (event) => {
  fbq('track', 'Purchase', {
    currency: event.checkout.currencyCode,
    value: event.checkout.totalPrice.amount,
  });
});

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis