Handmatig een Toegevoegd aan Winkelwagen-gebeurtenis maken voor Shopify

Wat je leert

Leer hoe je handmatig een Toegevoegd aan Winkelwagen-gebeurtenis voor Shopify maakt om bij te houden wanneer klanten een artikel aan hun winkelwagen toevoegen. Deze kun je gebruiken om een flow voor verlaten winkelwagens te triggeren. 

Toegevoegd aan Winkelwagen verschilt van de gebeurtenis Afrekenen Gestart van Klaviyo. Afrekenen Gestart wordt getriggerd nadat klanten een artikel aan hun winkelwagen hebben toegevoegd, hun e-mail hebben ingevoerd tijdens het afrekenen en doorgaan naar Afrekenen. Dit gebeurt verderop in de trechter, terwijl Toegevoegd aan Winkelwagen getriggerd wordt zodra klanten een artikel toevoegen aan hun winkelwagen. 

Voordat je van start gaat

• Lees ons artikel Aan de slag met Shopify voor stapsgewijze instructies over het integreren voordat je doorgaat met dit artikel.
• Zorg ervoor dat je Klaviyo-tracking op de website hebt ingeschakeld (inclusief Tracking van bekeken producten) zodat de gebeurtenis Toegevoegd aan Winkelwagen correct werkt.
• Houd er rekening mee dat de gebeurtenis Toegevoegd aan Winkelwagen alleen gebruikers volgt die eerder een cookie van Klaviyo hebben gehad.

De gebeurtenis Toegevoegd aan Winkelwagen maken

Om de gebeurtenis Toegevoegd aan Winkelwagen te maken, moet je 3 stappen doorlopen: 

1. Kies waar je het codefragment plaatst
2. Voeg het fragment toe aan je webshop
3. Test het codefragment

Waar plak ik het fragment?

Zorg ervoor dat je het fragment op je standaard productpagina plakt en op alle andere productpagina's die je mogelijk hebt.

Als je webshop aangepaste 'liquid blocks' heeft, gebruik je er een voor het fragment 

1. Ga in Shopify naar Webshop > Thema's.
2. Zoek je thema en klik op Aanpassen.
3. Klik bovenaan de pagina op het dropdownmenu Startpagina.
4. Selecteer Producten > Standaardproduct om naar je standaard productpagina te gaan.
5. Klik in de linkerzijbalk op Sectie toevoegen en selecteer dan Aangepaste liquid.
6. Plak het ontvangen fragment in het vak.
7. Klik rechtsboven op Opslaan.
8. In de linkerzijbalk verschijnt automatisch je nieuwe aangepaste liquid-blok voor Toegevoegd aan Winkelwagen onder de andere secties op de pagina.
   • Als je het blok Toegevoegd aan Winkelwagen wilt verplaatsen, plaats je de cursor op het blok en klik op de 6 stippen om het onder de andere secties te slepen
     
     

Als je webshop geen aangepast liquid-blok heeft, zet je het fragment in je theme.liquid-bestand

1. Ga in Shopify naar Webshop > Thema's.
2. Zoek je thema en klik op Aanpassen.
3. Klik op de drie stippen bovenaan en selecteer Code bewerken.
4. Open het bestand theme.liquid.
5. Plak het bijgeleverde fragment na alle andere code, vóór de eindtag </body>.
   
6. Voeg boven het fragment de volgende begintag toe: {% if product %}
   
7. Voeg direct na het fragment de volgende eindtag toe: {% endif %}
8. Je bestand moet er zo uitzien:
   
9. Klik op Opslaan.

Het fragment aan je website toevoegen

Het volgende Toegevoegd aan Winkelwagen-fragment werkt voor de meeste Shopify-webshops.

Voeg het onderstaande fragment toe aan je Shopify-webshop op de locatie die je hierboven hebt bepaald.

