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

# Suivre l'ajout au panier dans un outil tiers

> Envoyez les événements du panier Aftersell à Klaviyo, Triple Whale, GA4 ou tout pixel d'analyse à l'aide du bus d'événements du Cart SDK.

Aftersell gère lui-même l'ajout au panier, ce qui signifie que les outils d'analyse qui surveillent les requêtes de panier par défaut de Shopify peuvent ne pas le voir. S'abonner aux événements du SDK rétablit le suivi et vous donne une charge utile plus propre que d'extraire les données de l'API Ajax.

C'est l'usage le plus courant que les marchands font du SDK.

<div id="the-pattern">
  ## Le schéma
</div>

Chaque intégration se résume aux trois mêmes lignes : s'abonner à un événement, lire la charge utile, la transférer à votre outil.

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

Collez-le dans **Cart settings → Custom script → Initialization**. S'abonner est un appel de configuration, donc c'est sûr tout en haut, vous n'avez pas besoin d'attendre le chargement du panier.

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

Assurez-vous d'abord que le [suivi onsite de Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4425956184731) est installé. Ce script ne fait que déclencher l'événement ; il ne charge pas 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">
  ## Autres événements dignes d'être suivis
</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>
  Utilisez [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) dans un gestionnaire `checkout`. La page est sur le point de se décharger, et un `fetch` normal peut être annulé en cours de route. Vous ne pouvez pas non plus **annuler le paiement** depuis ce gestionnaire ; c'est une notification, pas une barrière.
</Warning>

<div id="things-to-get-right">
  ## Les points à ne pas rater
</div>

* **Les prix sont en centimes.** Divisez par 100 pour les outils qui attendent un montant décimal. [`formatMoney`](/fr/aftersell/cart/sdk-actions#formatmoneycents) est destiné à l'affichage uniquement, n'envoyez donc pas de chaîne formatée à un outil d'analyse.
* **Une augmentation de quantité n'est pas `item_added`.** Passer de 1 à 3 sur une ligne existante déclenche `cart_updated`, pas `item_added`. Si votre outil doit le voir, comparez avec l'état précédent dans un gestionnaire `cart_updated`.
* **Ne suivez pas depuis `cart_updated` si vous voulez dire « ajouté ».** Il se déclenche à chaque changement, y compris les suppressions et les modifications de quantité, vous sur-déclarerez donc.
* **Vérifiez le double comptage.** Si votre outil capture déjà l'ajout au panier d'une autre manière, ce script le signalera deux fois. Vérifiez dans la vue en direct de l'outil avant la mise en ligne.

<div id="testing-it">
  ## Le tester
</div>

Ajoutez un `console.log` à côté de votre appel de suivi, puis ouvrez la console du navigateur et ajoutez un produit :

```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 le log n'apparaît pas, le script ne s'exécute pas ; vérifiez donc qu'il est bien enregistré dans l'emplacement **Initialization**. Si le log apparaît mais que l'outil n'affiche rien, le problème vient du format de charge utile de l'outil, pas du SDK.

<div id="where-to-go-next">
  ## Pour aller plus loin
</div>

* **[Événements](/fr/aftersell/cart/sdk-events)** : chaque événement et quand il se déclenche.
* **[Objet cart](/fr/aftersell/cart/sdk-cart-object)** : chaque champ que vous pouvez envoyer.
* **[Analyses du panier](/fr/aftersell/cart/analytics)** : les rapports qu'Aftersell fournit d'emblée.