> ## 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 in einem Drittanbieter-Tool tracken

> Sende Aftersell-Cart-Events an Klaviyo, Triple Whale, GA4 oder jedes andere Analytics-Pixel über den Event-Bus des Cart SDK.

Aftersell wickelt Add-to-Cart selbst ab, was bedeutet, dass Analytics-Tools, die Shopifys Standard-Warenkorb-Requests beobachten, es möglicherweise nicht sehen. Ein Abonnement der SDK-Events stellt das Tracking wieder her und liefert dir ein saubereres Payload, als die Ajax-API zu scrapen.

Das ist der häufigste Anwendungsfall, für den Händler das SDK nutzen.

<div id="the-pattern">
  ## Das Muster
</div>

Jede Integration besteht aus denselben drei Zeilen: ein Event abonnieren, das Payload lesen, an dein Tool weiterleiten.

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

Füge es in **Cart settings → Custom script → Initialization** ein. Das Abonnieren ist ein Setup-Aufruf und daher ganz oben sicher — du musst also nicht warten, bis der Warenkorb geladen ist.

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

Stelle sicher, dass zuerst das [Klaviyo Onsite-Tracking](https://help.klaviyo.com/hc/en-us/articles/4425956184731) installiert ist. Dieses Script feuert nur das Event; es lädt Klaviyo nicht.

<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">
  ## Weitere Events, die sich zu tracken lohnen
</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>
  Verwende [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) in einem `checkout`-Handler. Die Seite wird gleich entladen, und ein normales `fetch` kann mittendrin abgebrochen werden. Außerdem **kannst du den Checkout aus diesem Handler nicht abbrechen**; er ist eine Benachrichtigung, kein Gate.
</Warning>

<div id="things-to-get-right">
  ## Worauf du achten musst
</div>

* **Preise sind in Cent.** Teile durch 100 für Tools, die einen Dezimalbetrag erwarten. [`formatMoney`](/de/aftersell/cart/sdk-actions#formatmoneycents) ist nur für die Anzeige gedacht, sende also keinen formatierten String an ein Analytics-Tool.
* **Eine Mengenerhöhung ist kein `item_added`.** Wenn eine bestehende Position von 1 auf 3 geht, feuert `cart_updated`, nicht `item_added`. Wenn dein Tool das sehen muss, vergleiche in einem `cart_updated`-Handler mit dem vorherigen Zustand.
* **Tracke nicht über `cart_updated`, wenn du „hinzugefügt“ meinst.** Es feuert bei jeder Änderung, auch bei Entfernungen und Mengenänderungen, du würdest also zu viel melden.
* **Prüfe auf Doppelzählungen.** Wenn dein Tool Add-to-Cart bereits auf anderem Weg erfasst, meldet dieses Script es doppelt. Verifiziere das in der Live-Ansicht des Tools, bevor du live gehst.

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

Füge neben deinem Tracking-Aufruf ein `console.log` hinzu, öffne dann die Browser-Konsole und füge ein Produkt hinzu:

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

Wenn das Log nicht erscheint, läuft das Script nicht — prüfe, ob es im **Initialization**-Slot gespeichert wurde. Wenn das Log erscheint, aber das Tool nichts anzeigt, liegt das Problem im Payload-Format des Tools, nicht im SDK.

<div id="where-to-go-next">
  ## Nächste Schritte
</div>

* **[Events](/de/aftersell/cart/sdk-events)**: jedes Event und wann es feuert.
* **[Cart-Objekt](/de/aftersell/cart/sdk-cart-object)**: jedes Feld, das du senden kannst.
* **[Cart Analytics](/de/aftersell/cart/analytics)**: das Reporting, das Aftersell von Haus aus mitbringt.