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 klick på knappen ”Lägg till i kundvagn” på din produktsida 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 temafiler i BigCommerce.

• 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 inbyggda BigCommerce-integrationer spårar redan en Påbörjad kassa -händelse när en kundvagn innehåller artiklar och en giltig e-postadress. För kunder som är inloggade på ett butik Konto kan detta hända när de först lägger till en artikel, innan de kommer till kassan.

Innan du börjar

Klaviyo måste identifiera en besökare innan deras Lade till i varukorgen -aktivitet visas på deras profil. Om Anonym bakåtfyllning är aktiverat kan aktivitet som samlats in före identifiering läggas till på profilen efter att besökaren har identifierats. Läs mer om hur besökare får cookies av Klaviyo i Klaviyo.

Se till att Klaviyo.js är installerat och att du redan har Viewed Product -spårning installerad för att Added to Cart -händelsen ska fungera korrekt. Vanligtvis installerar Klaviyo-kunder detta under integrationsprocessen för BigCommerce, och instruktionerna finns i vår artikel om integrationer. Båda kodavsnitten nedan använder produktdata som tillhandahålls av Viewed Product-spårning.

Lägg till utdraget

1. Öppna din BigCommerce-admin och gå till Storefront > My Themes.
2. Hitta ditt aktuella tema, öppna rullgardinsmenyn Avancerade inställningar och välj Redigera temafiler. Om det här alternativet inte är tillgängligt för ett standardtema skapar du en kopia och redigerar kopian. Se till att det redigerade temat är tillämpat i din butik innan du testar.
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 type="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 type="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. Webbläsarens utvecklarverktyg öppnas och visar HTML-koden för knappen ”Lägg i varukorgen”. Hitta dess ID, som är markerat i följande exempel.
   

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 i varukorgen” på din webbplats inte är form-action-addToCart behöver du ändra variabeltexten inom citattecknen så att den matchar knappens ID.
5. Om knappen inte har något ID ersätter du kodavsnittet ovan med det alternativa kodavsnittet i nästa avsnitt, som använder knappens klass. Använd bara 1 av de 2 kodavsnitten.
6. När du är klar sparar du filen product.html.

När du har sparat följer du teststegen nedan för att bekräfta att händelserna Added to Cart når Klaviyo.

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. Ersätt det första kodavsnittet med det alternativa kodavsnittet nedan i product.html, direkt under Klaviyo- Viewed Product -snippeten:

<script type="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 type="text/javascript">
//Added to Cart
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 följer du teststegen nedan för att bekräfta att händelserna Added to Cart når Klaviyo.

Testa och felsök ditt "Lade till i kundvagnen"-kodavsnitt

När du har lagt till kodavsnittet ska det bevaka knappen ”Lägg till i varukorgen” och spåra en Added to Cart -händelse varje gång en besökare med cookies klickar på knappen.

Varje klick på den konfigurerade knappen skickar produktinformationen från kodavsnittet Viewed Product. Det bekräftar inte att BigCommerce har lagt till produkten utan problem eller registrerar hela varukorgen.

För att testa öppnar du en produktsida i en webbläsare där Klaviyo har identifierat dig, till exempel efter att du har klickat på en länk till din butik i ett Klaviyo Email. Klicka på produktens knapp ”Lägg i varukorgen” och kontrollera sedan händelsen i Klaviyo:

1. Navigera till Analys > Mättal i Klaviyo.
2. Rensa eventuellt integrationsfilter för BigCommerce och sök sedan efter och öppna Added to Cart. Det här kodavsnittet skapar ett API-mättal.
3. Klicka på Aktivitetsflöde och leta efter din testhändelse.

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 känd som snippet: Aktiv på webbplatsen) fungerar, vilket krävs för att Added to Cart ska fungera korrekt. Det här läggs till automatiskt när inställningen för BigCommerce-integrationer Lägg till Klaviyo onsite javascript automatiskt (rekommenderas) är aktiverad. Kontrollera att det fungerar genom att följa stegen i avsnittet om att bekräfta installationen av spårning på webbplatsen i vår artikel om BigCommerce-integrationer.
• 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 1 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 1 av dem. Innan du lägger till SMS kan du läsa igenom kraven för övergiven kundvagn med SMS, inklusive krav på samtycke och sändningstid.

I bibliotekets avsnitt Kom igång med grunderna hittar du standardflödet för påminnelse om övergiven kundvagn. Det här flödet utlöses av händelsen Startade kassan.

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.

1. När du har bekräftat att din testhändelse visas går du till Flöden och klickar på Skapa flöde.
2. I Förhindra förlorad försäljning väljer du BigCommerce-mallen för övergiven kundvagn med utlösaren Lades till i kundvagn.

3. Ge ditt flöde ett namn och klicka på Använd mallen.

Mallen innehåller rekommenderade filter och dynamiskt e-postinnehåll för personliga uppföljningsmejl om kundvagn. Granska meddelandena och bekräfta att filtren utesluter kunder som har påbörjat kassan eller lagt en beställning sedan de gick in i flödet. Om du använder Buy with Prime lägger du till filtren i nästa avsnitt innan du aktiverar flödet.

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.

Slå på ditt flöde

1. När du har granskat flödets innehåll, timing och filter klickar du på Granska och aktivera i flödesbyggaren. Om flödet redan har meddelanden i en annan status klickar du på Uppdatera status i stället.
2. Välj Live och klicka på Spara. Berättigade meddelanden skickas automatiskt när profiler når dem.

Ytterligare resurser