Le Tag E-Commerce

Dernière mise à jour Oct 22, 2026Voir en Markdown

Le tag e-commerce permet de suivre les transactions sur votre site et collecter des statistiques relatives aux revenus générés.

Déclenchez le tag uniquement sur la page de confirmation, lorsque la transaction est finalisée, et renseignez les paramètres obligatoires suivants :

ID (identifiant unique pour chaque transaction)
Revenue (montant total de la transaction)

Vous pouvez également inclure les paramètres facultatifs suivants :

Currency (devise utilisée pour la transaction et dans notre plateforme, où elle peut être convertie)

La documentation technique complète sur le déclenchement du tag e-commerce est disponible ici

Google Tag Manager (Template)

Ouvrez l’espace de travail et accédez à la section Modèles.
Cliquez sur “Rechercher dans la galerie”.
Recherchez “Contentsquare” et sélectionnez le modèle “E-commerce data”.
Cliquez sur "Ajouter à l’espace de travail".
Confirmez le choix en cliquant sur "Ajouter".
Dans la section “Balises”, cliquez sur "Nouvelle" pour ajouter le tag.
Configurez le tag en cliquant sur le bouton d’édition en haut à droite.
Recherchez “Contentsquare” et sélectionnez la balise "E-commerce" précédemment ajoutée.

Nommez la balise et ajoutez vos Variables GTM aux champs Transaction ID, Revenue et Currency. Le champ Currency est facultatif.

Veillez à sélectionner un déclencheur qui s’active uniquement sur la page de confirmation, ou sur toutes les pages nécessaires au suivi des transactions, sur lesquelles vos variables seront alimentées.

Lors de la création de ces variables en tant que JavaScript personnalisé, formatez-les comme dans les exemples ci-dessous à partir de votre dataLayer e-commerce.

Transaction ID (retourner une chaîne de caractères) :

function () {
  for (var i = 0; i < dataLayer.length; i++) {
    if (dataLayer[i].event === "purchase") {
      return dataLayer[i].ecommerce.transaction_id;
    }
  }
  return undefined;
}

Revenue (retourner une chaîne de caractères) :

function () {
  for (var i = 0; i < dataLayer.length; i++) {
    if (dataLayer[i].event === "purchase") {
      return dataLayer[i].ecommerce.value;
    }
  }
  return undefined;
}

Currency (retourner une chaîne de caractères) :

function () {
  for (var i = 0; i < dataLayer.length; i++) {
    if (dataLayer[i].event === "purchase") {
      return dataLayer[i].ecommerce.currency;
    }
  }
  return undefined;
}

Si vous utilisez le module Contentsquare Merchandising et souhaitez également envoyer les Produits de la Transaction, insérez la Variable GTM correspondante dans le champ Transaction Items.

Cette variable doit retourner un tableau d’objets produit, par exemple une Variable JavaScript personnalisée construite à partir de votre dataLayer e-commerce. Ces objets et leurs noms de champs sont basés sur le format de données e-commerce GA4 de Google ↗. Chaque objet peut contenir les champs suivants :
- item_id : Code produit / SKU
- price : Prix unitaire réellement payé
- quantity : Quantité
- item_name : Nom du produit
- item_category : Catégorie du produit (facultatif)
Par exemple (retourner un tableau) :
```
function () {
  for (var i = 0; i < dataLayer.length; i++) {
    if (dataLayer[i].event === "purchase") {
      return dataLayer[i].ecommerce.items;
    }
  }
  return undefined;
}
```
Cet objet utilise la convention de nommage standard GTM / GA pour les propriétés des articles (item_id, item_name, item_category, price, quantity). Si vous utilisez une convention non standard, vous pouvez spécifier vos noms de propriétés dans les champs suivants.
Sauvegardez les modifications et retourner dans l’espace de travail. Vous devriez à présent retrouver le modèle ainsi que la balise.

Ajout au panier

L’événement Add to Cart est envoyé via un modèle GTM distinct, Contentsquare - Tracking Customization. Installez-le de la même manière que le modèle E-commerce, puis créez une balise qui se déclenche lorsqu’un visiteur ajoute un produit à son panier.