<script>
  window.addEventListener('load', function() {
  var _learnq = window._learnq || [];
  function addedToCart() {
   fetch(`${window.location.origin}/cart.js`)
   .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    if (klAjax) {
       _learnq.push(['track', 'Added to Cart', cart]);
       klAjax = false;
      }
   }))
  };
  (function (ns, fetch) {
    ns.fetch = function() {
      const response = fetch.apply(this, arguments);
      response.then(res => {
        if (`${window.location.origin}/cart/add.js`
          .includes(res.url) && res.url !== '') {
              addedToCart()
        }
      });
      return response
     }
  }(window, window.fetch));
  var klAjax = true;
  var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
  for (var i = 0; i < atcButtons.length; i++) { 
    atcButtons[i].addEventListener("click", function() {
      if (klAjax) {
        _learnq.push(['track', 'Added to Cart', item]);
        klAjax = false;
      }
    })
  }
  });
</script>

Als je klaar bent, test je de gebeurtenis met behulp van de aanwijzingen in het volgende gedeelte.

Je gebeurtenis Toegevoegd aan Winkelwagen testen

Let op: Klaviyo volgt alleen 'bekende browsers' of browsers die cookies ingesteld hebben (via een link in een e-mail, een ingevuld formulier, enz.). Om deze reden verschijnen Toegevoegd aan Winkelwagen-gebeurtenissen misschien niet zo snel in je account als je verwacht. Ga naar ons artikel over tracking op je website voor meer informatie over wie gevolgd wordt door Klaviyo. 

Om je gebeurtenis Toegevoegd aan Winkelwagen te testen, voeg je handmatig een cookie toe voor je e-mailadres. Volg deze stappen:

1. Ga naar je website.
2. Voeg op je homepage het volgende toe aan het einde van de URL, om testing.email@gmail.com te vervangen door je e-mailadres:
   ?utm_email=testing.email@gmail.com
   
   
3. Laad de pagina opnieuw.
4. Ga naar een productpagina op je site en klik op de knop Toevoegen aan winkelwagen.
5. Zoek in Klaviyo naar je e-mailadres.
   

Controleer of er een Klaviyo-profiel voor je is gemaakt (als dat nog niet bestond) en dat deze Toegevoegd aan Winkelwagen-gebeurtenis gevolgd is in je activiteitenfeed.

Heb je problemen met tracking van Toegevoegd aan Winkelwagen met het gegeven fragment?

Als je problemen ondervindt met tracking van Toegevoegd aan Winkelwagen met het gegeven fragment, kun je de 2 extra fragmenten hieronder proberen, die we fragment 2 en fragment 3 noemen. Voordat je een nieuw fragment test, verwijder je eerst het fragment dat niet werkt.

Bepalen welk back-upfragment je gaat proberen

Gebruikt je webshop een knop-ID om de knop Toevoegen aan winkelwagen te definiëren? Als het antwoord ja is, probeer dan fragment 2. Als je knop Toevoegen aan winkelwagen in plaats daarvan wordt gedefinieerd door een klassenotatie, gebruik je fragment 3. Zo kom je erachter of je webshop een knop-ID of klassenotatie gebruikt:

1. 1. Open een van de productpagina's van je website. 
   2. Klik met de rechtermuisknop op de knop Toevoegen aan winkelwagen en selecteer Inspecteren.
   3. De console wordt geopend en toont de broncode van je knop Toevoegen aan winkelwagen op het tabblad Elementen van de console.
   4. In het tabblad Elementen ziet je code er ongeveer zo uit:
      
   5. Deze knop Toevoegen aan winkelwagen heeft geen knop-ID (die zoiets zou bevatten als id = "button_ID_name"). In plaats daarvan wordt ernaar verwezen door een klassenotatie (class= "btn product-form_cart-submit btn–secondary-accent").

Fragment 2

Als je knop Toevoegen aan winkelwagen wordt gedefinieerd door een knop-ID, voeg je het onderstaande fragment samen met de benodigde tags toe aan je Shopify-webshop op de locatie die je hebt bepaald in het gedeelte Waar plak ik het fragment?

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

Dit fragment moet je waarschijnlijk aanpassen, omdat de variabele Toevoegen aan winkelwagen in het fragment overeen moet komen met de knop-ID die op je site wordt gebruikt.

De variabele Toevoegen aan winkelwagen , waarvan de standaardnaam AddToCart is, is gemarkeerd in het onderstaande fragment:

