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

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.

Op markten die zijn geconfigureerd om toestemming te vragen, zoals de Europese Economische Ruimte (EER) en het Verenigd Koninkrijk, worden webpixels alleen uitgevoerd wanneer websitebezoekers de machtigingen hebben opgegeven die vereist zijn in de pixelconfiguratie. Nieuwe pixels vereisen standaard de machtigingen Marketing en Analytics.

Op dezelfde manier worden pixels die zijn geconfigureerd als gegevensverkoop niet uitgevoerd voor klanten die zich hebben afgemeld voor de verkoop of het delen van gegevens, tenzij de pixel beperkt gegevensgebruik ondersteunt.

Ontwikkelaars van aangepaste pixels kunnen meer informatie vinden over het verzamelen en registreren van toestemming.

Elke pixel heeft mogelijk een andere naam voor elke doelstelling. Raadpleeg de pixeldocumentatie van externe partijen om erachter te komen hoe ze verschillen van 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,
  });
});
Zat het antwoord dat je zocht er niet bij? Wij helpen je graag verder.