> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add-to-cart tracken in een externe tool

> Stuur Aftersell Cart-events naar Klaviyo, Triple Whale, GA4 of elke analytics-pixel met de eventbus van de Cart SDK.

Aftersell handelt add-to-cart zelf af, wat betekent dat analytics-tools die de standaard winkelwagenrequests van Shopify in de gaten houden het mogelijk niet zien. Je abonneren op de events van de SDK herstelt de tracking, en geeft je een schonere payload dan het uitlezen van de Ajax API.

Dit is waar merchants de SDK het vaakst voor gebruiken.

<div id="the-pattern">
  ## Het patroon
</div>

Elke integratie bestaat uit dezelfde drie regels: abonneer je op een event, lees de payload, stuur hem door naar je tool.

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  myAnalytics.track('Added to cart', {
    variantId: payload.item.variantId,
    title: payload.item.title,
    quantity: payload.item.quantity,
    value: payload.item.finalLinePrice / 100, // SDK prices are in cents
  });
});
```

Plak het in **Cart settings → Custom script → Initialization**. Abonneren is een set-up-aanroep, dus het is helemaal bovenaan veilig, en je hoeft dus niet te wachten tot de winkelwagen is geladen.

<div id="klaviyo">
  ## Klaviyo
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  const state = window.aftersell.cart.actions.getCart();
  if (!state) return;

  window._learnq ??= [];
  window._learnq.push(['track', 'Added to Cart', {
    $value: state.totalPrice / 100,
    AddedItemProductName: payload.item.productTitle,
    AddedItemProductID: payload.item.productId,
    AddedItemVariantID: payload.item.variantId,
    AddedItemQuantity: payload.item.quantity,
    AddedItemPrice: payload.item.finalLinePrice / 100,
    ItemNames: state.items.map((line) => line.productTitle),
    CheckoutURL: `${window.location.origin}/cart`,
  }]);
});
```

Zorg dat [Klaviyo onsite tracking](https://help.klaviyo.com/hc/en-us/articles/4425956184731) eerst is geïnstalleerd. Dit script vuurt alleen het event af; het laadt Klaviyo niet.

<div id="triple-whale">
  ## Triple Whale
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  window.TriplePixel('AddToCart', {
    item: payload.item.variantId,
    q: payload.item.quantity,
  });
});
```

<div id="google-analytics-4">
  ## Google Analytics 4
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  const line = payload.item;
  window.gtag('event', 'add_to_cart', {
    currency: window.aftersell.cart.actions.getCart().currency,
    value: line.finalLinePrice / 100,
    items: [{
      item_id: String(line.variantId),
      item_name: line.productTitle,
      item_variant: line.variantTitle,
      price: line.finalLinePrice / line.quantity / 100,
      quantity: line.quantity,
    }],
  });
});
```

<div id="other-events-worth-tracking">
  ## Andere events die het tracken waard zijn
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Cart viewed.
window.aftersell.cart.events.on('cart_opened', () => {
  myAnalytics.track('Cart viewed');
});

// Item removed.
window.aftersell.cart.events.on('item_removed', (payload) => {
  myAnalytics.track('Removed from cart', { variantId: payload.item.variantId });
});

// Checkout intent: fires just before the browser navigates.
window.aftersell.cart.events.on('checkout', () => {
  const state = window.aftersell.cart.actions.getCart();
  navigator.sendBeacon('/my-endpoint', JSON.stringify({
    event: 'checkout_started',
    value: state ? state.totalPrice / 100 : 0,
  }));
});
```

<Warning>
  Gebruik [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) in een `checkout`-handler. De pagina staat op het punt te unloaden, en een normale `fetch` kan halverwege worden geannuleerd. Je kunt vanuit deze handler ook **de checkout niet annuleren**; het is een notificatie, geen poort.
</Warning>

<div id="things-to-get-right">
  ## Dingen om goed te doen
</div>

* **Prijzen zijn in centen.** Deel door 100 voor tools die een decimaal bedrag verwachten. [`formatMoney`](/nl/aftersell/cart/sdk-actions#formatmoneycents) is alleen voor weergave, dus stuur geen geformatteerde string naar een analytics-tool.
* **Een verhoging van het aantal is geen `item_added`.** Van 1 naar 3 gaan op een bestaande regel vuurt `cart_updated` af, niet `item_added`. Als je tool dat moet zien, vergelijk dan met de vorige status in een `cart_updated`-handler.
* **Track niet vanuit `cart_updated` als je "toegevoegd" bedoelt.** Het vuurt bij elke wijziging af, inclusief verwijderingen en aantal-aanpassingen, dus je rapporteert te veel.
* **Controleer op dubbeltellingen.** Als je tool add-to-cart al op een andere manier vastlegt, rapporteert dit script het dubbel. Verifieer dit in de live-weergave van de tool voordat je live gaat.

<div id="testing-it">
  ## Testen
</div>

Voeg een `console.log` toe naast je tracking-aanroep, open dan de browserconsole en voeg een product toe:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('item_added', (payload) => {
  console.log('[tracking] item_added', payload.item.title);
  // …your tracking call
});
```

Als de log niet verschijnt, draait het script niet, dus controleer of het in het **Initialization**-slot is opgeslagen. Als de log verschijnt maar de tool niets toont, zit het probleem in het payload-formaat van de tool, niet in de SDK.

<div id="where-to-go-next">
  ## Waar je verder kunt kijken
</div>

* **[Events](/nl/aftersell/cart/sdk-events)**: elk event en wanneer het afgaat.
* **[Cart object](/nl/aftersell/cart/sdk-cart-object)**: elk veld dat je kunt versturen.
* **[Cart analytics](/nl/aftersell/cart/analytics)**: de rapportage die Aftersell standaard biedt.