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

# Traccia l'aggiunta al carrello in uno strumento di terze parti

> Invia gli eventi dell'Aftersell Cart a Klaviyo, Triple Whale, GA4 o qualsiasi pixel di analytics usando il bus di eventi del Cart SDK.

Aftersell gestisce da solo l'aggiunta al carrello, il che significa che gli strumenti di analytics che osservano le richieste standard del carrello di Shopify potrebbero non vederla. Iscriversi agli eventi dell'SDK ripristina il tracciamento e ti offre un payload più pulito rispetto a fare scraping dell'Ajax API.

Questa è la cosa più comune per cui i merchant usano l'SDK.

<div id="the-pattern">
  ## Il pattern
</div>

Ogni integrazione sono le stesse tre righe: iscriviti a un evento, leggi il payload, inoltralo al tuo strumento.

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

Incollalo in **Cart settings → Custom script → Initialization**. L'iscrizione è una chiamata di set-up, quindi è sicura proprio all'inizio, e non devi aspettare che il carrello si carichi.

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

Assicurati prima che il [tracciamento onsite di Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4425956184731) sia installato. Questo script si limita a lanciare l'evento; non carica 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">
  ## Altri eventi che vale la pena tracciare
</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) in un gestore `checkout`. La pagina sta per essere scaricata, e un normale `fetch` potrebbe essere cancellato in volo. Inoltre **non puoi annullare il checkout** da questo gestore; è una notifica, non un cancello.
</Warning>

<div id="things-to-get-right">
  ## Cose da fare bene
</div>

* **I prezzi sono in centesimi.** Dividi per 100 per gli strumenti che si aspettano un importo decimale. [`formatMoney`](/it/aftersell/cart/sdk-actions#formatmoneycents) serve solo per la visualizzazione, quindi non inviare una stringa formattata a uno strumento di analytics.
* **Un aumento di quantità non è `item_added`.** Passare da 1 a 3 su una riga esistente attiva `cart_updated`, non `item_added`. Se il tuo strumento deve vederlo, confronta con lo stato precedente in un gestore `cart_updated`.
* **Non tracciare da `cart_updated` se intendi "aggiunto".** Si attiva a ogni cambiamento, incluse rimozioni e modifiche di quantità, quindi sovra-riporteresti.
* **Verifica il doppio conteggio.** Se il tuo strumento cattura già l'aggiunta al carrello in un altro modo, questo script la riporterà due volte. Verifica nella vista live dello strumento prima di andare in produzione.

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

Aggiungi un `console.log` accanto alla tua chiamata di tracciamento, poi apri la console del browser e aggiungi un prodotto:

```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 il log non appare, lo script non è in esecuzione, quindi verifica che sia stato salvato nello slot **Initialization**. Se il log appare ma lo strumento non mostra nulla, il problema è nel formato del payload dello strumento, non nell'SDK.

<div id="where-to-go-next">
  ## Dove andare adesso
</div>

* **[Events](/it/aftersell/cart/sdk-events)**: ogni evento e quando si attiva.
* **[Cart object](/it/aftersell/cart/sdk-cart-object)**: ogni campo che puoi inviare.
* **[Cart analytics](/it/aftersell/cart/analytics)**: la reportistica che Aftersell fornisce di serie.