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', [...]) est pas d'événement unique, mais l'appel générique pour toutes les interactions e-commerce. L'événement qui est effectivement suivi est déterminé par le premier objet du tableau sur son 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' (achat) dans l'appel de fonction désigne uniquement la catégorie d'action „e-commerce“ et reste toujours le même - que tu suives une vue de produit, un add-to-cart 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' (achat), [
  { type : 'ViewProduct' (voir produit) },
  { type : 'produit, nom : '%%NOM_DU_PRODUIT%%'., prix : 99.90 }
]);
</script>Langage du code : HTML, XML (xml)

Remarques :

• prix = Prix unitaire du produit (numérique, point comme séparateur décimal).
• Champs supplémentaires facultatifs : sku, catégorie.
• Pour les variantes ou les bundles : transmettre le nom complet de la variante, y compris les attributs (p. ex. „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éclencher : Après avoir réussi „Processus “Ajouter au panier" - pas à l'aveugle lors du clic.
Données minimales : Nom du produit et prix unitaire.

<script>
trackboxx('Purchase' (achat), [
  { type : 'AddToCart' (ajouter un article) },
  { type : 'produit, nom : '%%NOM_DU_PRODUIT%%'., prix : 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é, mais uniquement s'il est garanti que le clic conduit effectivement à un ajout réussi (par exemple, contrôle de désactivation du bouton pour les produits soldés).
• 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' (achat), [
  { type : 'ViewCart },
  { type : 'cart' (carte), compte : 149.70 },
  { type : 'produit, nom : 'Produit A, prix : 99.90 },
  { type : 'produit, nom : 'Produit B, prix : 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 travaille avec des prix bruts, les valeurs brutes sont également autorisées - ce qui est décisif, c'est que Cohérence au sein d'un événement: cart.amount et tous les product.price-doivent être calculées sur la même base (toutes nettes ou toutes brutes).
• Pour chaque position du panier, un propre produit-de l'objet.
• Le site prix par produit correspond ici à la Somme des positions (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 : ID de l'ordre, montant total, tous les produits achetés.

<script>
trackboxx('Purchase' (achat), [
  { type : 'order' (ordre)', id : 'ORDER_ID' (ID_ORDRE)', totalement : 149.70 },
  { type : 'produit, nom : 'Produit A, prix : 99.90 },
  { type : 'produit, nom : 'Produit B, prix : 49.80 }
]);
</script>Langage du code : HTML, XML (xml)

En option - avec bon d'achat : Pour chaque bon utilisé, un montant supplémentaire coupon-de l'objet.

<script>
trackboxx('Purchase' (achat), [
  { type : 'order' (ordre)', id : '12345', totalement : 149.70 },
  { type : 'coupon', nom : 'SUMMER10' (ÉTÉ)', discount : 10.00 },
  { type : 'produit, nom : 'Produit A, prix : 99.90 },
  { type : 'produit, nom : 'Produit B, prix : 49.80 }
]);
</script>Langage du code : HTML, XML (xml)

Remarques :

• Lors de l'événement Purchase, il y a aucun marqueur d'événement placé devant comme pour ViewProduct ou AddToCart - le orderidentifie l'événement lui-même.
• 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 = Somme des positions (prix unitaire × quantité), pas prix unitaire.
• Se prémunir contre les tirs multiples (protection contre les reloads), par exemple via un drapeau côté serveur ou un marqueur de session.

Logique de prix & quantité

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

exemple : Trois articles identiques à 19,99 € dans le panier sont remboursés en cas de ViewCart et Achat comme un produit-avec prix : 59.97 pas en tant que trois objets distincts, et sans quantité-champ.

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. order-objet (ViewProduct / AddToCart / ViewCart / order)
2. cart-Objet (uniquement pour ViewCart)
3. coupon-Objets (uniquement pour Purchase, si disponible)
4. produit-objets

Bonnes pratiques

• Déduplication : N'envoyer chaque événement qu'une seule fois par action réelle - pas de double suivi en cas de rechargement, de navigation de retour ou de retours AJAX.
• Le timing : ViewProduct et ViewCart lors du chargement de la page. AddToCart après confirmation de l'ajout. Achat une seule fois sur la page de remerciement.
• Prix & montants : En tant que Numéro (pas de chaîne), avec un point comme séparateur décimal (par ex. 19.99 - pas "19,99").
• Consistance : Net ou brut, c'est une décision par magasin - mais alors systématiquement pour 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 résout les quatre événements (ViewProduct, AddToCart, ViewCart, Achat) 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égrer des snippets dans les templates (product.liquid, cart.liquid, Checkout-Thank-You-Page). Pour AddToCart s'arrimer au callback AJAX Success.
• 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' (achat), [
  { type: 'ViewProduct' (voir produit) },
  { type: 'produit, nom: 'Nom du produit 1, prix: 19.99 }
]);Langage du code : JavaScript (javascript)

AddToCart (minimal)

trackboxx('Purchase' (achat), [
  { type: 'AddToCart' (ajouter un article) },
  { type: 'produit, nom: 'Nom du produit 1, prix: 19.99 }
]);Langage du code : JavaScript (javascript)

ViewCart (minimal)

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

Purchase (minimum)

trackboxx('Purchase' (achat), [
  { type: 'order' (ordre)', id: 'ORDER_ID' (ID_ORDRE)', total: 19.99 },
  { type: 'produit, nom: 'Nom du produit 1, prix: 19.99 }
]);Langage du code : JavaScript (javascript)

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

• trackboxx('Purchase', [...]) est un appel générique de commerce électronique, pas un événement.
• Le type d'événement se trouve dans le payload (type-champ du premier objet), pas dans l'appel de fonction.
• AddToCart tirer après un ajout réussi - pas à l'aveugle au clic.
• cart.amount dans le standard comme valeur nette ; brut autorisé, mais cohérent au sein de l'événement.
• prix = prix unitaire à ViewProduct / AddToCart, somme de la position à ViewCart / Achat.
• Pas de formulaire séparé quantité-Champ - Représenter les quantités par le prix.
• L'événement Purchase est basé sur { type : 'order' } sans marqueur d'événement en tête.
• Prix en tant que Number avec séparateur décimal à points, jamais en tant que String.
• Pas de données personnelles dans la charge utile.