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

# Rastrear o adicionar ao carrinho em uma ferramenta de terceiros

> Envie eventos do Aftersell Cart para Klaviyo, Triple Whale, GA4 ou qualquer pixel de analytics usando o barramento de eventos do Cart SDK.

A Aftersell processa o adicionar ao carrinho por conta própria, o que significa que ferramentas de analytics que observam as requisições padrão de carrinho da Shopify podem não vê-lo. Assinar os eventos do SDK restaura o rastreamento e dá a você um payload mais limpo do que raspar a Ajax API.

Isso é a coisa mais comum para a qual os lojistas usam o SDK.

<div id="the-pattern">
  ## O padrão
</div>

Toda integração são as mesmas três linhas: assinar um evento, ler o payload, encaminhá-lo para sua ferramenta.

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

Cole em **Cart settings → Custom script → Initialization**. Assinar é uma chamada de configuração, então é seguro logo no topo, e você não precisa esperar o carrinho carregar.

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

Certifique-se de que o [rastreamento onsite do Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4425956184731) esteja instalado primeiro. Este script só dispara o evento; ele não carrega o 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">
  ## Outros eventos que valem a pena rastrear
</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>
  Use [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) em um handler de `checkout`. A página está prestes a ser descarregada, e um `fetch` normal pode ser cancelado no meio do caminho. Você também **não pode cancelar o checkout** a partir deste handler; ele é uma notificação, não um portão.
</Warning>

<div id="things-to-get-right">
  ## Coisas para acertar
</div>

* **Os preços estão em centavos.** Divida por 100 para ferramentas que esperam um valor decimal. [`formatMoney`](/pt/aftersell/cart/sdk-actions#formatmoneycents) é só para exibição, então não envie uma string formatada para uma ferramenta de analytics.
* **Um aumento de quantidade não é `item_added`.** Ir de 1 para 3 em uma linha existente dispara `cart_updated`, não `item_added`. Se sua ferramenta precisa ver isso, compare com o estado anterior em um handler de `cart_updated`.
* **Não rastreie a partir de `cart_updated` se você quer dizer "adicionado".** Ele dispara em toda mudança, incluindo remoções e edições de quantidade, então você vai reportar a mais.
* **Verifique dupla contagem.** Se sua ferramenta já captura o adicionar ao carrinho de outra forma, este script vai reportá-lo duas vezes. Verifique na visualização ao vivo da ferramenta antes de colocar no ar.

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

Adicione um `console.log` ao lado da sua chamada de rastreamento, depois abra o console do navegador e adicione um produto:

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

Se o log não aparecer, o script não está executando, então verifique se ele foi salvo no slot **Initialization**. Se o log aparecer mas a ferramenta não mostrar nada, o problema está no formato de payload da ferramenta, não no SDK.

<div id="where-to-go-next">
  ## Para onde ir a seguir
</div>

* **[Events](/pt/aftersell/cart/sdk-events)**: todo evento e quando dispara.
* **[Cart object](/pt/aftersell/cart/sdk-cart-object)**: todo campo que você pode enviar.
* **[Cart analytics](/pt/aftersell/cart/analytics)**: os relatórios que a Aftersell fornece de fábrica.