Hur man skapar en "Lagt till i kundvagnen" händelse för BigCommerce

Du kommer att lära dig

Lär dig hur du skapar en Added to Cart-händelse för BigCommerce som spårar när en kund lägger till en artikel i sin kundvagn och kan utlösa en övergiven kundvagn flöde. Händelser som läggs i varukorgen spåras inte automatiskt när du integrerar med BigCommerce; du måste först lägga till (och eventuellt ändra) ett JavaScript-utdrag (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 övergiven kundvagn flöde; Added to Cart övergiven kundvagn flöde är separat från standard övergiven kundvagn flöde, som utlöses av Started kassa. 
• Klaviyo's inbyggda BigCommerce integrationer spårar redan en Started kassa-händelse när en kund går in i sin e-post under kassaprocessen efter att ha lagt till varor i sin varukorg. 

Innan du börjar

Händelsen Added to Cart spåras endast för användare som tidigare har blivit cookade av Klaviyo. 

Du måste redan ha Viewed Product spårning installerat för att händelsen Added to Cart ska fungera korrekt. Vanligtvis installerar Klaviyo kund detta under BigCommerce integrationer-processen och instruktionerna finns i vår integrationer-artikel. 

Lägg till snippet

1. Öppna din BigCommerce-admin och navigera till Storefront > My Themes.
2. Leta reda på 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 snippet nedan direkt under Klaviyo Viewed Product snippet.

   <script text="text/javascript"> 
    //Initialisera Klaviyo objektet direkt vid sidladdning
   !function(){if(!window.Klaviyo){window._klOnsite=window._klOnsite||[];try{window.Klaviyo=new Proxy({},{get:function(n,i){return"pushnotis"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function() {for(var n=argument.längd,o=ny 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.pushnotis([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.Klaviyo=window.Klaviyo[],window.Klaviyo.pushnotis=function(){var n;(n=window._klOnsite).pushnotis.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>

5. Kontrollera sedan om du behöver ändra din snippet. För att göra detta måste du kontrollera ID:t för knappen "Lägg till i kundvagn" på din webbplats och se om det matchar variabeln "Lägg till i kundvagn" som markeras i utdraget nedan, vars standard är form-action-addToCart.
   
6. Om du vill kontrollera knappens ID öppnar du en av webbplatsens produktsidor, högerklickar på knappen "Lägg i varukorg" och väljer Inspektera.
   
7. Konsolen öppnas och visar källkoden för knappen "Lägg till i kundvagn". I följande bild visas ID:t för knappen "Lägg i varukorgen" markerat i konsolen.
   
8. 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 kundvagn" på din webbplats inte är form-action-addToCart måste du ändra variabeltexten inom citattecken så att den matchar knappens ID
9. Om källkoden inte visar något knapp-ID går du vidare till nästa avsnitt och lär dig hur du använder en alternativ kodsnutt med klassnotation i stället för knappnotation. 
10. När du är klar sparar du filen product.html. 

Du är klar med att lägga till snippet och kommer nu att spåra händelsen Added to Cart. 

Alternativ snippet för "Lägg till i kundvagn" -knapp utan knapp-ID

Av stylingskäl använder vissa webbplatser en klassnotation i stället för ett knapp-ID för "Lägg till i kundvagn"-knappar.

Om knappen "Lägg till i kundvagn" inte har något knapp-ID (vilket du kan fastställa genom att följa stegen i föregående avsnitt) och istället använder en klassnotation, bör du använda det alternativa kodsnippet nedan för att aktivera händelsen Added to Cart. 

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

   <script text="text/javascript"> 
    //Initialisera Klaviyo objektet direkt vid sidladdning
   !function(){if(!window.Klaviyo){window._klOnsite=window._klOnsite||[];try{window.Klaviyo=new Proxy({},{get:function(n,i){return"pushnotis"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function() {for(var n=argument.längd,o=ny 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.pushnotis([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.Klaviyo=window.Klaviyo[],window.Klaviyo.pushnotis=function(){var n;(n=window._klOnsite).pushnotis.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 < klassnamn.längd; i++) {
      classname[i].addEventListener('click', addToCart, false);
   }
   </script>
   

2. Denna kod kommer troligen att behöva modifieras med ditt klassnamn. Jämför ditt knappklassnamn mellan citaten, markerat i följande exempel, med innehållet mellan parenteserna efter getElementsByClassName i kodsnippet ovan. Till exempel är klassnamnet i skärmdumpen btn product-form_cart-submit btn--secondary-accent och klassen i snippet heter add-to-cart.
   
   
   • Om dessa två inte stämmer överens ändrar du kodsnippet så att det återspeglar klassnamnet för din knapp.
3. Exempelvis har kodsnippet nedan modifierats med classname-värdet btn product-form_cart-submit btn--secondary-accent omgivet av dubbla citattecken.
   
4. Spara filen product.html

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

Felsökning av din "Added to Cart" snippet

När du har lagt till snippet ska det titta på knappen "Lägg till i kundvagn'' och spåra en Added to Cart-händelse när en cookied besökare klickar på den här knappen. 

Detta evenemang fungerar på samma sätt som Viewed Product-evenemanget. Varje artikel som någon lägger till i sin kundvagn utlöser en ny händelse. Du kan se dessa händelser genom att:

1. Navigera för att analysera > mättal in Klaviyo
2. Söka efter evenemanget
3. Klicka på Aktivitetsflöde
   
   

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

• Kontrollera att din Klaviyo.js (även känd som Aktiv on Site snippet) fungerar, vilket är nödvändigt för att Added to Cart ska fungera korrekt. Detta bör 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 om att bekräfta installation av spårning på plats i vår artikel om BigCommerce integrationer.
• Kontrollera att din Viewed Product-spårning fungerar, vilket också är nödvändigt för att Added to Cart ska fungera korrekt. Det här utdraget läggs till manuellt, och du kan lära dig hur du lägger till och testar det i avsnittet Viewed Product i vår artikel om integrationer. 

The "Added to Cart" övergiven kundvagn flöde

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

I bibliotekets Essentials-avdelning hittar du den vanliga övergivna kundvagnen reminder flöde. Detta flöde utlöses av händelsen Started kassa.

För att komma igång med ett övergivet kundvagn flöde med händelsen Added to Cart rekommenderar vi att du använder det färdigbyggda flöde som finns i Klaviyo flöde Library som redan har rätt flödesfilter inställt. Detta flöde tenderar att rikta sig till mer avslappnade potentiella kunder som ännu inte har börjat kassa.

Det övergivna kundvagnflöde som utlöses av händelsen Added to Cart finns i avsnittet "Prevent lost sales" goal. 

Om du har implementerat snippet BigCommerce Added to Cart kommer detta flöde att vara redo att användas med alla rekommenderade filter och dynamiskt e-postinnehåll som är redo att driva e-postmeddelanden för personlig uppföljning av kundvagnen.

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.

Ytterligare resurser

• Skapa en övergiven kundvagn flöde
• BigCommerce data referens