Hoe je Klaviyo.js handmatig installeert voor Shopify-winkels

Wat je leert

Leer hoe je handmatig Klaviyo’s Active on Site -trackingfragment installeert, ook wel bekend als Klaviyo’s onsite JavaScript of Klaviyo.js, in je Shopify-winkel. Doe dit alleen als je heel veel webverkeer hebt of als je site om een andere reden last heeft van een trage laadtijd (hoewel Klaviyo onlangs de laadtijden heeft verbeterd en dus mogelijk niet de oorzaak is). Anders raden we aan om Klaviyo.js te installeren door Klaviyo’s Shopify-app-embed in te schakelen.

Voordat je van start gaat

Als je ervoor kiest om Klaviyo.js handmatig te installeren en dit eerder had ingeschakeld via Klaviyo's app-embed, moet je eerst de app-embed uitschakelen in de thema-instellingen van Shopify.

Installeer Klaviyo.js op je Shopify-winkel

1. Kopieer het onderstaande codefragment:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

1. Zorg ervoor dat je in het codefragment PUBLIC_API_KEY vervangt door jouw zescijferige Klaviyo Public API-sleutel.
2. Als je Klantaccounts voor je winkel hebt ingeschakeld, voeg je een extra script toe om je klanten te identificeren met het e-mailadres waarmee ze inloggen op je winkel. De volledige set scripts ziet er als volgt uit:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
<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">
//Customer accounts
var klaviyo = window.klaviyo || [];
if ("{{ customer.email }}") {klaviyo.identify({"$email" : "{{ customer.email }}"})};
</script>

1. Klik vanuit je Shopify-beheerder op Online Store > Themes. Klik in het dropdownmenu op Edit Code.
   

2. Zoek naar de bestanden waaraan je het snippet wilt toevoegen en klik erop om het in de editor te openen. Je kunt het snippet toevoegen aan alle paginatemplates waar je Klaviyo-formulieren en tracking op de bijbehorende pagina's wilt inschakelen.
3. Scrol naar de onderkant van het bestand en plak je snippet onder de andere code.
   

4. Klik op Opslaan.

Test je actief op website-tracking

Om te testen of je Actief op site -tracking correct is ingesteld, volg je deze stappen:

1. Ga naar je website.
2. Voeg op je homepage het volgende toe aan het einde van de URL, waarbij je example@gmail.com vervangt door je e-mailadres:
   ?utm_email=example@gmail.com

3. Laad de pagina opnieuw.
4. Zoek in Klaviyo naar je e-mailadres.
   

Je zou nu moeten zien dat er een Klaviyo-profiel voor je is aangemaakt (als dat nog niet bestond) en dat deze activiteit is bijgehouden in je activiteitenfeed.

Nu je Klaviyo.js hebt geïnstalleerd, kun je tracking voor actief op site, Klaviyo-aanmeldingsformulieren en meer gebruiken.

Extra hulpbronnen