Hoe maak je een "Aan winkelwagen toegevoegd" evenement voor BigCommerce?

Wat je leert

Leer hoe je een Added to Cart-event kunt maken voor BigCommerce dat bijhoudt wanneer een klant een artikel toevoegt aan zijn winkelwagentje en een winkelwagen verlaten flow kan activeren. Aan winkelwagen toegevoegd gebeurtenissen worden niet automatisch bijgehouden wanneer je integreert met BigCommerce; je moet eerst een JavaScript-fragment (opgenomen in deze handleiding) toevoegen (en mogelijk aanpassen) aan je BigCommerce themabestanden.

• flow Je flow hoeft de gebeurtenis flow Toegevoegd aan winkelwagen niet aan te maken om een winkelwagen verlaten te versturen; de winkelwagen verlaten staat los van de standaard winkelwagen verlaten, die wordt getriggerd door Started afrekenen. 
• KlaviyoDe ingebouwde BigCommerce integraties houden al een Started afrekenen event bij wanneer een klant zijn e-mail invult tijdens het afrekenen nadat hij een artikel aan zijn winkelwagen heeft toegevoegd. 

Voordat je van start gaat

Het evenement Aan winkelwagen toegevoegd wordt alleen bijgehouden voor gebruikers die eerder door Klaviyo zijn gekookt. 

Je moet Viewed Product tracking al geïnstalleerd hebben om de gebeurtenis Toegevoegd aan winkelwagen goed te laten werken. Normaal gesproken installeert Klaviyo klant dit tijdens het BigCommerce integraties proces en de instructies kunnen worden gevonden in ons integraties artikel. 

Voeg het knipsel toe

1. Open je BigCommerce admin en navigeer naar Storefront > Mijn Thema's.
2. Zoek je huidige thema op en klik op de vervolgkeuzelijst Geavanceerde instellingen.
3. Zoek naar het bestand product.html en klik erop om het te openen.
4. Plak de onderstaande snippet direct onder de Klaviyo Product bekeken snippet.

   <script text="text/javascript"> 
    //Initialiseer Klaviyo object onmiddellijk bij het laden van de pagina
   !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]=argumenten[w];var t="functie"==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"> 
    //Aan winkelwagen toegevoegd
   var Klaviyo = window.Klaviyo || [];
   document.getElementById("form-action-addToCart").addEventListener('click',function (){
      klaviyo.track("Added to Cart", item);
   });
   </script>

5. Controleer vervolgens of je je knipsel moet aanpassen. Om dit te doen, moet je de ID van de knop "In winkelwagen" op je site controleren en kijken of deze overeenkomt met de variabele "In winkelwagen" in het onderstaande knipsel, waarvan de standaardwaarde form-action-addToCart is.
   
6. Om de ID van de knop te controleren, open je een van de productpagina's van je site, klik je met de rechtermuisknop op je knop "In winkelwagen" en selecteer je Inspecteren.
   
7. De console wordt geopend en toont de broncode van de knop "In winkelwagen". In de volgende afbeelding is de ID van de knop "Toevoegen aan winkelwagentje" gemarkeerd in de console.
   
8. De ID van de knop op de hier getoonde pagina komt overeen met form-action-addToCart, dus er hoeven geen wijzigingen te worden aangebracht.
   • Als de ID van de knop "Toevoegen aan winkelwagentje" op je site niet form-action-addToCart is, moet je de variabele tekst binnen de aanhalingstekens wijzigen zodat deze overeenkomt met de ID van de knop
9. Als je broncode geen knop-ID toont, ga dan door naar de volgende sectie en leer hoe je een alternatief knipsel kunt gebruiken met klasse-notatie in plaats van knop-notatie. 
10. Sla je product.html bestand op als je klaar bent. 

Je bent klaar met het toevoegen van het knipsel en volgt nu de gebeurtenis Toegevoegd aan winkelwagen. 

Alternatieve snippet voor "knop Toevoegen aan winkelwagentje" zonder knop-ID

Om stylingredenen gebruiken sommige sites een class-notatie in plaats van een knop-ID voor knoppen "In winkelwagen".

Als je knop "Toevoegen aan winkelwagentje" geen knop-ID heeft (die je kunt bepalen door de stappen in de vorige sectie te volgen) en in plaats daarvan een class-notatie gebruikt, moet je het onderstaande alternatieve codefragment gebruiken om het evenement Toegevoegd aan winkelwagentje in te schakelen. 

1. Als je knop is gedefinieerd met klasse-notatie, plak dan het volgende alternatieve fragment onder aan je product.html bestand:

   <script text="text/javascript"> 
    //Initialiseer Klaviyo object onmiddellijk bij het laden van de pagina
   !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]=argumenten[w];var t="functie"==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 = functie() {
      klaviyo.track("Added to Cart", item);
   }; 
   voor (var i = 0; i < classname.length; i++) {
      classname[i].addEventListener('click', addToCart, false);
   }
   </script>
   

