> ## 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`](/ko/aftersell/cart/sdk-actions#formatmoneycents)는 표시용이므로, 포맷된 문자열을 분석 도구에 보내지 마세요.
* **수량 증가는 `item_added`가 아니에요.** 기존 라인에서 1에서 3으로 늘어나면 `item_added`가 아니라 `cart_updated`가 발생해요. 도구에서 이를 감지해야 한다면 `cart_updated` 핸들러에서 이전 상태와 비교(diff)하세요.
* **"추가됨"을 의미한다면 `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>

* **[Events](/ko/aftersell/cart/sdk-events)**: 모든 이벤트와 발생 시점.
* **[Cart 객체](/ko/aftersell/cart/sdk-cart-object)**: 전송할 수 있는 모든 필드.
* **[카트 분석](/ko/aftersell/cart/analytics)**: Aftersell이 기본으로 제공하는 리포팅.