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

# Śledź dodania do koszyka w narzędziu zewnętrznym

> Wysyłaj zdarzenia Aftersell Cart do Klaviyo, Triple Whale, GA4 lub dowolnego piksela analitycznego za pomocą magistrali zdarzeń Cart SDK.

Aftersell samodzielnie obsługuje dodawanie do koszyka, co oznacza, że narzędzia analityczne obserwujące domyślne żądania koszyka Shopify mogą tego nie widzieć. Subskrypcja zdarzeń SDK przywraca śledzenie i daje czystszy payload niż zbieranie danych z Ajax API.

To najczęstsze zastosowanie SDK przez sprzedawców.

<div id="the-pattern">
  ## Schemat
</div>

Każda integracja to te same trzy linie: zasubskrybuj zdarzenie, odczytaj payload, przekaż go do swojego narzędzia.

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

Wklej to w **Cart settings → Custom script → Initialization**. Subskrypcja to wywołanie konfiguracyjne, więc jest bezpieczna na samej górze i nie musisz czekać na załadowanie koszyka.

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

Upewnij się najpierw, że [śledzenie onsite Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4425956184731) jest zainstalowane. Ten skrypt jedynie wysyła zdarzenie; nie ładuje 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">
  ## Inne zdarzenia warte śledzenia
</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>
  W obsłudze zdarzenia `checkout` używaj [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon). Strona za chwilę się wyładuje, a zwykły `fetch` może zostać anulowany w trakcie. Z tej obsługi **nie da się też anulować checkoutu**; to powiadomienie, a nie bramka.
</Warning>

<div id="things-to-get-right">
  ## Rzeczy, które trzeba zrobić dobrze
</div>

* **Ceny są w centach.** Dziel przez 100 dla narzędzi oczekujących kwoty dziesiętnej. [`formatMoney`](/pl/aftersell/cart/sdk-actions#formatmoneycents) służy tylko do wyświetlania, więc nie wysyłaj sformatowanego ciągu do narzędzia analitycznego.
* **Zwiększenie ilości to nie `item_added`.** Przejście z 1 na 3 na istniejącej pozycji wywołuje `cart_updated`, a nie `item_added`. Jeśli Twoje narzędzie musi to widzieć, porównuj z poprzednim stanem w obsłudze `cart_updated`.
* **Nie śledź z `cart_updated`, jeśli chodzi Ci o „dodano”.** To zdarzenie odpala się przy każdej zmianie, w tym usunięciach i edycjach ilości, więc zawyżysz raporty.
* **Sprawdź podwójne zliczanie.** Jeśli Twoje narzędzie już przechwytuje dodania do koszyka w inny sposób, ten skrypt zgłosi je dwukrotnie. Zweryfikuj w podglądzie na żywo narzędzia przed wdrożeniem.

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

Dodaj `console.log` obok wywołania śledzącego, następnie otwórz konsolę przeglądarki i dodaj 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
});
```

Jeśli log się nie pojawia, skrypt nie działa — sprawdź, czy zapisał się w slocie **Initialization**. Jeśli log się pojawia, ale narzędzie nic nie pokazuje, problem leży w formacie payloadu narzędzia, a nie w SDK.

<div id="where-to-go-next">
  ## Co dalej
</div>

* **[Events](/pl/aftersell/cart/sdk-events)**: każde zdarzenie i kiedy się odpala.
* **[Obiekt koszyka](/pl/aftersell/cart/sdk-cart-object)**: każde pole, które możesz wysłać.
* **[Analityka koszyka](/pl/aftersell/cart/analytics)**: raporty, które Aftersell udostępnia od razu.