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 het eerder had ingeschakeld via de app-embed van Klaviyo, moet je eerst de app-embed uitschakelen in de instellingen van je Shopify-thema en de wijziging opslaan.

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 er in het codefragment voor dat je PUBLIC_API_KEY vervangt door je 6 tekens tellende Klaviyo openbare API-sleutel (site-ID).
2. Als je Klantaccounts voor je winkel hebt ingeschakeld, gebruik dan de volledige set scripts hieronder in plaats van het eerste snippet om ingelogde klanten te identificeren met hun e-mailadres. Vervang PUBLIC_API_KEY in deze versie ook door je openbare API-sleutel:

<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. Open de code-editor van je Shopify-thema met Shopify’s instructies voor het bewerken van themacode.

2. Open de Liquid-template of -sectie voor de pagina's waar je Klaviyo-formulieren en tracking wilt. Als een pagina een JSON-template gebruikt, voeg je de snippet toe aan een Liquid-sectie waarnaar die template verwijst, niet aan het JSON-bestand. Zie de documentatie van Shopify over JSON-templates voor meer details.
3. Plak je snippet onder de bestaande HTML in het Liquid-bestand, buiten eventuele {% schema %}-, {% javascript %}- of {% stylesheet %} -blokken. Voeg Klaviyo.js maar één keer toe op elke pagina.

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 een pagina in je winkel waar je het snippet hebt geïnstalleerd. Als je winkel trackingtoestemming vereist voor je bezoek, geef die dan voordat je gaat testen.
2. Voeg op die pagina het volgende toe aan het einde van de URL, waarbij je example@gmail.com vervangt door je e-mailadres:
   ?utm_email=example@gmail.com
   
   Als de URL al een vraagteken (?) bevat, voeg je in plaats daarvan &utm_email=example@gmail.com toe met je e-mailadres.

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

Je zou een Klaviyo-profiel voor je e-mailadres moeten zien (aangemaakt als er nog geen bestond). Zoek in het activiteitenlogboek naar een Actief op site -gebeurtenis voor je testbezoek.

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

Extra hulpbronnen