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 etikett Chef-konto och installerat dess container på din webbplats kan du hoppa över de här stegen och gå vidare till avsnittet om att skapa en etikett.
1. Skapa ett Google etikett Chef-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 etikett för din Klaviyo-spårning Aktiv på webbplatsen. Vi rekommenderar att du skapar separata etiketter och utlösare för din spårning Aktiv på webbplatsen och Visade produkt. Det beror på att spårning av Visade produkt bara utlöses på dina produktsidor, medan spårning av Aktiv på webbplatsen ska utlösas på varje sida på din webbplats.
2. Välj Anpassad HTML som etikett.

3. I Klaviyo väljer du Integrationer i sidofältet.
4. Välj Hantera data > Konfigurera webbspårning.

Om du uppmanas att göra det väljer du Konfigurera manuellt och sedan Nästa för att visa din kodsnutt. Om konfigureringsskärmen i stället visar instruktioner för dina e-handelsintegrationer använder du den manuella Aktiv på webbplatsen-kodsnutten och ersätter platshållaren för dess offentliga API-nyckel enligt anvisningarna.

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. Förhandsgranska dina ändringar för att kontrollera att etiketten utlöses, och publicera din container för att göra spårningen aktiv på din webbplats. Att bara spara etiketten publicerar den inte.

Du kan lägga till ditt Visad produkt -snippet med samma metod. Använd kodavsnittet för din e-handelsplattform från spårningsguiden för Visad produkt. Ändra utlösaren så att den bara utlöses på produktdetaljsidor. På vissa webbplatser kan du göra detta genom att begränsa utlösaren så att den bara utlöses på sidor där webbadressen innehåller ordet ”product”. Kontrollera att din regel bara matchar produktdetaljsidor och spara, förhandsgranska och publicera sedan etiketten.

Testa din webbspårning

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

?utm_email=klaviyogreen@gmail.com

Ersätt "klaviyogreen@gmail.com" med din egen e-postadress innan du laddar URL:en. Om URL:en redan innehåller en ? ska du lägga till &utm_email=your-email@example.com i stället. Placera parametern före eventuellt # -fragment och tryck sedan på Enter för att läsa in sidan igen.

3. I Klaviyo går du till Analyser > Mättal, väljer Aktiv på webbplatsen och öppnar Aktivitetsflöde. Leta efter en händelse som är kopplad till e-postadressen du använde i webbadressen.

4. Om du har lagt till spårning för Viewed Product, gå till en produktinformationssida i samma webbläsare. Öppna Analys > Mättal i Klaviyo, välj Visad produkt och kontrollera dess Aktivitetsflöde för ditt testhändelse och produktinformationen.

Om du har problem med att få din Viewed Product -händelse att utlösas, se till att dina etiketter är konfigurerade så att de utlöses i en specifik ordning. Du vill alltid att ditt Aktiv on Site -utdrag utlöses före ditt Viewed Product -utdrag. Följ Googles etikettsekvenseringsinstruktioner för att ange ordningen.

Om Google Etikett Chef rapporterar ett fel när du sparar en kodsnutt kan du kontrollera koden mot Googles krav för anpassad HTML. Om du inte kan lösa felet kan du i stället installera kodsnuttarna direkt på webbplatsen.

Använda Google Tag Manager i Shopify

Med Shopify uppmuntras du att, i stället för att använda Google etikett Chef, aktivera Klaviyo-spårning på plats via Klaviyo appinbäddning i Shopify. Appinbäddningen möjliggör både spårning av Aktiv på webbplatsen och Viewed Product, förutsatt att appinbäddningen är påslagen och att inställningen Add Viewed Product spårning to my site är markerad på sidan för integrationsinställningar. Vår Shopify-integration möjliggör också Submitted Search, Viewed Collection och Added to Cart via inställningen Track behavioral events.

Om du vill lägga till spårning på webbplatsen via Google Tag Manager i stället, se till att först stänga av appinbäddningen. Konfigurera Aktiv on Site -etiketten från stegen ovan så att Klaviyo.js läses in på alla sidor. Lägg sedan till kodsnutten nedan som en separat Viewed Product -etikett som utlöses endast på produktsidor, efter basetiketten. Den här kodsnutten läser inte in Klaviyo.js i sig. Spara, förhandsgranska och publicera båda etiketterna och slutför sedan båda spårningstesterna ovan.

Shopifys produktslutpunkt som används nedan returnerar produktetiketter, inte kollektionstillhörighet, så kodsnutten fångar Tags i stället för kollektioner.

<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 || [];
var product_handle = location.pathname.replace(/\/$/, '').split('/').pop();
fetch(window.Shopify.routes.root + '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.Tags,
    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