Så lägger du till Klaviyo-spårning på webbplatsen med Google Tag Manager

Du kommer att lära dig

Läs mer om hur du lägger till Klaviyos spårningssnuttar för webbplatsen på din webbplats med Google Tag Chef. Vissa webbplatsägare använder Google Tag Manager som en gemensam plats för att hantera alla webbplatskodsnuttar från tredje part som de behöver lägga till på sin webbplats. Klaviyos spårning på webbplatsen tillhör den här kategorin och kan läggas till och hanteras via Google Tag Manager.

Innan du börjar

Konfigurera Google Tag Manager

Om du redan har skapat ett Google Tag Manager-konto kan du hoppa över de här stegen och gå till avsnittet om att skapa en etikett.
1. Skapa ett Google Tag Manager-konto.
2. Lägg till installationsskripten på din webbplats.

Om du är ny när det gäller att använda Google Tag Manager kan du läsa deras dokumentation om att skapa ett Konto och lägga till installationsskripten på din webbplats.

Skapa en ny etikett

1. I arbetsytan för din webbplats skapar du en ny utlösare för din Klaviyo- Aktiv på webbplatsen -spårning. Vi rekommenderar att du skapar en separat utlösare för din Aktiv på webbplatsen - och Visade produkt -spårning. Det beror på att spårning av Viewed Product bara utlöses på dina produktsidor, medan spårning av Active on Site ska utlösas på varje sida på din webbplats.
2. Välj Anpassad HTML som etikettyp.

3. För att hitta ditt Aktiv på webbplats -snippet i Klaviyo klickar du på din Kontomeny och väljer Integrationer.
4. Klicka sedan på knappen Konfigurera webbspårning uppe till höger.

6. I din Google Tag Manager klistrar du in din Klaviyo-kodsnutt för Aktiv på webbplatsen i HTML-rutan.

7. Ställ in din utlösare så att den triggas vid en sidvisning för alla sidor. Detta säkerställer att din Active on Site -kodsnutt körs varje gång kunder visar en sida på din webbplats.

8. Spara din nya etikett. Detta slutför att lägga till ditt spårningssnippet för Aktiv på webbplatsen med Google Tag Manager.

Du kan lägga till ditt Viewed Product -snippet med samma metod. Ändra utlösaren så att den bara aktiveras på sidor som innehåller dina produkter. På vissa webbplatser kan detta göras genom att begränsa utlösaren så att den bara aktiveras på sidor där webbadressen innehåller ordet "product".

Testa din webbspårning

1. Gå till din webbplats.
2. Lägg till följande i slutet av webbadressen:

?utm_email=klaviyogreen@gmail.com

Du kan ersätta ”klaviyogreen@gmail.com” med din egen e-postadress. Tryck på Enter för att ladda om sidan.

3. Gå sedan till Instrumentpanel > aktivitetsflöde i ditt Klaviyo-Konto. Om din spårning på webbplatsen är korrekt installerad ser du en ny händelse, Aktiv på webbplatsen, längst upp i ditt aktivitetsflöde från e-postadressen som du angav i URL-parametern ovan.

Om du har problem med att få din Viewed Product -händelse att utlösas ska du se till att dina etiketter är inställda på att utlösas i en specifik ordning. Du vill alltid att ditt Aktiv på webbplatsen -snippet ska aktiveras före ditt Viewed Product -snippet.

Om du får ett fel när du försöker spara någon av spårningssnuttarna i Google Tag Manager måste du klistra in snuttarna direkt på din webbplats.

Använda Google Tag Manager i Shopify

Med Shopify rekommenderas du, i stället för att använda Google etikett Chef, att aktivera Klaviyos spårning på webbplatsen via Klaviyos appinbäddning i Shopify. Appinbäddningen aktiverar både spårning av Active on Site och Viewed Product, förutsatt att den är påslagen och att inställningen Viewed Product är markerad på sidan för integrationsinställningar. Vår Shopify-integration aktiverar även Submitted Search, Viewed Collection och Added to Cart via inställningen Track behavioral events.

Om du i stället vill lägga till spårning på webbplatsen via Google Tag Manager ska du se till att först stänga av appinbäddningen. Använd sedan kodsnutten nedan.

”Samlingar” är inte tillgängliga via Shopifys AJAX API, så Shopify-produkttaggar (etiketter) samlas i stället in i kodsnutten nedan.

<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>

Ytterligare resurser