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

# 在第三方工具中追踪加入购物车

> 使用 Cart SDK 事件总线将 Aftersell Cart 事件发送到 Klaviyo、Triple Whale、GA4 或任何分析像素。

Aftersell 自己处理加入购物车，这意味着监视 Shopify 默认购物车请求的分析工具可能看不到它。订阅 SDK 的事件可以恢复追踪，并且比抓取 Ajax API 得到更干净的载荷。

这是商家使用 SDK 最常见的用途。

<div id="the-pattern">
  ## 模式
</div>

每个集成都是相同的三行代码：订阅事件、读取载荷、转发给你的工具。

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

请先确保已安装 [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>
  在 `checkout` 处理函数中请使用 [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)。页面即将卸载，普通的 `fetch` 可能在传输途中被取消。你也**无法从这个处理函数取消结账**；它是一个通知，不是一道闸门。
</Warning>

<div id="things-to-get-right">
  ## 需要注意的要点
</div>

* \*\*价格以分为单位。\*\*对于期望小数金额的工具，请除以 100。[`formatMoney`](/zh/aftersell/cart/sdk-actions#formatmoneycents) 仅用于显示，所以不要向分析工具发送格式化后的字符串。
* \*\*数量增加不算 `item_added`。\*\*现有行从 1 增加到 3 会触发 `cart_updated`，而不是 `item_added`。如果你的工具需要看到这个，请在 `cart_updated` 处理函数中与之前的状态做差异比较。
* \*\*如果你指的是"已添加"，不要从 `cart_updated` 追踪。\*\*它在每次变化时都触发，包括移除和数量修改，所以你会多报。
* \*\*检查重复统计。\*\*如果你的工具已经以其他方式捕获加入购物车，这个脚本会报告两次。上线前请在工具的实时视图中验证。

<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** 插槽。如果日志出现但工具中没有任何显示，问题在于工具的载荷格式，而不是 SDK。

<div id="where-to-go-next">
  ## 后续阅读
</div>

* **[事件](/zh/aftersell/cart/sdk-events)**：每个事件及其触发时机。
* **[购物车对象](/zh/aftersell/cart/sdk-cart-object)**：你可以发送的每个字段。
* **[购物车分析](/zh/aftersell/cart/analytics)**：Aftersell 开箱即用提供的报表。