Google Tag Manager sur Ecwid : Guide Complet

Ecwid a une particularité que Shopify ou PrestaShop n'ont pas : c'est une boutique embarquable, le plus souvent intégrée en iframe dans un site existant plutôt qu'hébergée comme plateforme à part entière. Cette architecture change concrètement la façon dont Google Tag Manager doit être connecté, et c'est le point que la plupart des tutoriels génériques passent sous silence.

Connexion native via l'app Google Tag Manager

Ecwid propose une app officielle dans son App Market qui évite d'injecter du code manuellement. Une fois l'app installée, il suffit de récupérer l'identifiant de conteneur (format GTM-XXXXXX) depuis votre compte Google Tag Manager, puis de le coller dans Réglages → Google Tag Manager de votre panneau d'administration Ecwid. Cette connexion permet de créer et gérer vos tags directement depuis GTM sans toucher au code du site, et donne accès à un dataLayer e-commerce structuré (confirmé : vues produit, ajouts panier, achats), mais uniquement sur le périmètre couvert par l'app, voir la section suivante.

Le piège de l'iframe

C'est le point technique le plus important, documenté par Ecwid lui-même mais souvent ignoré : si votre boutique Ecwid est intégrée à votre site via une iframe, connecter GTM par l'app ne permet de suivre que les événements qui se produisent à l'intérieur de cette iframe, dataLayer e-commerce inclus. Les pages de votre site en dehors de la boutique (accueil, blog, pages de contenu) ne sont pas couvertes par ce conteneur. Pour un suivi complet du site entier, un second conteneur GTM installé directement dans le code du site (en dehors de l'iframe) est nécessaire : les deux conteneurs cohabitent, chacun sur son périmètre.

Événements e-commerce réels avec la JS API

Se contenter de connecter l'app GTM donne accès aux pages vues, mais pas toujours au niveau de détail nécessaire pour un tracking GA4 ou Google Ads complet. Ecwid expose une JS API storefront pour ça, à appeler après le chargement complet de l'API :

Ecwid.OnAPILoaded.add(function() {

  // Commande validee -> evenement purchase pour GA4/GTM
  Ecwid.OnOrderPlaced.add(function(order) {
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      event: 'purchase',
      ecommerce: {
        transaction_id: order.vendorNumber,
        value: order.total,
        currency: order.currency,
        items: (order.items || []).map(function(item) {
          return {
            item_id: item.product.id,
            item_name: item.product.name,
            price: item.product.price,
            quantity: item.quantity
          };
        })
      }
    });
  });

  // Panier modifie -> evenement add_to_cart / remove_from_cart selon le delta
  Ecwid.OnCartChanged.add(function(cart) {
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      event: 'cart_changed',
      cart_total: cart.total,
      cart_item_count: cart.productsQuantity
    });
  });

});

Ce code s'ajoute via une balise HTML personnalisée dans GTM (déclenchée sur "Toutes les pages" du conteneur qui couvre l'iframe), ou directement dans le code de la boutique selon votre configuration. Le détail à ne pas négliger : Ecwid.OnCartChanged se déclenche à chaque modification du panier, y compris les retraits. Pour un événement add_to_cart propre côté GA4, il faut comparer l'état du panier avant/après pour ne pousser l'événement que sur un ajout réel, pas sur toute modification.

Récupérer les données utilisateur pour Enhanced Conversions et Advanced Matching

Question fréquente et légitime : l'objet order renvoyé par OnOrderPlaced contient-il de quoi alimenter les Enhanced Conversions Google Ads ou l'Advanced Matching Meta ? Réponse vérifiée dans la documentation Ecwid : oui. L'objet order.customer contient l'email du client, et order.billingPerson contient son nom et son numéro de téléphone (en plus de l'adresse complète). De quoi construire un objet user_data exploitable :

Ecwid.OnOrderPlaced.add(function(order) {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'purchase',
    user_data: {
      email_address: order.customer.email,
      phone_number: order.billingPerson.phone,
      address: {
        first_name: order.billingPerson.name,
        country: order.billingPerson.countryCode,
        postal_code: order.billingPerson.postalCode
      }
    },
    ecommerce: {
      transaction_id: order.vendorNumber,
      value: order.total,
      currency: order.currency
    }
  });
});

Point de sécurité important : ne poussez jamais l'email ou le téléphone en clair vers un tag qui les transmet tel quel à une régie publicitaire. Pour Google Ads, la balise de suivi des conversions améliorées via GTM applique elle-même le hachage SHA-256 des champs user_data mappés, vous n'avez pas à le faire manuellement. Pour Meta, le Pixel (fbq) hache automatiquement les paramètres standards de correspondance avancée (em, ph) côté navigateur avant l'envoi. Dans les deux cas, la donnée part hachée, jamais en clair, mais c'est le tag qui s'en charge, pas votre code.

Configuration GTM par plateforme

Une fois le dataLayer ci-dessus en place, voici comment le brancher concrètement à GA4, Google Ads et Meta Ads dans GTM.

GA4

Une balise Configuration GA4 (déclenchée sur toutes les pages), puis une balise Événement GA4 déclenchée sur l'événement dataLayer purchase, avec "Envoyer les paramètres d'e-commerce" activé sur "Objet Données Utilisateur : ecommerce". GA4 lit alors directement transaction_id, value, currency et items depuis le dataLayer sans mapping manuel champ par champ.

Google Ads

Trois éléments : une balise Conversion Linker (une fois, sur toutes les pages, pour la continuité des clics), une balise Suivi des conversions Google Ads déclenchée sur l'événement purchase avec l'ID de conversion/libellé de votre compte, la valeur mappée sur la variable de couche de données ecommerce.value et la devise sur ecommerce.currency. Pour activer les Enhanced Conversions, cochez l'option dans la balise et mappez chaque champ (email, téléphone, adresse) sur les variables de couche de données correspondantes de l'objet user_data défini plus haut : GTM applique le hachage automatiquement à l'envoi.

Meta Ads

Une balise Meta Pixel de base (déclenchée sur toutes les pages), puis une balise Événement Meta Pixel déclenchée sur purchase, type d'événement standard "Purchase", avec les paramètres value et currency mappés sur les variables de couche de données correspondantes. Pour l'Advanced Matching, activez les "Paramètres de correspondance avancée automatique" dans la balise de base, ou mappez manuellement em (email) et ph (téléphone) depuis l'objet user_data si vous préférez un contrôle explicite plutôt que la détection automatique de champs de formulaire.

Consentement avant les tags marketing

Comme sur n'importe quelle plateforme e-commerce, les balises Google Ads, Meta ou tout autre pixel marketing connectées via ce conteneur GTM ne doivent se déclencher qu'après consentement de l'utilisateur, et c'est encore plus vrai pour les champs user_data ci-dessus, qui touchent des données personnelles directement. Si votre boutique Ecwid est en iframe, vérifiez que votre CMP est bien positionnée sur la page qui contient l'iframe et que son signal de consentement est accessible aux tags qui tournent dans le conteneur de l'iframe, un point de configuration qui se rate facilement sur une architecture embarquée.

Christophe Dubois

Consultant tracking & data, freelance senior depuis 2012. Architecture de mesure, server-side, attribution.