Hoe je Klaviyo onsite tracking toevoegt met Google Tag Manager

Wat je leert

Lees hoe je Klaviyo's tracking snippets op je site toevoegt met Google Tag Manager. Sommige site-eigenaren gebruiken Google Tag Manager als één plek om alle websnippets van derden te beheren die ze aan hun site moeten toevoegen. Klaviyo's tracking op de site valt in deze categorie en kan worden toegevoegd en beheerd via Google Tag Manager.

Voordat je van start gaat

Google Tag manager instellen

Als je al een Google Tag Manager-account hebt gemaakt, kun je deze stappen overslaan en naar het gedeelte over een tag maken gaan.
1. Maak een Google Tag Manager-account.
2. Voeg de installatiescripts toe aan je site.

Als je nog niet bekend bent met Google Tag Manager, bekijk dan hun documentatie over het instellen van een account en het toevoegen van de installatiescripts aan je site.

Een nieuwe tag maken

1. Maak in de workspace voor je site een nieuwe trigger aan voor je Klaviyo Active on Site -tracking. We raden aan om een aparte trigger aan te maken voor je Active on Site - en Viewed Product -tracking. Dit komt doordat Viewed Product -tracking alleen wordt geactiveerd op je productpagina's, terwijl actief on Site -tracking op elke pagina van je site moet worden geactiveerd.
2. Selecteer Aangepaste HTML als tagtype.

3. Om je Actief op site -snippet in Klaviyo te vinden, klik je op je accountmenu en selecteer je Integraties.
4. Klik vanaf hier op de knop Webtracking instellen in de rechterbovenhoek.

6. Plak vanuit je Google Tag Manager je Klaviyo Active on Site -snippet in het HTML-vak.

7. Stel je trigger zo in dat deze afgaat bij een paginaweergave voor alle pagina's. Zo weet je zeker dat je Actief op site -snippet afgaat wanneer klanten een pagina op je site bekijken.

8. Sla je nieuwe tag op. Hiermee rond je het toevoegen van je Active on Site -tracking-snippet af met Google Tag Manager.

Je kunt je snippet Viewed Product op dezelfde manier toevoegen. Pas de trigger aan zodat deze alleen wordt geactiveerd op pagina's met je producten. Op sommige sites kun je dit doen door de trigger te beperken zodat deze alleen afgaat op pagina's waar de URL het woord "product" bevat.

Tracking op je site testen

1. Navigeer naar je website.
2. Voeg het volgende toe aan het einde van de URL:

?utm_email=klaviyogreen@gmail.com

Je kunt "klaviyogreen@gmail.com" vervangen door je eigen e-mailadres. Druk op enter om de pagina opnieuw te laden.

3. Navigeer daarna in je Klaviyo-account naar Dashboard > Activiteitenfeed. Als je onsite tracking correct is geïnstalleerd, zie je bovenaan je activiteitenfeed een nieuwe gebeurtenis Actief op site van het e-mailadres dat je hierboven in de URL-parameter hebt ingevoerd.

Als je moeite hebt om je Viewed Product -event te laten afvuren, controleer dan of je tags zijn ingesteld om in een specifieke volgorde af te vuren. Je wilt altijd dat je Active on Site -snippet afvuurt vóór je Viewed Product -snippet.

Als je een foutmelding krijgt wanneer je één van de tracking-snippets probeert op te slaan in Google Tag Manager, moet je de snippets rechtstreeks in je site plakken.

Google Tag Manager gebruiken op Shopify

Bij Shopify raden we je aan om, in plaats van Google Tag Manager te gebruiken, Klaviyo onsite tracking in te schakelen via de app-embed van Klaviyo in Shopify. Met de app-embed schakel je zowel Active on Site - als Viewed Product -tracking in, op voorwaarde dat dit is aangezet en dat de instelling Viewed Product is aangevinkt op de pagina met integratie-instellingen. Onze Shopify-integratie maakt ook Submitted Search, Viewed Collection en Added to Cart mogelijk via de instelling Track behavioral events.

Als je in plaats daarvan onsite tracking via Google Tag Manager wilt toevoegen, zorg er dan voor dat je eerst de app-embed uitschakelt. Gebruik daarna het onderstaande fragment.

"Collections" zijn niet beschikbaar via de AJAX API van Shopify, dus Shopify-producttags (Tags) worden in plaats daarvan vastgelegd in de snippet hieronder.

<script type="text/javascript"> 
//Initialize the Klaviyo object on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script type="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];
product_handle = location.href.split( '/' ).pop().split( '?' )[0];
fetch('/products/'+product_handle+'.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  klaviyo.track("Viewed Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Extra hulpbronnen