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

# Отслеживание добавления в корзину в стороннем инструменте

> Отправляйте события Aftersell Cart в Klaviyo, Triple Whale, GA4 или любой аналитический пиксель с помощью шины событий Cart SDK.

Aftersell обрабатывает добавление в корзину самостоятельно, а это значит, что аналитические инструменты, отслеживающие стандартные запросы корзины Shopify, могут его не увидеть. Подписка на события SDK восстанавливает отслеживание и даёт более чистый payload, чем парсинг Ajax API.

Это самое частое, для чего мерчанты используют SDK.

<div id="the-pattern">
  ## Шаблон
</div>

Каждая интеграция состоит из одних и тех же трёх строк: подпишитесь на событие, прочитайте payload, передайте его в ваш инструмент.

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

Вставьте это в **Cart settings → Custom script → Initialization**. Подписка — это вызов настройки, поэтому она безопасна в самом начале, и вам не нужно ждать загрузки корзины.

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

Сначала убедитесь, что установлено [onsite-отслеживание Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4425956184731). Этот скрипт только отправляет событие; он не загружает 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">
  ## Другие события, которые стоит отслеживать
</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>
  Используйте [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) в обработчике `checkout`. Страница вот-вот выгрузится, и обычный `fetch` может быть отменён на полпути. Кроме того, из этого обработчика **нельзя отменить оформление заказа**; это уведомление, а не шлюз.
</Warning>

<div id="things-to-get-right">
  ## Что важно сделать правильно
</div>

* **Цены указаны в центах.** Делите на 100 для инструментов, ожидающих десятичную сумму. [`formatMoney`](/ru/aftersell/cart/sdk-actions#formatmoneycents) предназначен только для отображения, поэтому не отправляйте отформатированную строку в аналитический инструмент.
* **Увеличение количества — это не `item_added`.** Переход с 1 до 3 в существующей строке вызывает `cart_updated`, а не `item_added`. Если вашему инструменту нужно это видеть, сравнивайте с предыдущим состоянием в обработчике `cart_updated`.
* **Не отслеживайте через `cart_updated`, если имеете в виду «добавлено».** Оно срабатывает при каждом изменении, включая удаления и правки количества, поэтому вы будете завышать показатели.
* **Проверьте на двойной подсчёт.** Если ваш инструмент уже фиксирует добавление в корзину другим способом, этот скрипт будет сообщать о нём дважды. Перед запуском проверьте в live-режиме инструмента.

<div id="testing-it">
  ## Тестирование
</div>

Добавьте `console.log` рядом с вызовом отслеживания, затем откройте консоль браузера и добавьте товар:

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

Если лог не появляется, скрипт не выполняется, поэтому проверьте, что он сохранён в слоте **Initialization**. Если лог появляется, но инструмент ничего не показывает, проблема в формате payload инструмента, а не в SDK.

<div id="where-to-go-next">
  ## Что дальше
</div>

* **[События](/ru/aftersell/cart/sdk-events)**: каждое событие и когда оно срабатывает.
* **[Объект корзины](/ru/aftersell/cart/sdk-cart-object)**: каждое поле, которое вы можете отправить.
* **[Аналитика корзины](/ru/aftersell/cart/analytics)**: отчётность, которую Aftersell предоставляет из коробки.