Ouvrez l’espace de travail et accédez à la section Modèles.
Cliquez sur Rechercher dans la galerie.
Recherchez contentsquare et sélectionnez le modèle Contentsquare - Tracking Customization.
Cliquez sur Ajouter à l’espace de travail.
Confirmez le choix en cliquant sur Ajouter.
Dans la section Balises, cliquez sur Nouvelle pour créer une nouvelle balise.
Configurez la balise en cliquant sur le bouton d’édition en haut à droite.
Recherchez contentsquare et sélectionnez le modèle Contentsquare - Tracking Customization précédemment ajouté à votre espace de travail.
Nommez la balise, puis configurez-la :
- Sous Action type, sélectionnez Add to cart dans le menu déroulant.
- Dans le champ SKU, ajoutez la Variable GTM qui retourne le SKU de l’article ajouté au panier.
L’action Add to cart n’est disponible que si vous êtes client Contentsquare Merchandising.

Lors de la création de cette variable définie par l’utilisateur en tant que JavaScript personnalisé, lisez le SKU à partir de votre dataLayer e-commerce. Par exemple, SKU (retourner une chaîne de caractères) :
```
function () {
  for (var i = dataLayer.length - 1; i >= 0; i--) {
    if (dataLayer[i].event === "add_to_cart") {
      return dataLayer[i].ecommerce.items[0].item_id;
    }
  }
  return undefined;
}
```
Sélectionnez un déclencheur qui s’active lorsqu’un visiteur ajoute un produit à son panier, par exemple un clic sur votre bouton Ajouter au panier ou l’événement add_to_cart de votre dataLayer.
Sauvegardez les modifications et retournez dans l’espace de travail. Vous devriez à présent retrouver le modèle ainsi que la balise.

Google Tag Manager (Custom HTML)

Créez une nouvelle balise et collez le code suivant dans le champ HTML :

<script type="text/javascript">
  window._uxa = window._uxa || [];
  window._uxa.push([
    "ec:transaction:create",
    {
      id: "{{YOUR ID HERE}}",
      revenue: "{{YOUR REVENUE HERE}}",
      currency: "{{CURRENCY ISO CODE HERE}}"
    },
  ]);
  window._uxa.push(["ec:transaction:send"]);
</script>

Dans le script, remplacez toutes les variables d'espace réservé par vos valeurs GTM (en utilisant la notation à double accolade : {{transaction id}}, {{transaction revenue}}).

Ces variables doivent être disponibles dans la section "Variables" de Google Tag Manager.
Dans la liste des déclencheurs, sélectionnez la "page de confirmation" ou créez-la si elle n’existe pas:
1. Cliquez sur le "+" en haut à droite,
2. Cliquez sur "Choisissez un type de déclencheur pour commencer la configuration ..."
3. Choisissez "Fenêtre chargée"
4. Vous ne voulez pas que cela se déclenche sur toutes les pages, alors choisissez "Certains événements chargés par la fenêtre"
5. Ajoutez une condition pour correspondre uniquement à la page de confirmation — par exemple, URL de la page "contient" checkout / confirmation
6. Enregistrez et nommez votre déclencheur "page de confirmation"

Tealium

L'extension Tealium déclenchera automatiquement le code de transaction Contentsquare dès que les valeurs de transaction définies auront été renseignées dans votre datalayer utag.

Adobe Tags

Dans les Règles, ouvrez une règle existante ou créez en une nouvelle.

Configuration d'événement

La balise e-commerce ** doit être activée uniquement sur la page de confirmation ** et chaque fois qu'une transaction doit être suivie. Pour ce faire, vous devez spécifier le chemin ou l'événement à utiliser comme déclencheur. Par exemple, si vous souhaitez cibler la page de confirmation, vous pouvez utiliser une condition similaire :

Si vous avez choisi évenement + condition, votre configuration devrait ressembler à ceci :

Configuration de l'action

Sélectionnez l'extension Contentsquare puis Ecommerce Transactions comme type d'action.

Vous serez ensuite invité à renseigner les informations requises à l'aide de chaînes ou de Data Elements.

Compte tenu de la nature dynamique des détails de la transaction, il est nécessaire d’avoir préalablement configuré Data Elements avec les informations demandées.

Si vous utilisez le module Contentsquare Merchandising et souhaitez également envoyer les Produits de la Transaction, insérez le Data Element correspondant dans le champ Transaction Items.

