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

# Spor add-to-cart i et tredjepartsværktøj

> Send Aftersell Cart-events til Klaviyo, Triple Whale, GA4 eller enhver analytics-pixel via Cart SDK'ets event-bus.

Aftersell håndterer selv add-to-cart, hvilket betyder, at analytics-værktøjer, der overvåger Shopifys standard-kurvforespørgsler, muligvis ikke ser det. Ved at abonnere på SDK'ets events genopretter du sporingen og får en renere payload end ved at skrabe Ajax API'et.

Det er det mest almindelige, forhandlere bruger SDK'et til.

<div id="the-pattern">
  ## Mønstret
</div>

Hver integration er de samme tre linjer: abonner på et event, læs payloaden, videresend den til dit værktøj.

```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
  });
});
```

Indsæt det i **Cart settings → Custom script → Initialization**. At abonnere er et opsætningskald, så det er sikkert helt øverst, og du behøver derfor ikke vente på, at kurven indlæses.

<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`,
  }]);
});
```

Sørg for, at [Klaviyo onsite tracking](https://help.klaviyo.com/hc/en-us/articles/4425956184731) er installeret først. Dette script fyrer kun eventet; det indlæser ikke Klaviyo.

<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">
  ## Andre events, der er værd at spore
</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>
  Brug [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) i en `checkout`-handler. Siden er ved at blive lukket ned, og et normalt `fetch` kan blive annulleret undervejs. Du **kan heller ikke annullere checkout** fra denne handler; det er en notifikation, ikke en port.
</Warning>

<div id="things-to-get-right">
  ## Ting du skal have styr på
</div>

* **Priser er i cents.** Divider med 100 for værktøjer, der forventer et decimalbeløb. [`formatMoney`](/da/aftersell/cart/sdk-actions#formatmoneycents) er kun til visning, så send ikke en formateret streng til et analytics-værktøj.
* **En antalsforøgelse er ikke `item_added`.** At gå fra 1 til 3 på en eksisterende linje fyrer `cart_updated`, ikke `item_added`. Hvis dit værktøj skal se det, så diff mod den forrige tilstand i en `cart_updated`-handler.
* **Spor ikke fra `cart_updated`, hvis du mener "tilføjet".** Det fyrer ved hver ændring, inklusive fjernelser og antalsredigeringer, så du vil overrapportere.
* **Tjek for dobbelttælling.** Hvis dit værktøj allerede fanger add-to-cart på anden vis, rapporterer dette script det to gange. Verificér i værktøjets live-visning, før du går live.

<div id="testing-it">
  ## Test det
</div>

Tilføj en `console.log` ved siden af dit sporingskald, åbn så browserkonsollen og tilføj et produkt:

```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
});
```

Hvis loggen ikke vises, kører scriptet ikke, så tjek, at det blev gemt i **Initialization**-slottet. Hvis loggen vises, men værktøjet intet viser, ligger problemet i værktøjets payload-format, ikke i SDK'et.

<div id="where-to-go-next">
  ## Hvor du kan gå hen herfra
</div>

* **[Events](/da/aftersell/cart/sdk-events)**: hvert event, og hvornår det fyrer.
* **[Cart-objektet](/da/aftersell/cart/sdk-cart-object)**: hvert felt du kan sende.
* **[Kurv-analytics](/da/aftersell/cart/analytics)**: den rapportering, Aftersell leverer som standard.