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.

Opmerking

Voordat je een aangepaste pixel kunt aanmaken, is het raadzaam beschikbare apps te beoordelen op verbeterde stabiliteit, beveiliging en prestaties. Maar als je geen app kunt vinden die aan jouw wensen voldoet, kun je een aangepaste pixel aanmaken.

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:

• risico's van pixels
• beperkingen van de sandbox voor Shopify-pixels
• de sandbox-API voor Shopify-pixels gebruiken
• schema voor tracking van klantgebeurtenissen

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

Opmerking

Dit is een uitgebreide tutorial en wordt niet ondersteund door Shopify. Als je hulp nodig hebt bij het toevoegen van een aangepaste pixel, kun je een Shopify-partner inhuren.

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

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Mogelijk zie je pixels die zijn geladen met script src=. HTML wordt niet ondersteund in de pixels van Shopify, dus vervang script src= 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 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');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

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

Abonneren op 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.

Toestemming configureren

Webpixels worden alleen uitgevoerd wanneer bezoekers toestemming hebben gegeven voor marketing- en analytics-doeleinden in markten waar jij hebt geconfigureerd dat toestemming is vereist. Elke pixel heeft mogelijk een andere naam voor elke doelstelling. Raadpleeg de pixeldocumentatie om te begrijpen hoe deze overeenkomt met de definities van Shopify.

Zo komen de marketing- en analytics-doeleinden bijvoorbeeld overeen met de toestemmingsmodus van Google:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Voorbeeld van een aangepaste pixel

Hieronder zie je een voorbeeld van de code voor een Meta-pixel. De pixelcode varieert al naargelang de externe serviceprovider en de gebeurtenissen die je wilt volgen. Raadpleeg de referentie voor klantgebeurtenissen voor een lijst met beschikbare gebeurtenissen.

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", (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", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (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", (event) => {
  fbq('track', 'AddPaymentInfo');
});

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

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