Code voor aangepaste pixels aanmaken

Let op

Aangepaste pixels zijn een geavanceerde functie waarvoor kennis van JavaScript is vereist. Naleving van de toepasselijke wetgeving, toestemmingen, codebeveiliging, probleemoplossing en updates zijn jouw verantwoordelijkheid. Pixels zijn onderworpen aan de Shopify Servicevoorwaarden.

Het toevoegen en gebruiken van aangepaste pixels wordt niet ondersteund door Shopify. Als je hulp nodig hebt bij het toevoegen of gebruiken van een aangepaste pixel, kun je een Shopify Partner inhuren.

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 aan je Shopify-winkel toevoegen.

Opmerking

Voordat je een aangepaste pixel aanmaakt, kun je het beste de beschikbare apps bekijken voor een betere stabiliteit, beveiliging en prestatie. Als er echter geen app is die aan je behoeften voldoet, kun je een aangepaste pixel aanmaken.

Voorbereidingen voor het aanmaken van een aangepaste pixel

Neem voordat je een aangepaste pixel aanmaakt de volgende informatie door om er zeker van te zijn dat je begrijpt hoe je de pixel moet configureren:

• Risico's van pixels.
• Beperkingen van de pixelsandbox van Shopify.
• De API van de Shopify-pixelsandbox gebruiken.
• Schema voor het volgen van klantgebeurtenissen.

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

• De JavaScript-pixel van de externe partij.
• De gedragsgebeurtenissen die je wilt volgen.
• De toestemmingsinstellingen voor klantprivacy.

De code voor een aangepaste pixel aanmaken

Je bedrijf laten groeien

Dit is een geavanceerde 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 de code voor een aangepaste pixel omvat de volgende stappen:

1. De JavaScript-SDK van de externe partij voorbereiden.
2. Configureer je pixel om klantgebeurtenissen te volgen.
3. Configureer toestemmingsinstellingen voor klantprivacy voor je pixel.

De JavaScript-SDK van de externe partij voorbereiden

De externe service waarmee je werkt, levert je de code die is geïntegreerd met de pixel. Een pixel heeft meestal twee componenten: een JavaScript-SDK en de trackingcode. Alle HTML in de code van de externe service moet worden verwijderd, omdat de Shopify-pixelsandbox 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 de code van Meta hebt verwijderd, houd je de pixel-SDK van Meta en de code om deze te initialiseren over. De trackingcode voor de gebeurtenis PageView 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);

De pixel-SDK van Meta verzendt niet automatisch gegevens vanuit een aangepaste Shopify-pixel. Om gegevens te verzenden, moet je je abonneren op gebeurtenissen.

Je kunt pixels tegenkomen die worden geladen met script src=. HTML wordt niet ondersteund in de pixels van Shopify, dus je moet script src= vervangen door het JavaScript-equivalent.

Hier is een voorbeeld van een Google Analytics-pixel die wordt geladen met script src=:

<!-- 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 je src-attribuut 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');

De pixel-SDK van Google verzendt niet automatisch gegevens van een aangepaste Shopify-pixel. Om gegevens te verzenden, moet je je abonneren op gebeurtenissen.

Klantgebeurtenissen volgen

Nadat je de SDK van de pixel hebt geladen en geïnitialiseerd, moet je er gebeurtenissen aan doorgeven om ze te volgen. Dit doe je door je te abonneren op gebeurtenissen en vervolgens de gebeurtenisgegevens door te geven aan de SDK van de pixel, zodat ze door de externe service worden verwerkt.

Abonneren op standaardgebeurtenissen

Shopify biedt een standaardset met gebeurtenissen, waardoor je er eenvoudig voor kunt zorgen dat je pixel de benodigde gegevens verzamelt.

Je kunt je abonneren op gebeurtenissen met de Shopify Pixels Extension API. Je moet de pixelcode van de externe partij bij de gebeurtenis plaatsen waarop je je abonneert.

Dit is een voorbeeld van de PageView-gebeurtenis voor de pixel van Meta. Houd er rekening mee dat fbq("track") onderdeel is van de code van Meta en dat elk bedrijf een eigen versie heeft waarvoor je hun documentatie moet raadplegen.

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

Sommige gebeurtenissen hebben metagegevens die je aan je pixel kunt doorgeven. Hier is een voorbeeld van het doorgeven van productgegevens aan 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 aanvullende klantgebeurtenissen wilt volgen, bijvoorbeeld wanneer iemand op een knop klikt, kun je aangepaste klantgebeurtenissen toevoegen. Je kunt je op dezelfde manier abonneren op aangepaste gebeurtenissen als op standaardgebeurtenissen. Geef de naam op van de gebeurtenis waarop je je wilt abonneren en geef de informatie door aan de pixel van de externe aanbieder.

Dit is een voorbeeld van hoe een gepubliceerde aangepaste gebeurtenis eruit kan zien 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 je te abonneren op die aangepaste gebeurtenis:

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

Raadpleeg de Shopify Developer Documentation voor meer informatie over aangepaste gebeurtenissen.

Instellingen voor toestemming en gegevensverkoop configureren

Opmerking

Je bent zelf verantwoordelijk voor de naleving van de privacywetgeving en je dient je eigen juridisch adviseur te raadplegen om te bepalen hoe de wetten in jouw regio en de regio waarin je verkoopt van invloed kunnen zijn op je bedrijf. Om producten te verkopen via het Shopify-platform, moet je je houden aan de wetten van het rechtsgebied van je bedrijf en je klanten, de Shopify-servicevoorwaarden, het beleid voor acceptabel gebruik van Shopify en alle andere toepasselijke beleidsregels. Meer informatie over klantprivacy.

In markten die zijn geconfigureerd om toestemming te vereisen, zoals de Europese Economische Ruimte (EER) en het Verenigd Koninkrijk, worden webpixels alleen uitgevoerd wanneer websitebezoekers de vereiste toestemmingen in de pixelconfiguratie hebben verleend.

Standaard vereisen nieuwe aangepaste pixels de toestemmingen Marketing en Analytics. Je kunt in de sectie Klantprivacy > Toestemming van de gegevens van je aangepaste pixel aanpassen welke toestemmingen vereist zijn.

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. Standaard worden nieuwe aangepaste pixels aangemerkt als gegevensverkoop. Je kunt in de sectie Klantprivacy > Gegevensverkoop van de gegevens van je aangepaste pixel aanpassen of verzamelde gegevens worden aangemerkt als gegevensverkoop.

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

Elke pixel kan voor elk doel een andere naam hebben. Raadpleeg de documentatie van de pixel van de externe partij om te begrijpen hoe deze overeenkomt met de definities van Shopify.

Hieronder zie je bijvoorbeeld hoe de doeleinden Marketing en Analytics overeenkomen met de Consent Mode van Google:

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

Voorbeeld van een aangepaste pixel

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

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