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 disabilitare l'app embed nelle impostazioni del tema Shopify.

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 a sei cifre.
2. Se hai abilitato gli account cliente per il tuo negozio, aggiungi uno script aggiuntivo per identificare i clienti con l'indirizzo e-mail che usano per accedere al tuo negozio. Il set completo di script sarà simile al seguente:

<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. Dall'Amministratore di Shopify, clicca su Negozio online > Temi. Nel menu a discesa, clicca su Modifica codice.
   

2. Cerca i file a cui vuoi aggiungere lo snippet e clicca per aprirli nell'editor. Puoi aggiungere lo snippet a qualsiasi modello di pagina in cui vuoi abilitare i moduli e il tracciamento di Klaviyo nelle pagine corrispondenti.
3. Scorri fino alla fine del file e incolla il tuo snippet di codice sotto l'altro codice.
   

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 sul tuo sito web.
2. Sulla tua homepage, aggiungi quanto segue alla fine dell'URL, sostituendo example@gmail.com con il tuo indirizzo e-mail:
   ?utm_email=example@gmail.com

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

Dovresti riuscire a vedere che è stato creato un profilo Klaviyo per te (se non ne esisteva già uno) e che questa attività è stata tracciata nel feed di attività.

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

Risorse aggiuntive