Så här installerar du Klaviyo.js manuellt för Shopify-butiker

Du kommer att lära dig

Läs om hur du installerar Klaviyos spårningssnutt för Aktiv på webbplatsen manuellt, även känd som Klaviyos onsite JavaScript eller Klaviyo.js, i din Shopify-butik. Du bör bara göra detta om du har mycket hög webbtrafik eller om din webbplats har lång laddningstid av någon annan anledning (även om Klaviyo nyligen har förbättrat laddningstiderna och därför kanske inte är orsaken). Annars rekommenderar vi att du installerar Klaviyo.js genom att aktivera Klaviyos Shopify-appinbäddning.

Innan du börjar

Om du väljer att installera Klaviyo.js manuellt och tidigare hade det aktiverat via Klaviyo appinbäddning måste du först inaktivera appinbäddningen i inställningarna för ditt Shopify-tema och spara ändringen.

Installera Klaviyo.js i din Shopify-butik

1. Kopiera kodsnippet nedan:

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

1. I kodsnippeten ska du se till att ersätta PUBLIC_API_KEY med din 6 tecken långa Klaviyo Public API-nyckel (webbplats-ID).
2. Om du har aktiverat kundkonton för din butik använder du hela uppsättningen skript nedan i stället för den första kodsnutten för att identifiera inloggade kunder med deras e-postadress. Ersätt PUBLIC_API_KEY i den här versionen med din offentliga API-nyckel också:

<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. Öppna kodredigeraren för ditt Shopify-tema med hjälp av Shopifys instruktioner för att redigera temakod.

2. Öppna Liquid-mallen eller -sektionen för de sidor där du vill ha Klaviyo-formulär och spårning. Om en sida använder en JSON-mall ska du lägga till snippet:en i en Liquid-sektion som den mallen refererar till, inte i JSON-filen. Se Shopifys dokumentation om JSON-mallar för mer information.
3. Klistra in ditt kodavsnitt nedan under den befintliga HTML-koden i Liquid-filen, utanför alla {% schema %}-, {% javascript %}- eller {% stylesheet %} -block. Inkludera Klaviyo.js bara en gång på varje sida.

4. Klicka på Spara.

Testa din Aktiv på webbplats-spårning

För att testa att din Aktiv på webbplatsen -spårning är korrekt inställd följer du dessa steg:

1. Gå till en sida i din butik där du har installerat kodsnutten. Om din butik kräver samtycke till spårning för ditt besök ska du ge det innan du testar.
2. På den sidan lägger du till följande i slutet av URL:en och ersätter example@gmail.com med din e-postadress:
   ?utm_email=example@gmail.com
   
   Om URL:en redan innehåller ett frågetecken (?), lägger du till &utm_email=example@gmail.com i stället och använder din e-postadress.

3. Läs in sidan igen.
4. Sök på Klaviyo efter din e-postadress och öppna din profil.
   

Du bör se en Klaviyo-profil för din e-postadress (skapad om det inte redan fanns en). I Aktivitetsloggen letar du efter en Aktiv på webbplatsen -händelse för ditt testbesök.

Nu när du har installerat Klaviyo.js, kan du använda spårning med Aktiv på webbplatsen, Klaviyos registreringsformulär och mer.

Ytterligare resurser