Een "Toegevoegd aan winkelwagen"-gebeurtenis maken voor BigCommerce

Wat je leert

Leer hoe je een Toegevoegd aan winkelwagen -gebeurtenis voor BigCommerce maakt, waarmee je bijhoudt wanneer een klant een item aan zijn winkelwagen toevoegt en waarmee je een flow voor winkelwagen verlaten kunt triggeren. Toegevoegd aan winkelwagen -gebeurtenissen worden niet automatisch bijgehouden wanneer je integreert met BigCommerce; je moet eerst een JavaScript-snippet (opgenomen in deze handleiding) toevoegen (en mogelijk aanpassen) aan je BigCommerce-themabestanden.

• Je hoeft het event Added to Cart niet aan te maken om een flow voor een winkelwagen verlaten te versturen; de flow voor een winkelwagen verlaten op basis van Added to Cart staat los van de standaard flow voor een winkelwagen verlaten, die wordt geactiveerd door Started Checkout.
• Klaviyo’s ingebouwde BigCommerce-integratie registreert al een Started Checkout -event wanneer een klant zijn e-mailadres invoert tijdens het afrekenproces nadat hij item(s) aan zijn winkelwagen heeft toegevoegd.

Voordat je van start gaat

De gebeurtenis Toegevoegd aan winkelwagen wordt alleen gevolgd voor gebruikers die eerder door Klaviyo gecookied zijn.

Je moet Viewed Product -tracking al hebben geïnstalleerd zodat de gebeurtenis Added to Cart goed werkt. Meestal installeren Klaviyo-klanten dit tijdens het BigCommerce-integratieproces en de instructies vind je in ons integratieartikel.

Het fragment toevoegen

1. Open je BigCommerce-beheeromgeving en ga naar Storefront > My Themes.
2. Zoek je huidige thema en klik op de dropdown Geavanceerde instellingen.
3. Zoek naar het bestand product.html en klik erop om het te openen.
4. Plak het onderstaande fragment direct onder het Klaviyo-fragment 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. Controleer vervolgens of je je snippet moet aanpassen. Hiervoor moet je de ID van de knop "Add to Cart" op je site controleren en kijken of deze overeenkomt met de variabele "Add to Cart" die hieronder in de snippet is gemarkeerd, waarvan de standaardwaarde form-action-addToCart is.
   

2. Als je de ID van de knop wilt controleren, open je een van de productpagina's van je site, klik je met de rechtermuisknop op je knop "Toevoegen aan winkelwagen" en selecteer je Inspecteren.
   

3. De console wordt geopend en toont de broncode van de knop "Toevoegen aan winkelwagen". In de volgende afbeelding wordt de ID van de knop "Toevoegen aan winkelwagen" gemarkeerd in de console.
   

4. De ID van de knop op de pagina die je hier ziet komt overeen met form-action-addToCart, dus je hoeft geen wijzigingen aan te brengen.
   • Als de ID van de knop "Add to Cart" 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
5. Als je broncode geen button-ID weergeeft, ga dan door naar de volgende sectie en lees hoe je een alternatieve snippet gebruikt met class-notatie in plaats van button-notatie.
6. Sla je product.html -bestand op als je klaar bent.

Je bent klaar met het toevoegen van de snippet en gaat nu de gebeurtenis Toegevoegd aan winkelwagen bijhouden.

Alternatieve snippet voor de knop "Toevoegen aan winkelwagen" zonder knop-ID

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

Als je knop "In winkelwagen" geen knop-ID heeft (wat je kunt bepalen door de stappen in de vorige sectie te volgen) en in plaats daarvan een class-notatie gebruikt, gebruik dan het alternatieve codefragment hieronder om de gebeurtenis Toegevoegd aan winkelwagen in te schakelen.

1. Als je knop is gedefinieerd met class-notatie, plak je het volgende alternatieve fragment onderaan je product.html -bestand:

