Suivi du commerce électronique

Ce guide décrit comment intégrer manuellement le suivi e-commerce de Trackboxx dans une boutique - indépendamment du fait que tu utilises un système Custom, Shopify, Shopware, Magento ou une autre boutique. Pour WooCommerce, il existe un plugin officiel qui déclenche automatiquement tous les événements décrits ici.

Logique de base : que signifie trackboxx('Purchase', [...])?

Avant d'aborder les différents événements, un point important pour la compréhension - l'expérience montre que ce point est le plus souvent mal interprété :

Important : trackboxx('Purchase', [...]) n'est pas un événement unique, mais l'appel générique pour toutes les interactions e-commerce. Le premier objet du tableau détermine l'événement suivi grâce à son champ type :

• { type: 'ViewProduct' } - Page de détails du produit
• { type: 'AddToCart' } - Produit ajouté au panier
• { type: 'ViewCart' } - Page du panier consultée
• { type: 'order' } - Commande terminée

Le 'Purchase' dans l'appel de fonction désigne uniquement la catégorie d'action « e-commerce » et reste toujours identique, que tu suives une consultation de produit, un ajout au panier ou un achat réel.

Aperçu des quatre événements e-commerce

1. ViewProduct - Page de détails du produit

Déclencher : Lors de l'affichage d'une page de détail d'un produit.
Données minimales : Nom du produit et prix unitaire.

<script>
trackboxx('Purchase', [
  { type: 'ViewProduct' },
  { type: 'product', name: '%%PRODUCT_NAME%%', price: 99.90 }
]);
</script>Langage du code : HTML, XML (xml)

Remarques :

• price = Prix unitaire du produit (numérique, point comme séparateur décimal).
• Champs supplémentaires facultatifs : sku, category.
• Pour les variantes ou les lots, transmets le nom complet de la variante, avec ses attributs (par exemple « T-shirt — rouge, L »), afin que les rapports soient agrégés de manière cohérente.

2. AddToCart - Produit ajouté au panier d'achat

Déclenchement : Après la réussite de l'action « Ajouter au panier », et non au simple clic.
Données minimales : Nom du produit et prix unitaire.

<script>
trackboxx('Purchase', [
  { type: 'AddToCart' },
  { type: 'product', name: '%%PRODUCT_NAME%%', price: 19.99 }
]);
</script>Langage du code : HTML, XML (xml)

Indications sur le timing - selon le type de boutique :

• Boutiques personnalisées et paniers d'achat AJAX : Lancer l'événement dans le callback de succès de l'action Add-to-Cart, et non dans le gestionnaire de clics. Ainsi, aucun événement de suivi n'est généré si l'article ne se retrouve pas du tout dans le panier en raison d'un contrôle de stock, d'une validation ou d'une erreur de réseau.
• Boutiques côté serveur avec redirection : Déclencher une fois l'événement sur la page suivante après un ajout réussi.
• Intégrations simples de boutons-clics : autorisées, mais uniquement si le clic aboutit réellement à un ajout réussi, par exemple en vérifiant que le bouton est désactivé pour les produits en rupture de stock.
• Déduplication : Envoyer AddToCart une seule fois par action - pas de doublon en cas de rechargement ou de navigation retour.

3. ViewCart - Page du panier d'achat

Déclencher : Lors de l'accès à la page du panier.
Données minimales : Somme du panier (amount). En option : tous les produits inclus sous forme d'objets séparés.

<script>
trackboxx('Purchase', [
  { type: 'ViewCart' },
  { type: 'cart', amount: 149.70 },
  { type: 'product', name: 'Produkt A', price: 99.90 },
  { type: 'product', name: 'Produkt B', price: 49.80 }
]);
</script>Langage du code : HTML, XML (xml)

Remarques :

• amount = total du panier. Standard : net (correspond au comportement du plugin officiel WooCommerce).
• Si ta boutique utilise des prix bruts, les montants bruts sont également autorisés. L'essentiel est la cohérence au sein d'un événement : cart.amount et toutes les valeurs product.price doivent être calculées sur la même base, soit toutes nettes, soit toutes brutes.
• Ajoute un objet product distinct pour chaque ligne du panier.
• La valeur price par produit correspond ici au total de la ligne (prix unitaire × quantité) — voir la section « Logique de prix & quantité ».

4. Purchase - Finalisation de la commande (page de remerciement)

Déclencher : Sur la page de confirmation de commande après un paiement réussi - exactement une fois par commande.
Données minimales : Identifiant de la commande, montant total et tous les produits achetés.

<script>
trackboxx('Purchase', [
  { type: 'order', id: 'ORDER_ID', total: 149.70 },
  { type: 'product', name: 'Produkt A', price: 99.90 },
  { type: 'product', name: 'Produkt B', price: 49.80 }
]);
</script>Langage du code : HTML, XML (xml)

En option — avec bon de réduction : Ajoute un objet coupon supplémentaire pour chaque bon utilisé.