2. Deze code moet waarschijnlijk worden aangepast met je klassenaam. Vergelijk de naam van je knopklasse tussen de aanhalingstekens in het volgende voorbeeld met de inhoud tussen de haakjes na getElementsByClassName in het bovenstaande codefragment. De classnaam in de schermafbeelding is bijvoorbeeld btn product-form_cart-submit btn--secondary-accent en de class in het knipsel heet add-to-cart.
   
   
   • Als deze twee niet overeenkomen, verander dan het codefragment om de klassenaam voor je knop weer te geven.
3. Het onderstaande codefragment is bijvoorbeeld aangepast met de classname waarde btn product-form_cart-submit btn--secondary-accent omgeven door dubbele aanhalingstekens.
   
4. Sla je product.html bestand op

Zodra je opslaat, ben je klaar met het toevoegen van het knipsel en kun je nu de gebeurtenis Toegevoegd aan winkelwagentje volgen. 

Problemen oplossen met je "Aan winkelwagen toegevoegd" snippet

Nadat je het knipsel hebt toegevoegd, moet het de knop "Toevoegen aan winkelwagentje'' in de gaten houden en een gebeurtenis Toevoegen aan winkelwagentje bijhouden wanneer een cookied bezoeker op deze knop klikt. 

Deze gebeurtenis werkt op dezelfde manier als de gebeurtenis Product bekeken. Elk item dat iemand aan zijn winkelwagentje toevoegt, activeert een nieuwe gebeurtenis. Je kunt deze evenementen bekijken door:

1. Navigeren naar analyses > meetwaarde in Klaviyo
2. Zoeken naar de gebeurtenis
3. Klikken op Activiteiten-feed
   
   

Als je geen Aan winkelwagen toegevoegd gebeurtenissen in je account ziet, probeer dan het volgende:

• Controleer of je Klaviyo.js (ook wel bekend als de active on Site snippet) werkt, wat nodig is voor een goede werking van Added to Cart. Dit zou automatisch aan je site moeten zijn toegevoegd toen je integreerde met Klaviyo, maar je kunt controleren of het werkt door de stappen te volgen in het gedeelte Onsite tracking installatie bevestigen in ons artikel BigCommerce integraties.
• Controleer of je bekeken product tracking werkt, wat ook nodig is om Aan winkelwagen toevoegen goed te laten werken. Dit knipsel wordt handmatig toegevoegd en je kunt leren hoe je het toevoegt en test in het gedeelte Bekeken product van ons artikel over integraties. 

De "Toegevoegd aan winkelwagen" winkelwagen verlaten flow

Bij het maken van een winkelwagen verlaten flow (via Toegevoegd aan winkelwagen of Gestart afrekenen) kun je naast e-mail ook Klaviyo SMS gebruiken. Zorg er om compliance redenen voor dat je slechts één sms verstuurt in je flow en als je meerdere soorten winkelwagen verlaten flow gebruikt, zorg er dan voor dat je slechts in één ervan sms gebruikt. 

In de Essentials-sectie van de bibliotheek vind je de standaard winkelwagen verlaten herinnering flow. Deze flow wordt geactiveerd door de gebeurtenis Afrekenen gestart.

Om aan de slag te gaan met een winkelwagen verlaten flow met behulp van de gebeurtenis Toegevoegd aan winkelwagen, raden we aan de kant-en-klare flow te gebruiken die beschikbaar is in Klaviyo's flowbibliotheek, waarin het juiste flowfilter al is ingesteld. Deze flow richt zich op meer casual potentiële kopers die nog moeten afrekenen.

De winkelwagen verlaten flow die wordt geactiveerd door de gebeurtenis Toegevoegd aan winkelwagen kan worden gevonden in het gedeelte "Voorkom gemiste verkopen" doel. 

Als je het knipsel BigCommerce Toegevoegd aan winkelwagen hebt geïmplementeerd, is deze flow klaar voor gebruik met alle aanbevolen filters en dynamische e-mailinhoud om gepersonaliseerde opvolgingse-mails voor winkelwagen te maken.

Gebruik je Amazon Buy with Prime?

Als je Buy with Prime gebruikt voor de betaling en afhandeling van producten in je webshop, dan doe je het volgende:

• Integreer Buy with Prime met Klaviyo om de gegevens van Buy with Prime naar je Klaviyo-account te brengen.
• Voeg aan je flow voor verlaten van Toegevoegd aan Winkelwagen de volgende flowfilters toe, zodat klanten die zijn begonnen met afrekenen of aankopen hebben gedaan via Buy with Prime geen onjuiste berichten krijgen:
  
  • Afrekenen Gestart (Buy with Prime) 0 keer sinds het starten van deze flow EN
  • Bestelling Geplaatst (Buy with Prime) 0 keer sinds het starten van deze flow.

Extra hulpbronnen

• Een winkelwagen verlaten flow
• Referentie BigCommerce gegevens