Het controleren van de ID van de knop vereist dezelfde stappen als het controleren op de aanwezigheid van een knop-ID op je site: 

1. Open een van de productpagina's van je site.
2. Klik met de rechtermuisknop op de knop Toevoegen aan winkelwagen en selecteer Inspecteren.
3. De console wordt geopend en toont de broncode van je knop Toevoegen aan winkelwagen. In de volgende afbeelding wordt de ID van de knop Toevoegen aan winkelwagen gemarkeerd in de console.
   
   De ID van de knop op de hier getoonde pagina (addToCart-product-template) is anders dan de variabele in het standaardfragment (AddToCart). 
4. Als ze niet overeenkomen, pas het fragment dan aan zodat het overeenkomt met de ID van je knop. Het aangepaste fragment van ons voorbeeld ziet er als volgt uit:
   

Fragment 3

Als je knop Toevoegen aan winkelwagen gedefinieerd is met een klassenotatie, voeg je het onderstaande fragment samen met de benodigde tags toe aan je Shopify-webshop op de locatie die je hebt bepaald in het gedeelte Waar plak ik het fragment?

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

Dit fragment moet je waarschijnlijk aanpassen, omdat de variabele Toevoegen aan winkelwagen in het fragment overeen moet komen met de klasse die op je site wordt gebruikt.

1. Open een van de productpagina's van je site.
2. Klik met de rechtermuisknop op de knop Toevoegen aan winkelwagen en selecteer Inspecteren.
3. De console wordt geopend en toont de broncode van je knop Toevoegen aan winkelwagen. De volgende afbeelding toont de klasse van de knop Toevoegen aan winkelwagen, gemarkeerd in de console.
   
4. Vergelijk de code van je knop tussen de aanhalingstekens (gemarkeerd in het bovenstaande voorbeeld) met de content tussen de haakjes na getElementsByClassName in het bovenstaande codefragment. De klasse in de screenshot is bijvoorbeeld btn product-form_cart-submit btn--secondary-accent en de variabele in het fragment is add-to-cart.
5. Als ze niet overeenkomen, pas je het fragment aan, zodat het overeenkomt met de klasse van je knop. Het aangepaste fragment van ons voorbeeld ziet er als volgt uit:
   

Als je problemen hebt met tracking van Toegevoegd aan Winkelwagen nadat je deze verschillende opties hebt geprobeerd, komt dit misschien door een probleem met de identificatie van de knop Toegevoegen aan winkelwagen. Neem in dit geval contact op met Klaviyo Support.

Volgende stap: de flow inschakelen voor het verlaten van Toegevoegd aan Winkelwagen

De standaard Klaviyo-flow voor verlaten winkelwagens wordt getriggerd door de gebeurtenis Afrekenen Gestart, terwijl de flow voor het verlaten van Toegevoegd aan Winkelwagen gericht is op de meer casual shoppers die nog moeten beginnen met afrekenen.

Om deze flow in te schakelen, raden we aan de kant-en-klare flow te gebruiken die beschikbaar is in de flowbibliotheek van Klaviyo:

1. Ga naar de flowbibliotheek van Klaviyo.
2. Klik op het gedeelte voor het doel Verloren verkoop voorkomen.
3. Selecteer een flow voor Toegevoegd aan Winkelwagen-trigger en Verlaten winkelwagen-herinnering. Er zijn twee opties: alleen e-mail of e-mail en sms.
   
4. Als je de gebeurtenis Toegevoegd aan Winkelwagen hebt gemaakt, is deze flow klaar voor gebruik met alle aanbevolen filters en dynamische e-mailcontent om gepersonaliseerde vervolgberichten bij verlaten winkelwagens te sturen.

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 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.

Resultaat 

Je hebt nu een Shopify-gebeurtenis Toegevoegd aan Winkelwagen gemaakt en getest, en een flow voor het verlaten van Toegevoegd aan Winkelwagen ingeschakeld. 

Extra hulpbronnen

• Aan de slag met de flow voor verlaten winkelwagens
• Referentie van Shopify-gegevens
• Problemen met je Shopify-integratie oplossen