Come aggiungere il tracciamento onsite di Klaviyo usando Google Tag Manager

Cosa imparerai

Scopri come aggiungere al tuo sito gli snippet di tracciamento onsite di Klaviyo usando Google Tag Manager. Alcuni proprietari di siti usano Google Tag Manager come punto unico per gestire tutti gli snippet web di terze parti che devono aggiungere al proprio sito. Il tracciamento onsite di Klaviyo rientra in questa categoria e può essere aggiunto e gestito tramite Google Tag Manager.

Prima di iniziare

Configurazione di Google Tag Manager

Se hai già creato un account Google Tag Manager, puoi saltare questi passaggi e andare alla sezione su creare un tag.
1. Crea un account Google Tag Manager.
2. Aggiungi gli script di installazione al tuo sito.

Se non hai mai usato Google Tag Manager, consulta la relativa documentazione su come configurare un account e aggiungere gli script di installazione al tuo sito.

Creazione di un nuovo tag

1. All’interno dell’area di lavoro del tuo sito, crea un nuovo trigger per il tracciamento Klaviyo Active on Site. Ti consigliamo di creare un trigger separato per il tracciamento Active on Site e Viewed Product. Questo perché il tracciamento Viewed Product si attiverà solo nelle pagine prodotto, mentre il tracciamento Active on Site dovrebbe attivarsi in ogni pagina del tuo sito.
2. Seleziona HTML personalizzato come tipo di tag.

3. Per trovare il tuo snippet Active on Site in Klaviyo, fai clic sul menu dell’account e seleziona Integrazioni.
4. Da qui fai clic sul pulsante Configura il tracciamento web in alto a destra.

6. In Google Tag Manager, incolla lo snippet Active on Site di Klaviyo nella casella HTML.

7. Imposta l’attivazione in modo che si verifichi su una visualizzazione di pagina per tutte le pagine. Questo garantisce che il tuo snippet Active on Site venga attivato ogni volta che i clienti visualizzano una pagina del tuo sito.

8. Salva il nuovo tag. Così completi l’aggiunta del tuo snippet di tracciamento Active on Site utilizzando Google Tag Manager.

Puoi aggiungere il tuo snippet Viewed Product usando lo stesso metodo. Modifica il trigger in modo che si attivi solo sulle pagine che includono i tuoi prodotti. Su alcuni siti, puoi farlo limitando il trigger in modo che si attivi solo sulle pagine in cui l'URL include la parola "product".

Testa il monitoraggio sul sito

1. Vai al tuo sito web.
2. Aggiungi quanto segue alla fine dell’URL:

?utm_email=klaviyogreen@gmail.com

Puoi sostituire "klaviyogreen@gmail.com" con il tuo indirizzo e-mail. Premi invio per ricaricare la pagina.

3. Poi, nel tuo account Klaviyo, vai a pannello di controllo > feed attività. Se il tracciamento onsite è installato correttamente, vedrai un nuovo evento Active on Site in cima al tuo feed delle attività dall’e-mail che hai inserito nel parametro URL qui sopra.

Se hai difficoltà a far attivare l’evento Viewed Product, assicurati che i tuoi tag siano configurati per attivarsi in un ordine specifico. È sempre meglio fare in modo che lo snippet Active on Site si attivi prima dello snippet Viewed Product.

Se ricevi un errore quando provi a salvare uno degli snippet di tracciamento in Google Tag Manager, dovrai incollare gli snippet direttamente nel tuo sito.

Uso di Google Tag Manager su Shopify

Con Shopify, invece di usare Google Tag Manager, ti invitiamo ad abilitare il tracciamento onsite di Klaviyo tramite l’incorporamento dell’app di Klaviyo in Shopify. L’incorporamento dell’app abilita sia il tracciamento Active on Site sia Viewed Product, a condizione che sia attivato e che l’impostazione Viewed Product sia selezionata nella pagina delle impostazioni di integrazione. La nostra integrazione con Shopify abilita anche Submitted Search, Viewed Collection e Added to Cart tramite l’impostazione Track behavioral events.

Se invece vuoi aggiungere il tracciamento onsite tramite Google Tag Manager, assicurati prima di disattivare l’incorporamento dell’app. Quindi, usa lo snippet qui sotto.

"Raccolte" non è disponibile tramite l’API AJAX di Shopify, quindi al suo posto vengono acquisiti i tag dei prodotti Shopify (tag) nello snippet qui sotto.

<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">
//Viewed Product
var klaviyo = window.klaviyo || [];
product_handle = location.href.split( '/' ).pop().split( '?' )[0];
fetch('/products/'+product_handle+'.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  klaviyo.track("Viewed Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Risorse aggiuntive