Så här skapar du manuellt en ”Lade till i kundvagnen”-händelse för Shopify

Du kommer att lära dig

Lär dig hur du manuellt skapar en Lade till i kundvagnen-händelse för Shopify, för att spåra när en kund lägger till en artikel i sin kundvagn, som du kan använda för att utlösa ett ”övergiven kundvagn”-flöde. 

Lade till i kundvagnen skiljer sig från Klaviyos Kassaprocess påbörjad-händelse. Kassaprocess påbörjad utlöses när en kund lagt till varor i sin kundvagn, angett sin e-postadress under kassaprocessen och fortsätter till kassan. Detta sker längre ner i tratten, medan Lade till i kundvagnen utlöses så fort en kund lägger till en vara i sin kundvagn. 

Innan du börjar

• Läs vår artikel Komma igång med Shopify för stegvisa instruktioner om integrering innan du fortsätter med den här artikeln.
• Se till att du redan har Klaviyo-webbspårning aktiverad (inklusive spårning av visade produkter) för att Lade till i kundvagnen-händelsen ska fungera korrekt.
• Observera att Lade till i kundvagnen-händelsen endast spårar användare som tidigare har fått cookies registrerade av Klaviyo.

Skapa ”Lade till i kundvagnen”-händelsen

Det finns 3 steg för att skapa Lade till i kundvagnen-händelsen: 

1. Välj var denna kodsnippet ska placeras
2. Lägg till snippeten i din butik
3. Testa denna kodsnippet

Var ska jag klistra in snippeten?

Se till att klistra in snippeten på både din standardproduktsida och på andra produktsidor du kan ha.

Om din butik har ett Custom Liquid-block ska du använda ett sådant för snippeten 

1. I Shopify går du till Webbutik > Teman.
2. Hitta ditt tema och klicka på Anpassa.
3. Klicka på rullgardinsmenyn Startsida högst upp på sidan.
4. Välj Produkter > Standardprodukter för att komma till din standardproduktsida.
5. Klicka på Lägg till avsnitt i vänster sidofält och välj sedan Custom Liquid.
6. Klistra in den medföljande snippeten i rutan.
7. Klicka på Spara uppe till höger.
8. I det vänstra sidofältet ska ditt nya Custom Liquid-block för Lade till i kundvagnen automatiskt visas under de andra avsnitten på sidan.
   • Om ditt Lade till i kundvagnen-block behöver flyttas ska du hålla muspekaren över blocket och klicka på de 6 prickarna för att dra det under dina andra avsnitt
     
     

Om din butik inte har Custom Liquid-block ska du placera snippeten i din theme.liquid-fil

1. I Shopify går du till Webbutik > Teman.
2. Hitta ditt tema och klicka på Anpassa.
3. Klicka på de tre prickarna högst upp och välj Redigera kod.
4. Öppna theme.liquid-filen.
5. Klistra in den tillhandahållna snippeten efter all annan kod, före den avslutande </body>-etiketten.
   
6. Ovanför snippeten lägger du till följande öppningsetikett: {% if product %}
   
7. Direkt efter snippeten lägger du till följande stängningsetikett: {% endif %}
8. Din fil ska se ut så här:
   
9. Klicka på Spara.

Lägg till snippeten på din webbplats

Följande Lade till i kundvagnen-snippet bör fungera för de flesta Shopify-butiker.

Lägg till snippeten nedan i din Shopify-butik på den plats du bestämde ovan.

<script>
  window.addEventListener('load', function() {
  var _learnq = window._learnq || [];
  function addedToCart() {
   fetch(`${window.location.origin}/cart.js`)
   .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    if (klAjax) {
       _learnq.push(['track', 'Added to Cart', cart]);
       klAjax = false;
      }
   }))
  };
  (function (ns, fetch) {
    ns.fetch = function() {
      const response = fetch.apply(this, arguments);
      response.then(res => {
        if (`${window.location.origin}/cart/add.js`
          .includes(res.url) && res.url !== '') {
              addedToCart()
        }
      });
      return response
     }
  }(window, window.fetch));
  var klAjax = true;
  var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
  for (var i = 0; i < atcButtons.length; i++) { 
    atcButtons[i].addEventListener("click", function() {
      if (klAjax) {
        _learnq.push(['track', 'Added to Cart', item]);
        klAjax = false;
      }
    })
  }
  });
