Aangepaste pixels toevoegen

Als er geen app is om de specifieke klantgebeurtenissen te volgen waarvoor je gegevens wilt verzamelen, kun je een aangepaste pixel toevoegen die in een Lax sandbox-omgeving wordt uitgevoerd.

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

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

Pixelcode van derden 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 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. Houd er rekening mee dat pixels van bedrijf tot bedrijf iets zullen verschillen.

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

Abonneren op standaardgebeurtenissen

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.

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Een aangepaste pixel toevoegen

Voordat je een aangepaste pixel toevoegt, verwijder je bestaande pixels om ervoor te zorgen dat klantgebeurtenissen niet dubbel worden geteld. Bestaande pixelcode moet handmatig verwijderd worden van elke plaats waar deze voorkomt, zoals theme.liquid, checkout.liquid (alleen Plus-merchants) en in andere checkout-scripts.

  1. Ga in het Shopify-beheercentrum naar Instellingen > Klantgebeurtenissen.
  2. Geef je pixel een unieke naam. Als je de naam van een al bestaande aangepaste pixel invoert, wordt je gevraagd je pixel een andere naam te geven.
  3. Klik op Pixel toevoegen om de gebeurtenis-editor te openen.
  4. Plak de JavaScript-pixel van derden in het venster Code.
  5. Voeg de gebeurtenissen toe die je wilt volgen in het juiste schema.
  6. Optioneel: klik op Meer acties om de naam van de pixel te bewerken of om informatie over het inhuren van een Shopify Expert te bekijken voor hulp bij je aangepaste pixels.
  7. Klik op Opslaan om de aangepaste pixel op te slaan. Als je klaar bent om de aangepaste pixel te koppelen, kun je op Pixel koppelen klikken om de opgegeven gebeurtenissen te volgen.

Een aangepaste pixel koppelen

Wanneer je een aangepaste pixel hebt toegevoegd, koppel je deze aan je winkel.

  1. Klik op Aangepaste pixels op de pagina Klantgebeurtenissen in het Shopify-beheercentrum.
  2. Aangepaste pixels die momenteel niet zijn gekoppeld, worden weergegeven onder de kop Losgekoppelde pixels. Klik op Verbinden op de regel van de desbetreffende aangepaste pixel.
  3. Lees de servicevoorwaarden van Shopify door. Als je pixel aan de servicevereisten voldoet, klik je op Verbinden.

Voorbeelden van aangepaste pixels

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

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

Aangepaste pixels loskoppelen

Als je de gebeurtenissen waarvoor je een aangepaste pixel hebt toegevoegd niet meer wilt volgen, ontkoppel je de pixel handmatig van je onlinewinkel.

Stappen:

  1. Klik op Aangepaste pixels op de pagina Klantgebeurtenissen in het Shopify-beheercentrum.
  2. Aangepaste pixels die nu gekoppeld zijn, worden boven aan de lijst met aangepaste pixels weergegeven. Klik op Loskoppelen op de regel van de desbetreffende aangepaste pixel. Als je de pixel loskoppelt, wordt deze niet verwijderd.

Aangepaste pixels verwijderen

Als je een aangepaste pixel niet meer nodig hebt, kun je deze verwijderen.

Stappen:

  1. Klik op Aangepaste pixels op de pagina Klantgebeurtenissen in het Shopify-beheercentrum.
  2. Klik op de knop ... op de regel van de desbetreffende aangepaste pixel.
  3. Klik op Verwijderen. Bevestig het verwijderen en de aangepaste pixel wordt uit de pixelmanager verwijderd.

Het verwijderen van een aangepaste pixel kan niet ongedaan worden gemaakt. Zorg er dus voor dat je de juiste pixel verwijdert.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis