Suivre l'ajout au panier dans un outil tiers

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.

Le schéma

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.

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.

Klaviyo

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 est installé. Ce script ne fait que déclencher l’événement ; il ne charge pas Klaviyo.

Triple Whale

window.aftersell.cart.events.on('item_added', (payload) => {
  window.TriplePixel('AddToCart', {
    item: payload.item.variantId,
    q: payload.item.quantity,
  });
});

Google Analytics 4

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

Autres événements dignes d’être suivis

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

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

Les points à ne pas rater

Les prix sont en centimes. Divisez par 100 pour les outils qui attendent un montant décimal. formatMoney 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.

Le tester

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

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.

Pour aller plus loin

Événements : chaque événement et quand il se déclenche.
Objet cart : chaque champ que vous pouvez envoyer.
Analyses du panier : les rapports qu’Aftersell fournit d’emblée.

Prise en main

Page d'accueil

Bonnes pratiques

Ventes incitatives post-achat

Panier

Ventes incitatives au paiement (Shopify Plus)

Page de remerciement

Ventes incitatives sur la page produit

Rokt Thanks

Stratégies

Analyses et suivi

Intégrations

Aftersell MCP

Facturation et compte

Dépannage

Suivre l'ajout au panier dans un outil tiers

Le schéma

Klaviyo

Triple Whale

Google Analytics 4

Autres événements dignes d’être suivis

Les points à ne pas rater

Le tester

Pour aller plus loin

​Le schéma

​Klaviyo

​Triple Whale

​Google Analytics 4

​Autres événements dignes d’être suivis

​Les points à ne pas rater

​Le tester

​Pour aller plus loin

Le schéma

Klaviyo

Triple Whale

Google Analytics 4

Autres événements dignes d’être suivis

Les points à ne pas rater

Le tester

Pour aller plus loin