> ## 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 agregar al carrito en una herramienta de terceros

> Envía eventos del Aftersell Cart a Klaviyo, Triple Whale, GA4 o cualquier píxel de analíticas usando el bus de eventos del Cart SDK.

Aftersell maneja el agregar al carrito por sí mismo, lo que significa que las herramientas de analíticas que observan las solicitudes de carrito predeterminadas de Shopify pueden no verlo. Suscribirse a los eventos del SDK restaura el seguimiento, y te da un payload más limpio que raspar la Ajax API.

Esto es lo más común para lo que los comerciantes usan el SDK.

<div id="the-pattern">
  ## El patrón
</div>

Toda integración son las mismas tres líneas: suscríbete a un evento, lee el payload, reenvíalo a tu herramienta.

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

Pégalo en **Cart settings → Custom script → Initialization**. Suscribirse es una llamada de configuración, así que es seguro al principio de todo, de modo que no necesitas esperar a que el carrito se cargue.

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

Asegúrate de que el [seguimiento onsite de Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4425956184731) esté instalado primero. Este script solo dispara el evento; no carga 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">
  ## Otros eventos que vale la 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>
  Usa [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) en un handler de `checkout`. La página está a punto de descargarse, y un `fetch` normal puede cancelarse a mitad de camino. Tampoco **puedes cancelar el checkout** desde este handler; es una notificación, no una compuerta.
</Warning>

<div id="things-to-get-right">
  ## Cosas que hay que hacer bien
</div>

* **Los precios están en centavos.** Divide entre 100 para las herramientas que esperan un monto decimal. [`formatMoney`](/es/aftersell/cart/sdk-actions#formatmoneycents) es solo para visualización, así que no envíes una cadena formateada a una herramienta de analíticas.
* **Un aumento de cantidad no es `item_added`.** Pasar de 1 a 3 en una línea existente dispara `cart_updated`, no `item_added`. Si tu herramienta necesita ver eso, compara contra el estado anterior en un handler de `cart_updated`.
* **No rastrees desde `cart_updated` si quieres decir "agregado".** Se dispara en cada cambio, incluyendo eliminaciones y ediciones de cantidad, así que reportarás de más.
* **Verifica el doble conteo.** Si tu herramienta ya captura el agregar al carrito de otra manera, este script lo reportará dos veces. Verifica en la vista en vivo de la herramienta antes de salir en vivo.

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

Agrega un `console.log` junto a tu llamada de seguimiento, luego abre la consola del navegador y agrega un producto:

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

Si el log no aparece, el script no se está ejecutando, así que verifica que se guardó en el slot de **Initialization**. Si el log aparece pero la herramienta no muestra nada, el problema está en el formato del payload de la herramienta, no en el SDK.

<div id="where-to-go-next">
  ## Adónde ir después
</div>

* **[Eventos](/es/aftersell/cart/sdk-events)**: cada evento y cuándo se dispara.
* **[Objeto cart](/es/aftersell/cart/sdk-cart-object)**: cada campo que puedes enviar.
* **[Analíticas del carrito](/es/aftersell/cart/analytics)**: los reportes que Aftersell proporciona de fábrica.