<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. Deze code moet waarschijnlijk worden aangepast met je klassenaam. Vergelijk de klassenaam van je knop tussen de aanhalingstekens (gemarkeerd in het volgende voorbeeld) met de inhoud tussen de haakjes na getElementsByClassName in het codefragment hierboven. De klassenaam in de screenshot is bijvoorbeeld btn product-form_cart-submit btn--secondary-accent en de class in het snippet heet add-to-cart.
   
   

• Als deze twee niet overeenkomen, pas je het codefragment aan zodat het overeenkomt met de klassenaam van je knop.

2. Het onderstaande codefragment is bijvoorbeeld aangepast, waarbij de classname-waarde btn product-form_cart-submit btn--secondary-accent tussen dubbele aanhalingstekens staat.
   

3. Sla je product.html -bestand op

Nadat je hebt opgeslagen, ben je klaar met het toevoegen van het snippet en kun je nu de gebeurtenis Added to Cart tracken.

Problemen oplossen met je "Added to Cart"-snippet

Nadat je het fragment hebt toegevoegd, moet het de knop "In winkelwagen" in de gaten houden en een gebeurtenis Toegevoegd aan winkelwagen bijhouden wanneer een bezoeker met cookies op deze knop klikt.

Dit event werkt vergelijkbaar met het event Viewed Product. Elk item dat iemand aan zijn of haar winkelwagen toevoegt, activeert een nieuw event. Je kunt deze events bekijken door:

1. Navigeren naar Analytics > meetwaarde in Klaviyo
2. Zoeken naar de gebeurtenis
3. Klik op Activiteitenfeed
   
   

Als je geen Added to Cart -events in je account ziet, probeer dan het volgende:

• Zorg ervoor dat je Klaviyo.js (ook bekend als het actief op site-snippet) werkt, wat nodig is om Added to Cart goed te laten werken. Dit zou automatisch aan je site moeten zijn toegevoegd toen je met Klaviyo integreerde, maar je kunt controleren of het werkt door de stappen te volgen in de sectie voor het bevestigen van de installatie van onsite tracking van ons integratieartikel over BigCommerce.
• Controleer of je Viewed Product -tracking werkt, wat ook nodig is om Added to Cart goed te laten werken. Dit fragment wordt handmatig toegevoegd, en je kunt in de Viewed Product-sectie van ons integratieartikel lezen hoe je het toevoegt en test.

Als je nog steeds problemen ondervindt met je snippet Toegevoegd aan winkelwagen, kan dit komen door een probleem met het identificeren van de knop "Toevoegen aan winkelwagen". Neem in dit geval contact op met Klaviyo-support.

De flow "Toegevoegd aan winkelwagen" voor winkelwagen verlaten

Wanneer je een flow voor winkelwagen verlaten maakt (met Added to Cart of Started Checkout), kun je naast e-mail ook Klaviyo SMS gebruiken. Zorg er om compliance-redenen voor dat je maar één sms in je flow verstuurt en als je meerdere soorten flows voor winkelwagen verlaten gebruikt, zorg er dan voor dat je sms maar in één daarvan gebruikt.

In het gedeelte Essentials van de bibliotheek vind je de standaard flow voor een herinnering voor winkelwagen verlaten. Deze flow wordt geactiveerd door de gebeurtenis Started Checkout.

Om aan de slag te gaan met een flow voor winkelwagen verlaten met de gebeurtenis Added to Cart, raden we aan de kant-en-klare flow te gebruiken die beschikbaar is in Klaviyo's flowbibliotheek, waarin de juiste flowfilter al zijn ingesteld. Deze flow is doorgaans gericht op meer casual potentiële shoppers die nog niet met afrekenen zijn begonnen.

De flow voor een winkelwagen verlaten die wordt geactiveerd door de gebeurtenis Added to Cart, vind je in de doelsectie "Prevent lost sales".

Als je het BigCommerce-fragment Added to Cart hebt geïmplementeerd, is deze flow direct klaar voor gebruik met alle aanbevolen filters en dynamische e-mailcontent om gepersonaliseerde vervolgmails voor verlaten winkelwagens te versturen.

Gebruik je Amazon Buy with Prime?

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

• Integreer Buy with Prime met Klaviyo om de gegevens van Buy with Prime naar je Klaviyo-account over 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