Cette variable doit retourner un tableau d’objets produit, par exemple un Data Element JavaScript personnalisé construit à partir de votre dataLayer e-commerce. Ces objets et leurs noms de champs sont basés sur le format de données e-commerce GA4 de Google ↗. Chaque objet peut contenir les champs suivants :

item_id : Code produit / SKU
price : Prix unitaire réellement payé
quantity : Quantité
item_name : Nom du produit
item_category : Catégorie du produit (facultatif)

Par exemple (retourner un tableau) :

for (var i = 0; i < dataLayer.length; i++) {
  if (dataLayer[i].event === "purchase") {
    return dataLayer[i].ecommerce.items;
  }
}
return undefined;

Cet objet utilise la convention de nommage standard GA4 pour les propriétés des articles (item_id, item_name, item_category, price, quantity). Si vous utilisez une convention non standard, vous pouvez spécifier vos noms de propriétés dans les champs suivants.

Ajouter au panier

L’action Ajouter au panier envoie un événement d’ajout au panier à Contentsquare lorsqu’un visiteur ajoute un produit à son panier.

Ce composant doit être configuré pour se déclencher au clic sur le bouton "Ajouter au panier" de votre site. Le composant Ecommerce Transactions doit également être inclus pour que cela fonctionne.

Sélectionnez Add To Cart (Ecommerce) depuis l’extension Contentsquare comme type d’action.

Vous serez ensuite invité à renseigner le SKU du produit.

Sélectionnez le Data Element correspondant qui renvoie la valeur du SKU au clic sur "Ajouter au panier" sur votre site.

Commanders Act

Ajoutez un nouveau tag à votre conteneur en sélectionnant Contentsquare (Builder).
Définissez le template Contentsquare en sélectionnant Ecommerce.
Saisissez tous les champs pour vos variables Commanders Act.
(Optionnel) Si vos transactions sont effectuées dans des devises différentes, envoyez à Contentsquare la valeur pour la devise.
(Optionnel) Si vous être client Merchandising, ajoutez des items.
Sélectionnez un déclencheur ou périmètre uniquement pour la page de confirmation, et cliquez sur Save.

Votre Tag est prêt à être déployé.

Shopify

L'application Contentsquare pour Shopify collecte automatiquement les données de transaction e-commerce pendant le processus de paiement, éliminant ainsi le besoin de taggage manuel.

Aucune configuration supplémentaire n'est requise — une fois l'application installée et configurée, les données de transaction (ID de commande, revenu et devise) sont automatiquement capturées à la fin du paiement.

Pour les instructions d'installation, consultez Installation de l'application Shopify.

Écarts de transactions avec les méthodes de paiement par redirection

Contentsquare suit les transactions Shopify en écoutant l'événement Web Pixels checkout_completed ↗, qui fournit l'ID de commande, le montant et la devise.

Certaines méthodes de paiement redirigent l'utilisateur vers une page de paiement externe avant de le renvoyer sur la page "Thank You" (par exemple, PayPal). Dans ces cas, Shopify peut ne pas émettre l'événement checkout_completed. Comme le documente ↗ Shopify, si la page sur laquelle l'événement doit se déclencher ne se charge pas, l'événement n'est pas du tout déclenché.

Ce que vous pouvez observer : des sessions avec une vue de la page "Checkout" suivie d'une vue de la page "Thank You" peuvent apparaître dans le segment Sessions sans transactions, même si l'utilisateur a effectué un achat. Cela entraîne un nombre de transactions collectées moins élevé dans Contentsquare.

Il ne s'agit pas d'un problème d'implémentation Contentsquare. Le tag Contentsquare pour Shopify traite l'événement checkout_completed à chaque fois que Shopify l'émet.

HTML personnalisé

Passez l'ID de la transaction, le revenue, et le code ISO de la devise en tant que paramètres de la commande ec:transaction:create, puis exécutez ec:transaction:send pour envoyer la transaction à Contentsquare.

<script type="text/javascript">
  window._uxa = window._uxa || [];
  window._uxa.push(['ec:transaction:create', {
      'id': {{TRANSACTION_ID}},        // String - identifiant unique de la transaction
      'revenue': {{TRANSACTION_REVENUE}}, // Number - montant total (49.99)
      'currency': {{CURRENCY_ISO_CODE}}  // String - code devise ISO 4217 ('EUR')
  }]);
  window._uxa.push(['ec:transaction:send']);
</script>