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

すべての連携は同じ3行です。イベントをサブスクライブし、ペイロードを読み取り、ツールに転送します。

```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`](/ja/aftersell/cart/sdk-actions#formatmoneycents)は表示専用なので、フォーマット済みの文字列を分析ツールに送らないでください。
* **数量の増加は`item_added`ではありません。** 既存のラインで1から3に増やすと、`item_added`ではなく`cart_updated`が発火します。ツールでこれを検知する必要がある場合は、`cart_updated`ハンドラー内で前の状態との差分を取ってください。
* **「追加」を意図するなら`cart_updated`からトラッキングしないでください。** これは削除や数量の編集を含むすべての変更で発火するため、過剰に報告されてしまいます。
* **二重カウントを確認してください。** ツールがすでに別の方法でカート追加を捕捉している場合、このスクリプトによって2回報告されます。公開前にツールのライブビューで確認してください。

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

* **[イベント](/ja/aftersell/cart/sdk-events)**：すべてのイベントとその発火タイミング。
* **[カートオブジェクト](/ja/aftersell/cart/sdk-cart-object)**：送信できるすべてのフィールド。
* **[カート分析](/ja/aftersell/cart/analytics)**：Aftersellが標準で提供するレポート機能。