</script>

När du är klar kan du testa händelsen med hjälp av anvisningarna i nästa avsnitt.

Testa din ”Lade till i kundvagnen”-händelse

Det är viktigt att observera att Klaviyo endast spårar ”kända webbläsare” eller sådana som har fått cookies registrerade (genom att ett e-postmeddelande klickats på, ett formulär fyllts i etc.). Av denna anledning kan det hända att Lade till i kundvagnen-händelser inte börjar synas i ditt konto så snabbt som du förväntar dig. För att läsa mer om vem Klaviyo spårar ska du gå till vår artikel om webbspårning. 

För att testa din Lade till i kundvagnen-händelse måste du manuellt registrera cookies för din e-postadress. Följ dessa steg:

1. Navigera till din webbplats.
2. På din hemsida lägger du till följande i slutet av adressen och ersätter testing.email@gmail.com med din e-postadress:
   ?utm_email=testing.email@gmail.com
   
   
3. Läs in sidan igen.
4. Navigera till en produktsida på din webbplats och klicka på knappen Lägg till i kundvagn.
5. Sök på Klaviyo efter din e-postadress.
   

Du ska se att en Klaviyo-profil har skapats för dig (om det inte redan fanns en) och att denna Lade till i kundvagnen-händelse har spårats i ditt aktivitetsflöde.

Har du problem med att spåra ”Lade till i kundvagnen” med angiven snippet?

Om du har problem med att spåra Lade till i kundvagnen med angiven snippet kan du prova 2 ytterligare snippets nedan, som vi kallar Snippet 2 och Snippet 3. Innan du testar en ny snippet ska du se till att först ta bort den som inte fungerade.

Bestäm vilken reservsnippet du ska prova

Använder din butik ett knapp-ID för att definiera Lägg till i kundvagn-knappen? Om svaret är ja, prova Snippet 2. Om din Lägg till i kundvagn-knapp istället definieras av klassnotation ska du använda Snippet 3. Så här tar du reda på om din butik använder knapp-ID eller klassnotation:

1. 1. Öppna en av produktsidorna på din webbplats. 
   2. Högerklicka på ”Lägg i kundvagn”-knappen och välj Inspektera.
   3. Konsolen öppnas och visar källkoden för din ”Lägg i kundvagn”-knapp i konsolens Element-flik.
   4. På Element-fliken kan din kod se ut ungefär så här:
      
   5. Lägg märke till att ”Lägg i kundvagnen”-knappen inte har något knapp-ID (som skulle innehålla något i stil med id = "button_ID_name"). Istället refereras den till med en klassnotation (class= "btn product-form_cart-submit btn–secondary-accent").

Snippet 2

Om din Lägg till i kundvagn-knapp definieras av ett knapp-ID lägger du till snippeten nedan i din Shopify-butik på den plats som du bestämde i ”Var ska jag placera snippeten?”-avsnittet tillsammans med eventuella nödvändiga etiketter.

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

Denna snippet kommer sannolikt att behöva ändras, eftersom Lägg till i kundvagn-variabeln i snippeten måste matcha det knapp-ID som används på din webbplats.

Lägg till i kundvagn-variabeln vars standardnamn är AddToCart, är markerad i snippeten nedan:

För att kontrollera knapp-ID krävs samma steg som för att kontrollera att det finns ett knapp-ID på webbplatsen: 

1. Öppna en av produktsidorna på din webbplats.
2. Högerklicka på ”Lägg i kundvagn”-knappen och välj Inspektera.
3. Konsolen öppnas och visar källkoden för din ”Lägg till i kundvagn”-knapp. I följande bild visas ID för ”Lägg i kundvagnen”-knappen markerat i konsolen.
   Knapp-ID på sidan som visas här (addToCart-product-mall) skiljer sig från variabeln i standardsnippeten (AddToCart). 
