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

Du kommer att lära dig

Lär dig hur du skapar en Lade till i kundvagnen -händelse för BigCommerce som spårar när en kund lägger till en vara i sin kundvagn och kan utlösa ett flöde för övergiven kundvagn. Lade till i kundvagnen -händelser spåras inte automatiskt när du integrerar med BigCommerce; du måste först lägga till (och eventuellt ändra) ett JavaScript-kodavsnitt (som ingår i den här guiden) i dina BigCommerce-temafiler.

• Du behöver inte skapa händelsen Added to Cart för att skicka ett flöde för övergiven kundvagn. Flödet för övergiven kundvagn för Added to Cart är separat från det standardiserade flödet för övergiven kundvagn, som triggas av Started Checkout.
• Klaviyo's inbyggda BigCommerce-integration spårar redan en Påbörjad kassa- händelse när en kund anger sin e-postadress under kassaprocessen efter att ha lagt till varor i sin kundvagn.

Innan du börjar

Händelsen Lade till i kundvagnen spåras endast för användare som tidigare har fått cookies registrerade av Klaviyo.

Du måste redan ha Viewed Product -spårning installerad för att Added to Cart -händelsen ska fungera korrekt. Vanligtvis installerar Klaviyo-kunder detta under BigCommerce-integrationsprocessen, och instruktionerna finns i vår integrationsartikel.

Lägg till utdraget

1. Öppna din BigCommerce-admin och gå till Storefront > My Themes.
2. Hitta ditt nuvarande tema och klicka på rullgardinsmenyn Avancerade inställningar.
3. Sök efter filen product.html och klicka för att öppna den.
4. Klistra in kodsnutten nedan direkt under Klaviyo-kodsnutten för Viewed Product.

<script text="text/javascript"> 
//Initialize Klaviyo object immediately 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 text="text/javascript">
//Added to Cart
var klaviyo = window.klaviyo || [];
document.getElementById("form-action-addToCart").addEventListener('click',function (){
   klaviyo.track("Added to Cart", item);
});
</script>

1. Kontrollera sedan om du behöver ändra ditt kodavsnitt. För att göra detta behöver du kontrollera ID:t för knappen ”Add to Cart” på din webbplats och se om det matchar variabeln ”Add to Cart” som är markerad i kodavsnittet nedan, vars standard är form-action-addToCart.
   

2. För att kontrollera knappens ID öppnar du en av produkt­sidorna på din webbplats, högerklickar på knappen ”Lägg till i kundvagn” och väljer Inspektera.
   

3. Konsolen öppnas och visar källkoden för knappen ”Lägg till i kundvagn”. I följande bild visas ID för ”Lägg i kundvagnen”-knappen markerat i konsolen.
   

4. ID:t för knappen på sidan som visas här matchar form-action-addToCart, så inga ändringar behöver göras.
   • Om ID:t för knappen ”Lägg till i varukorgen” på din webbplats inte är form-action-addToCart måste du ändra variabeltexten inom citattecknen så att den matchar knappens ID
5. Om din källkod inte visar något knapp-ID kan du hoppa vidare till nästa avsnitt och lära dig hur du använder ett alternativt snippet med klassnotation i stället för knappnotation.
6. När du är klar sparar du filen product.html.

Du har lagt till kodsnutten och ska nu spåra händelsen Added to Cart.

Alternativt snippet för knappen "Lägg till i varukorgen" utan ett knapp-ID

Av stilskäl använder vissa webbplatser en klassnotation i stället för ett knapp-ID för ”Lägg i varukorgen”-knappar.

Om din knapp ”Lägg till i varukorg” inte har något knapp-ID (vilket du kan ta reda på genom att följa stegen i föregående avsnitt) och i stället använder en klassnotation, ska du använda det alternativa kodsnippet nedan för att aktivera händelsen Tillagt i varukorg.

1. Om din knapp definieras med klassnotation klistrar du in följande alternativa kodsnutt längst ned i filen product.html:

