Overzicht

Standaard neemt Upcart de cartfunctionaliteit van Shopify over, wat kan voorkomen dat apps van derden zoals Klaviyo cartupdates detecteren. Gelukkig zijn er twee betrouwbare manieren om Add to Cart (ATC)-tracking in Klaviyo te herstellen terwijl Upcart actief blijft. Zorg er voordat je begint voor dat Klaviyo Onsite Tracking correct is geconfigureerd. Je kunt hun installatiehandleiding hier volgen:
👉 Klaviyo Onsite Tracking installatiehandleiding

Optie 1: Gebruik AJAX-compatibiliteit (snelste opzet)

Upcart bevat een instelling die de compatibiliteit met andere apps herstelt door het native cartupdategedrag van Shopify beschikbaar te maken. Wanneer dit is ingeschakeld, kan Klaviyo weer luisteren naar Add to Cart-events.

Zo schakel je het in:

Ga naar Upcart > Cart Editor > Settings > Cart settings
Scrol naar Advanced Settings en klap deze uit
Vink Enhanced Ajax API compatibility aan
Klik op Save en test het resultaat

⚠️ Belangrijk: afwegingen bij Enhanced AJAX API Compatibility
Deze instelling is voor de meeste winkels standaard uitgeschakeld. Schakel deze ALLEEN in als je winkel een niet-standaard AJAX-cart-API gebruikt en Upcart de add-to-cart-events niet onderschept. Wanneer ingeschakeld, krijgen andere apps meer controle over het cartgedrag, wat redirect-loops kan veroorzaken of klanten naar de Shopify-cartpagina kan sturen in plaats van de Upcart-drawer te openen. Als het inschakelen van deze instelling redirects veroorzaakt, schakel deze dan uit en stap over op Optie 2, met de handmatige Upcart API (upcartRegisterAddToCart). Voor volledige richtlijnen over deze instelling, zie Enhanced AJAX API Compatibility.

Optie 2 (aanbevolen): Voeg een aangepast Klaviyo-script toe

Deze methode geeft je het beste van twee werelden: Upcart houdt de volledige controle en Klaviyo-tracking blijft werken.

Stappen:

Open Upcart > Cart Editor > Settings
Scrol omlaag naar de sectie Custom HTML
Kies in de dropdown Scripts (Before Load)
Plak het volgende script:

Moderne API (aanbevolen):

<script>
  function TrackATC(){
    var _learnq = window._learnq || [];
    _learnq.push(['track', 'Added to Cart']);
    console.log("Klaviyo ATC");
  }

  window.upcartSubscribeAddedToCart(function(event) { TrackATC(); });
  window.upcartSubscribeUpsellsAddedToCart(function(event) { TrackATC(); });
</script>

Plak het hele blok, inclusief de functie TrackATC. De subscriber roept deze aan, dus een snippet met alleen de twee upcartSubscribe…-regels gooit bij elke add to cart een Uncaught ReferenceError: TrackATC is not defined en stuurt niets naar Klaviyo.

Legacy API (werkt nog steeds maar is verouderd):

<script>  
  function TrackATC(){  
    var _learnq = window._learnq || [];  
    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,  
          };  
          _learnq.push(['track', 'Added to Cart', cart]);  
          console.log("Klaviyo ATC");  
        }).catch((e) => {  
          console.error('Klaviyo add to cart tracking failed', e);  
        })  
      );  
  }  
  
  window.upcartOnAddToCart = () => { TrackATC(); };  
  window.upcartOnAddUpsell = () => { TrackATC(); };  
</script>

Wat dit doet:

Stuurt een “Added to Cart”-event naar Klaviyo telkens wanneer een product of upsell wordt toegevoegd met Upcart
Voegt een bevestigingsbericht (Klaviyo ATC) toe aan je browserconsole zodat je weet dat het werkt

Zo test je je opzet

Om te bevestigen dat je Klaviyo-integratie goed werkt:

Volg de handleiding van Klaviyo voor het testen van Add to Cart-events
Gebruik het tabblad Console van je browser om te controleren of het “Klaviyo ATC”-logbericht verschijnt na het toevoegen van een product
Controleer het analytics-dashboard van Klaviyo op ATC-eventgegevens

Als je nog steeds geen trackinggegevens ziet, controleer dan of de onsite-scripts van Klaviyo zijn geïnstalleerd en ingeschakeld. Neem voor hulp contact op met het Klaviyo Help Center.

Samenvatting


Methode	Voordelen	Wanneer te gebruiken
Optie 1 – AJAX-compatibiliteit inschakelen	Snelste opzet, geen code nodig	Wanneer andere apps niet interfereren
Optie 2 – Aangepast script toevoegen	Meest betrouwbaar, Upcart houdt de controle	Wanneer Optie 1 cart-redirects veroorzaakt

Als je Klaviyo en Upcart samen gebruikt, zou deze gids je moeten helpen om events soepel te tracken terwijl je cart drawer-ervaring intact blijft.

Meer hulp nodig? Neem contact met ons op via de support in de app.

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Klaviyo add-to-cart-eventtracking in Upcart

Overzicht

Optie 1: Gebruik AJAX-compatibiliteit (snelste opzet)

Zo schakel je het in:

Optie 2 (aanbevolen): Voeg een aangepast Klaviyo-script toe

Stappen:

Wat dit doet:

Zo test je je opzet

Samenvatting

​Overzicht

​Optie 1: Gebruik AJAX-compatibiliteit (snelste opzet)

​Zo schakel je het in:

​Optie 2 (aanbevolen): Voeg een aangepast Klaviyo-script toe

​Stappen:

​Wat dit doet:

​Zo test je je opzet

​Samenvatting

Overzicht

Optie 1: Gebruik AJAX-compatibiliteit (snelste opzet)

Zo schakel je het in:

Optie 2 (aanbevolen): Voeg een aangepast Klaviyo-script toe

Stappen:

Wat dit doet:

Zo test je je opzet

Samenvatting