Come installare manualmente Klaviyo.js per i negozi Shopify

Cosa imparerai

Scopri come installare manualmente lo snippet di tracciamento Active on Site di Klaviyo, noto anche come JavaScript onsite di Klaviyo o Klaviyo.js, sul tuo negozio Shopify. Dovresti farlo solo se riscontri un traffico web molto elevato o se il tuo sito ha tempi di caricamento lenti per qualsiasi altro motivo (anche se Klaviyo ha recentemente migliorato i tempi di caricamento e quindi potrebbe non essere la causa). In caso contrario, ti consigliamo di installare Klaviyo.js attivando l’embed dell’app Shopify di Klaviyo.

Prima di iniziare

Se scegli di installare manualmente Klaviyo.js e in precedenza lo avevi abilitato tramite l’app embed di Klaviyo, devi prima disattivare l’app embed nelle impostazioni del tema Shopify e salvare la modifica.

Installa Klaviyo.js sul tuo negozio Shopify

1. Copia lo snippet di codice qui sotto:

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

1. Nello snippet di codice, assicurati di sostituire PUBLIC_API_KEY con la tua chiave API pubblica Klaviyo di 6 caratteri (ID sito).
2. Se hai abilitato Account cliente per il tuo negozio, usa l’intero set di script qui sotto invece del primo snippet per identificare i clienti che hanno effettuato l’accesso con il loro indirizzo e-mail. Sostituisci PUBLIC_API_KEY in questa versione anche con la tua chiave API pubblica:

<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. Apri l’editor del codice del tema Shopify seguendo le istruzioni di Shopify per modificare il codice del tema.

2. Apri il modello o la sezione Liquid per le pagine in cui vuoi i moduli Klaviyo e il tracciamento. Se una pagina utilizza un modello JSON, aggiungi lo snippet a una sezione Liquid a cui fa riferimento quel modello, non al file JSON. Per maggiori dettagli, consulta la documentazione sui modelli JSON di Shopify.
3. Incolla lo snippet sotto l'HTML esistente nel file Liquid, al di fuori di qualsiasi blocco {% schema %}, {% javascript %} o {% stylesheet %}. Includi Klaviyo.js una sola volta su ogni pagina.

4. Clicca su Salva.

Testa il tracciamento attivo sul sito

Per verificare che il tuo tracciamento Active on Site sia configurato correttamente, segui questi passaggi:

1. Vai a una pagina del tuo negozio in cui hai installato lo snippet. Se il tuo negozio richiede il consenso al tracciamento per la visita, forniscilo prima del test.
2. In quella pagina, aggiungi quanto segue alla fine dell'URL, sostituendo example@gmail.com con il tuo indirizzo e-mail:
   ?utm_email=example@gmail.com
   
   Se l'URL contiene già un punto interrogativo (?), aggiungi invece &utm_email=example@gmail.com usando il tuo indirizzo e-mail.

3. Ricarica la pagina.
4. Cerca il tuo indirizzo e-mail in Klaviyo e apri il tuo profilo.
   

Dovresti vedere un profilo Klaviyo per il tuo indirizzo e-mail (creato se non ne esisteva già uno). Nel suo registro attività, cerca un evento Attivo sul sito relativo alla tua visita di test.

Ora che hai installato Klaviyo.js, potrai utilizzare il tracciamento Active on Site, i moduli d'iscrizione Klaviyo e altro ancora.

Risorse aggiuntive