<script>
trackboxx('Purchase', [
  { type: 'order', id: '12345', total: 149.70 },
  { type: 'coupon', name: 'SUMMER10', discount: 10.00 },
  { type: 'product', name: 'Produkt A', price: 99.90 },
  { type: 'product', name: 'Produkt B', price: 49.80 }
]);
</script>Langage du code : HTML, XML (xml)

Remarques :

• L'événement Purchase n'est précédé d'aucun marqueur d'événement comme pour ViewProduct ou AddToCart : l'objet order identifie lui-même l'événement.
• order.id = identifiant unique de la commande provenant du système de la boutique.
• order.total = valeur totale de la commande (le montant final brut, frais de port et taxes inclus, est recommandé, mais doit être cohérent avec les valeurs product.price).
• product.price = total de la ligne (prix unitaire × quantité), et non prix unitaire.
• Évite les déclenchements multiples lors du rechargement, par exemple à l'aide d'un indicateur côté serveur ou d'un marqueur de session.

Logique de prix & quantité

Trackboxx n'utilise pas de champ quantity distinct. Les quantités sont représentées implicitement par le prix. Cette règle est contraignante et doit être appliquée de la même manière dans chaque intégration :

Exemple : Trois articles identiques à 19,99 € chacun dans le panier sont envoyés pour ViewCart et Purchase sous la forme d'un seul objet product avec price: 59.97 — et non de trois objets distincts, et sans champ quantity.

Ordre des objets dans le tableau

Pour une intégration propre et cohérente, nous recommandons l'ordre suivant des objets :

1. Marqueur d'événement ou objet order (ViewProduct / AddToCart / ViewCart / order)
2. Objet cart (uniquement pour ViewCart)
3. Objets coupon (uniquement pour Purchase, si des coupons sont utilisés)
4. Objets product

Bonnes pratiques

• Déduplication : N'envoie chaque événement qu'une seule fois par action réelle : évite le double suivi lors d'un rechargement, d'un retour à la page précédente ou d'une nouvelle tentative AJAX.
• Moment du déclenchement : Déclenche ViewProduct et ViewCart au chargement de la page, AddToCart après confirmation de l'ajout au panier et Purchase une seule fois sur la page de remerciement.
• Prix et montants : Transmets-les sous forme de Number, et non de chaîne de caractères, avec un point comme séparateur décimal (par exemple 19.99, et non "19,99").
• Cohérence : Choisis des valeurs nettes ou brutes pour ta boutique, puis applique ce choix à cart.amount, product.price et order.total.
• Protection des données : Ne jamais transmettre de données personnelles - pas d'adresses e-mail, de noms, de numéros de clients ou d'adresses. Respecter le consentement.

Liste de contrôle rapide par système de boutique

• WooCommerce : Utilise le plugin officiel Trackboxx. Il déclenche les quatre événements (ViewProduct, AddToCart, ViewCart, Purchase) automatiquement - aucune intégration manuelle n'est nécessaire.
• Magasins personnalisés : Côté serveur, insérer le nom du produit, le prix et le total comme variables dans le script inline correspondant.
• Shopify : Intègre les snippets dans les modèles (product.liquid, cart.liquid, page de remerciement après la commande). Pour AddToCart, utilise le callback de succès AJAX.
• Shopware / Magento : Accrocher aux événements ou hooks correspondants dans le thème ou le plugin - page du produit, page du panier, événement Add-to-Cart, événement Order-Complete.

Référence : Variantes minimales

ViewProduct (minimum)

trackboxx('Purchase', [
  { type: 'ViewProduct' },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Langage du code : JavaScript (javascript)

AddToCart (minimal)

trackboxx('Purchase', [
  { type: 'AddToCart' },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Langage du code : JavaScript (javascript)

ViewCart (minimal)

trackboxx('Purchase', [
  { type: 'ViewCart' },
  { type: 'cart', amount: 19.99 }
]);Langage du code : JavaScript (javascript)

Purchase (minimum)

trackboxx('Purchase', [
  { type: 'order', id: 'ORDER_ID', total: 19.99 },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Langage du code : JavaScript (javascript)

Aperçu rapide de la situation : Les principales règles

• trackboxx('Purchase', [...]) est un appel e-commerce générique, pas un événement.
• Le type d'événement se trouve dans le payload, dans le champ type du premier objet, et non dans l'appel de fonction.
• Déclenche AddToCart après un ajout au panier réussi, et non au simple clic.
• cart.amount est une valeur nette par défaut ; les valeurs brutes sont autorisées, mais doivent rester cohérentes au sein de l'événement.
• price correspond au prix unitaire pour ViewProduct et AddToCart, et au total de la ligne pour ViewCart et Purchase.
• Pas de champ quantity distinct : les quantités sont représentées par le prix.
• L'événement Purchase repose sur { type: 'order' }, sans marqueur d'événement initial.
• Transmets les prix sous forme de Number, avec un point comme séparateur décimal, jamais sous forme de String.
• Aucune donnée personnelle dans le payload.