<script text="text/javascript"> 
//Initialize Klaviyo object immediately 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 text="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];var classname = document.getElementsByClassName("add-to-cart");var addToCart = function() {   klaviyo.track("Added to Cart", item);}; for (var i = 0; i < classname.length; i++) {   classname[i].addEventListener('click', addToCart, false);}
</script>

1. Den här koden behöver sannolikt ändras med ditt klassnamn. Jämför ditt knappklassnamn mellan citattecknen, markerat i följande exempel, med innehållet mellan parenteserna efter getElementsByClassName i kodsnippet ovan. Till exempel är klassnamnet i skärmbilden btn product-form_cart-submit btn--secondary-accent och klassen i snippeten heter add-to-cart.
   
   

• Om dessa två inte matchar ändrar du kodsnippet så att den återspeglar klassnamnet för din knapp.

2. Till exempel har kodsnippeten nedan ändrats så att classname-värdet btn product-form_cart-submit btn--secondary-accent omges av dubbla citattecken.
   

3. Spara din product.html -fil

När du har sparat är du klar med att lägga till snutten och kan nu spåra händelsen Added to Cart.

Felsökning av ditt ”Lade till i kundvagnen”-snippet

När du har lagt till kodsnutten ska den bevaka knappen ”Add to Cart” och spåra en Added to Cart -händelse varje gång en besökare med cookies klickar på den här knappen.

Den här händelsen fungerar på liknande sätt som händelsen Viewed Product. Varje artikel som någon lägger till i sin kundvagn utlöser en ny händelse. Du kan se de här händelserna genom att:

1. Navigera till Analytics > mättal i Klaviyo
2. Söker efter händelsen
3. Om du klickar på Aktivitetsflöde
   
   

Om du inte ser händelser för Added to Cart i ditt Konto kan du testa följande:

• Se till att din Klaviyo.js (även kallat kodavsnittet Aktiv på webbplats) fungerar, vilket krävs för att Lades i kundvagn ska fungera som det ska. Detta ska ha lagts till på din webbplats automatiskt när du integrerade med Klaviyo, men du kan kontrollera att det fungerar genom att följa stegen i avsnittet bekräfta installation av spårning på webbplatsen i vår integrationsartikel för BigCommerce.
• Kontrollera att din Viewed Product -spårning fungerar, vilket också krävs för att Added to Cart ska fungera som det ska. Det här kodavsnittet läggs till manuellt, och du kan läsa hur du lägger till och testar det i avsnittet Viewed Product i vår integrationsartikel.

Om du fortfarande stöter på problem med ditt Lade till i kundvagnen -snippet kan det bero på ett problem med att identifiera knappen ”Lägg till i kundvagnen”. I så fall ska du kontakta Klaviyo-supporten.

Flödet ”Added to Cart” för övergiven kundvagn

När du skapar ett flöde för övergiven kundvagn (antingen med Added to Cart eller Started Checkout) kan du använda Klaviyo SMS utöver e-post. Av efterlevnadsskäl ska du se till att bara skicka ett sms i ditt flöde, och om du använder flera olika typer av flöden för övergiven kundvagn ska du se till att bara använda sms i ett av dem.

I bibliotekets avsnitt Essentials hittar du standardflödet för påminnelse om övergiven kundvagn. Det här flödet triggas av händelsen Started Checkout.

För att komma igång med ett flöde för övergiven kundvagn med händelsen Added to Cart rekommenderar vi att du använder det förbyggda flödet som finns i Klaviyos Flödesbibliotek, som redan har rätt flödesfilter konfigurerade. Det här flödet tenderar att rikta sig till mer tillfälliga potentiella kunder som ännu inte har påbörjat kassan.

Flödet för övergiven kundvagn som utlöses av händelsen Added to Cart finns i målavsnittet "Förhindra förlorad försäljning".

Om du implementerade BigCommerce-kodsnutten Lade till i kundvagnen kommer det här flödet att vara redo att användas med alla rekommenderade filter och dynamiskt e-postinnehåll som är redo att driva personliga uppföljningsmejl om kundvagn.

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 skicka Buy with Prime-data till 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 jag startade detta flöde.

Ytterligare resurser