4. Om de inte matchar ändrar du snippeten så att den matchar med knappens ID. Den modifierade snippeten i vårt exempel ser ut så här:
   

Snippet 3

Om din Lägg till i kundvagn-knapp definieras av en klassnotation lägger du till snippeten nedan i din Shopify-butik på den plats som du bestämde i ”Var ska jag placera snippeten?”-avsnittet tillsammans med eventuella nödvändiga etiketter.

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

Denna snippet kommer sannolikt att behöva ändras, eftersom Lägg till i kundvagn-variabeln i snippeten måste matcha den klass som används på din webbplats.

1. Öppna en av produktsidorna på din webbplats.
2. Högerklicka på ”Lägg i kundvagn”-knappen och välj Inspektera.
3. Konsolen öppnas och visar källkoden för din ”Lägg till i kundvagn”-knapp. I följande bild visas klassen för ”Lägg i kundvagnen”-knappen markerad i konsolen.
   
4. Jämför din knappkod mellan citaten, som är markerade i exemplet ovan, med innehållet mellan parenteserna efter getElementsByClassName i kodsnippeten ovan. Till exempel är klassen som anges på skärmbilden btn product-form_cart-submit btn--secondary-accent och variabeln som anges i snippeten är add-to-cart.
5. Om de inte matchar ändrar du snippeten så att den matchar med knappens klass. Den modifierade snippeten i vårt exempel ser ut så här:
   

Om du har problem med att spåra Lade till i kundvagnen efter att ha provat dessa olika alternativ kan det bero på ett problem med att identifiera Lade till i kundvagnen-knappen. I så fall ska du kontakta Klaviyo-supporten.

Nästa steg: aktivera det övergivna ”Lade till i kundvagnen”-flödet

Klaviyo-standardflödet för övergiven kundvagn löses ut av Kassaprocess påbörjad-händelsen, medan Lade till i kundvagnen-flödet för övergiven kundvagn riktar sig till mer oengagerade shoppare som ännu inte har påbörjat kassaprocessen.

För att aktivera detta flöde rekommenderar vi att du använder det färdigbyggda flöde som finns tillgängligt i Klaviyo-flödesbiblioteket:

1. Navigera till Klaviyo-flödesbiblioteket.
2. Klicka in på ”Förhindra förlorad försäljning”-målavsnittet.
3. Välj ett Lade till i kundvagnen-utlösare, Påminnelse om övergiven kundvagn-flöde. Det finns två alternativ: endast e-post eller e-post och sms.
   
4. Om du skapade Lade till i kundvagnen-händelsen kommer detta flöde att vara redo att användas med alla rekommenderade filter och dynamiskt e-postinnehåll som kan driva personliga meddelanden om kundvagnsuppföljning.

Använder du Amazon Buy with Prime?

Om du använder Buy with Prime för att sköta betalning och leverans för någon av produkterna i din butik ska du:

• Integrera Buy with Prime med Klaviyo för att föra in Buy with Prime-data i ditt Klaviyo-konto.
• För ditt övergivna ”Lade till i kundvagnen”-flöde ska du lägga till följande flödesfilter för att se till att kunder som påbörjat kassaprocessen eller genomfört köp via Buy with Prime inte får felaktiga meddelanden:
  
  • Påbörjad kassaprocess (Buy with Prime) noll gånger sedan starten av detta flöde AND
  • Skapad beställning (Buy with Prime) noll gånger sedan detta flödes start.

Resultat 

Du har nu skapat och testat en Lade till i kundvagnen-händelse i Shopify och aktiverat ett övergivet Lade till i kundvagnen-flöde. 

Ytterligare resurser

• Komma igång med övergiven kundvagn-flödet
• Shopify-datareferens
• Felsöka din Shopify-integration