Formation Matomo

Suivi e-commerce avec Matomo Tag Manager

  • Episode N° 31
  • Difficulté difficile
  • Publié le 08/09/2022 par
  • Dernière mise à jour le 03/10/2024
Retour à la formation Matomo

Vous vous apprêtez à lire la V2 du tutoriel d'implémentation du suivi e-commerce pour Matomo Tag Manager. Cette nouvelle approche permet, en plus de l'ancienne, de rendre les balises de suivi compatibles avec la structure de données des événements e-commerce de GA4. En clair, si vous disposez déjà d'une implémentation e-commerce pour Google Analytics 4, la mise en place du dataLayer est grandement simplifiée (les étapes 1, 2 et 4 étant déjà réalisées).

L'étape 3 (mise à jour du panier) n'est pas compatible avec cette approche, car le fonctionnement de Matomo est trop différent de celui de GA4, vous devrez donc implémenter le dataLayer vous-même.

N'oubliez pas de synchroniser votre dataLayer avec _mtm afin de rendre les événements de dataLayer visible pour Matomo.

Configurer le suivi e-commerce avec Matomo Tag Manager

Le suivi e-commerce avancé de Matomo est pensé pour fonctionner avec le code de suivi classique de Matomo. Dans cette seconde partie de l’implémentation, nous allons voir comment utiliser Matomo Tag Manager pour faire fonctionner votre balisage de site e-commerce.

Si vous avez lu la section précédente concernant le suivi e-commerce avancé avec Matomo, vous avez sûrement remarqué qu’il nous faut une grande quantité d’informations qui proviennent directement de la base de données.

Création d’un délai sur la balise Matomo Statistique

Nous allons configurer à plusieurs reprises le Data Layer de Matomo afin d’y déclencher des événements personnalisés, pour s’assurer que ces événements se déclenchent bien avant le suivi standard de Matomo, nous allons créer un léger délai de 1 milliseconde (donc imperceptible) avant le déclenchement de la balise de suivi des pages vues.

La création de ce décalage est nécessaire pour que les balises de vue d’une page produit et de vue d’une page catégories fonctionnent correctement. Elle est optionnelle pour le suivi des mises à jour du panier et du suivi de la commande.

Pour réaliser cette configuration, éditez la balise "Statistique Matomo" et rendez-vous dans les paramètres avancés, définissez ensuite le "Délai d’activation" sur 1 et sauvegardez votre nouvelle configuration.

Maintenant que votre balise Matomo est configurée, nous allons pouvoir débuter la mise en place du suivi e-commerce !

Création de la variable personnalisée "Ecommerce"

Dans cette nouvelle version du tutoriel, nous n'avons besoin que d'une seule variable personnalisée et non de quatres. Nous allons donc simplement créer cette variable en utilisant les paramètres ci-dessous :

  • Nom de la variable : Ecommerce.
  • Data Layer Variable Name : ecommerce.

Cette variable va nous permettre d’accéder à toutes les propriétés ecommerce présentes dans le Data Layer. Vous n'avez pas besoin d'adapter quoi que ce soit.

Étape 1 - Vue d’une page produit

Cette première étape a pour but de comptabiliser le nombre de fois qu'une page produit a été visitée. On retrouvera cette information dans les rapports de performance des produits dans la rubrique e-commerce de Matomo.

Pour faire fonctionner cette balise, nous allons devoir récupérer les informations des produits de votre base de données et les exposer à Matomo en utilisant le Data Layer.

Mise en place du Data Layer (Compatible avec GA4)

Copiez le code suivant en haut de votre page produit (si possible avant le code de votre Tag Manager) et adapter les valeurs item_id, item_name, item_category et price de manière dynamique.

<script>
    window._mtm = window._mtm || [];
    window._mtm.push({ecommerce: null});  // Clear the previous ecommerce object.
    window._mtm.push({
        event: "view_item",
        ecommerce: {
            items: [{
                item_id: "0123456789",
                item_name: "T-shirt Blanc",
                item_category: "Vêtements",
                price: 19.99,
            }]
        }
    });
</script>

Pour s'assurer que votre Data Layer est correctement mis en place, vous pouvez saisir _mtm dans la console de développement de votre navigateur et y lire les données présentes. Vos données doivent bien entendu y figurer.

Création de la balise HTML personnalisée

Maintenant qu'il est possible d’accéder aux données du produit depuis Matomo Tag Manager, nous allons créer une balise HTML personnalisée.

  • Nom de la balise : Matomo - Ecommerce - view_item.

Collez ensuite le code suivant dans le champ "Custom HTML"

<script>
    window._paq = window._paq || [];
    var ecommerce = {{Ecommerce}};

    // Push Product View Data to Matomo - Populate parameters dynamically
    ecommerce.items.forEach(function(item){

        // Push custom event
        _paq.push(['trackEvent', 'Ecommerce', 'View item', 'view_item', item.price]);

        // Push ecommerce data
        _paq.push(['setEcommerceView',
            item.item_id,
            item.item_name,
            item.item_category,
            item.price
        ]);
    });

    // You must also call trackPageView when tracking a category view
    //_paq.push(['trackPageView']);
</script>

Votre balise est prête, vous n'avez techniquement pas besoin d'adapter le code copé ci-dessus.

Création du déclencheur personnalisé

Votre balise est presque prête à fonctionner, mais il faut maintenant la déclencher au bon moment, c'est-à-dire quand Matomo reçoit l'événement personnalisé view_item.

Pour cela, nous allons créer un déclencheur personnalisé de type "Événement personnalisé” (tout en bas dans la liste) qui aura la configuration suivante :

  • Nom du déclencheur : Custom Event - Ecommerce - View Item.
  • Nom de l’événement : view_item.

Une fois cette configuration réalisée, le suivi e-commerce de la page produit est terminé.

Étape 2 - Vue d’une page catégorie

Vous avez compris comment faire pour la page produit ? Si c’est le cas, on va poursuivre la configuration avec la page catégorie, je vous guide !

Mise en place du Data Layer (Compatible avec GA4)

Nous avons de nouveau besoin du Data Layer pour exposer le nom de la catégorie au Tag Manager, pour cela, copiez et adaptez le code suivant sur le gabarit de votre page catégorie produit.

<script>
    window._mtm = window._mtm || [];
    window._mtm.push({ecommerce: null});  // Clear the previous ecommerce object.
    window._mtm.push({
        event: "view_item_list",
        ecommerce: {
            item_list_name: "Vêtements"
        }
    });
</script>

Création de la balise HTML personnalisée

Il faut maintenant créer une nouvelle balise HTML personnalisée :

  • Nom de la balise : Matomo - Ecommerce - view_item_list.

Vous pouvez maintenant copier le code suivant dans la zone prévue pour le code HTML :

<script>
    window._paq = window._paq || [];
    var ecommerce= {{Ecommerce}};
    
    // Push custom event
    _paq.push(['trackEvent', 'Ecommerce', 'View item list', 'view_item_list']);

    // Push ecommerce data
    _paq.push(['setEcommerceView',
        false, // Product name is not applicable for a category view.
        false, // Product SKU is not applicable for a category view.
        ecommerce.item_list_name
    ]);

    // You must also call trackPageView when tracking a category view
    //_paq.push(['trackPageView']);
</script>

Création du déclencheur personnalisé

Pour déclencher notre balise sur la page catégorie, nous allons créer un nouveau déclencheur personnalisé qu’il faudra configurer comme ceci :

  • Nom du déclencheur : Custom Event - Ecommerce - View Item List.
  • Nom de l’événement : view_item_list.

Vous voyez, ce n’était pas si compliqué non plus, allez, vous êtes sur une bonne lancée, on continue.

Étape 3 - Mise à jour du panier

Maintenant, nous allons configurer une nouvelle balise pour écouter les changements au niveau du panier.

Mise en place du Data Layer (Incompatible avec GA4)

Dans ce cas de figure, le Data Layer devra exposer l’ensemble des produits présents ainsi que la quantité de chacun et le prix total du panier. Copiez le code suivant en l’adaptant à vos besoins :

<script>
    window._mtm = window._mtm || [];
    window._mtm.push({ecommerce: null});  // Clear the previous ecommerce object.
    window._mtm.push({
        event: "update_cart",
        ecommerce: {
            value: 35.98,
            items: [
                {
                    item_id: "0123456789",
                    item_name: "T-shirt Blanc",
                    item_category: "Vêtements",
                    price: 19.99,
                    quantity: 1,
                },
                {
                    item_id: "9876543210",
                    item_name: "T-shirt Vert",
                    item_category: "Vêtements",
                    price: 15.99,
                    quantity: 1,
                }
            ]
        }
    });
</script>

Création de la balise HTML personnalisé

Vous commencez à avoir l’habitude, créez une balise HTML personnalisée que vous pouvez nommer et insérez le code suivant :

  • Nom de la balise : Matomo - Ecommerce - update_cart.
<script>
window._paq = window._paq || [];
var ecommerce = {{Ecommerce}};

// An addEcommerceItem push should be generated for each cart item, even the products not updated by the current "Add to cart" click.
ecommerce.items.forEach(function(item){

    // Push ecommerce data
    _paq.push(['addEcommerceItem',
        item.item_id,
        item.item_name, 
        item.item_category,
        item.price,
        (item.quantity || 1)
    ]);
});

// Push custom event
_paq.push(['trackEvent', 'Ecommerce', 'Update cart', 'update_cart', ecommerce.value]);

// Push cart total value
_paq.push(['trackEcommerceCartUpdate', ecommerce.value]); 
</script>

Création du déclencheur personnalisée

Parfait, vous voyez le chemin se redessiner de nouveau ? Allez, on crée le déclencheur associé :

  • Nom du déclencheur : Custom Event - Ecommerce - Update Cart.
  • Nom de l’événement : update_cart.

Parfait, c’était un peu plus complexe, mais vous y êtes arrivés, c’est plutôt un bon signe pour la suite !

Étape 4 - Suivi des commandes

On y arrive, la dernière étape et la plus importante de toutes.

Mise en place du Data Layer (Compatible avec GA4)

Pour relever les informations liées à la commande, vous allez devoir exposer dans votre Data Layer les données de chaque produit ainsi que la quantité, et y ajouter les données relatives aux taxes et aux frais de livraison comme évoqué dans le début de ce tutoriel.

Voici le code que je vous recommande de mettre en place dans votre Data Layer:

<script>
    window._mtm = window._mtm || [];
    window._mtm.push({ecommerce: null});  // Clear the previous ecommerce object.
    window._mtm.push({
        event: "purchase",
        ecommerce: {
            transaction_id: "000123",
            value: 35.98,
            order_sub_total: 30.98,
            tax: 3,
            shipping: 2,
            discount: false,
            items: [
                {
                    item_id: "0123456789",
                    item_name: "T-shirt Blanc",
                    item_category: "Vêtements",
                    price: 19.99,
                    quantity: 1,
                },
                {
                    item_id: "9876543210",
                    item_name: "T-shirt Vert",
                    item_category: "Vêtements",
                    price: 15.99,
                    quantity: 1,
                }
            ],
        }
    });
</script>

Création de la balise HTML personnalisé

Rendez-vous ensuite sur le Tag Manager pour créer une balise HTML personnalisée dans laquelle vous intégrerez le code suivant.

  • Nom de la balise : Matomo - Ecommerce - purchase.
<script>
window._paq = window._paq || [];
var ecommerce = {{Ecommerce}};

// Product Array
ecommerce.items.forEach(function(item){
    _paq.push(['addEcommerceItem',
        item.item_id,
        item.item_name,
        item.item_category,
        item.price,
        (item.quantity || 1)
    ]);
});

// Push custom event
_paq.push(['trackEvent', 'Ecommerce', 'Purchase', 'purchase', ecommerce.value]);

// Push ecommerce data
window._paq.push(['trackEcommerceOrder',
    ecommerce.transaction_id,
    ecommerce.value,
    (ecommerce.order_sub_total || 0),
    (ecommerce.tax || 0),
    (ecommerce.shipping || 0),
    (ecommerce.discount || false)
]);
</script>

Création du déclencheur personnalisé

Maintenant que notre dernière balise est créée, nous allons l’attacher à un déclencheur toujours de type "Événement personnalisé” avec la configuration suivante :

  • Nom du déclencheur : Custom Event - Ecommerce - Purchase.
  • Nom de l’événement : purchase.

N’oubliez pas de publier votre conteneur à l’issue de ces quatre étapes afin d’appliquer les changements.

Si vous avez des questions, n'hésitez pas à les poser dans l'espace commentaire prévu à cet effet.

Allez, ne t'arrête pas maintenant !
Bravo, vous avez fini cette série ! Continuer avec une autre série
Épisode précédent
Commentaires

Vous devez être connecté pour pouvoir commenter. Se connecter

  • Publié par csaeum

    Bonjour Désolé, j'ai fait traduire cela avec Google Translate ! J'ai trouvé ce message via le forum Matomo et j'ai pu bien le mettre en œuvre pour moi. Mais malheureusement, j'ai maintenant cette erreur dans la View_Item_List ou dans votre category_view: Erreur de syntaxe non interceptée : redéclaration de let productInfo Pouvez-vous me dire pourquoi j'ai fait les données comme vous le montrez dans la documentation !

    1. Publié par Ronan

      Bonjour csaeum,

      Vous devez probablement avoir la variable ProductInfo de définie à un autre endroit de votre script. Si vous réalisez des copier coller du code proposé ici, vous ne devriez pas rencontrer de soucis (le code à été testé). Dites moi si vous rencontrez encore ce souci, sinon, n'hésitez pas à me contacter via email et à m'envoyer des screenshots de vos erreurs.

    2. Publié par Ronan

      Le problème semble corrigé en remplaçant let productInfo par var productInfo. J'ai mis à jour la documentation pour régler le souci.

      Merci !

  • Publié par Cisco

    Bonjour Ronan, Déjà bravo et merci pour tout ce travail, c'est très bien fait et très utile. Ma question concerne la balise HTML personnalisée lors d'un achat. Je suis dans une situation où je dois enrichir le dataLayer avec des infos complémentaires (comme la marque par exemple). Est ce que je peux les écrire de manière "normale" c'est à dire sans les parenthèses ni le double || ? Exemple :

    <script>
 window._paq = window._paq || [];
 let purchaseInfo = {{PurchaseInfo}};
 
 purchaseInfo.products.forEach(product => {
     _paq.push(['addEcommerceItem',
         product.sku,
         product.name,
         product.categories,
         product.price,
         (product.quantity || 1),
         product.brand,
         product.seller
     ]);
 });
</script>

    Si jamais tu as l'occasion de répondre je te remercie, et si c'est pas le cas merci quand même , ton tuto est plus clair que la doc officielle de Matomo ! GG

    1. Publié par Ronan

      Bonjour Cisco,

      Merci pour ton message, ça me fait très plaisir ! Concernant ta questions, l'utilisation de || 1 permet de définir une valeur par défaut : (product.quantity || 1) veut dire que si la quantité du produit n'est pas définie, elle est alors égale à 1

      Cela fonctionne surtout pour les valeurs de type Number, donc pour le reste (nom, catégorie, code SKU etc... tu n'en as pas besoin, tu peux les écrire directement (en t'assurant que la valeur soit toujours définie en amont)

      En espérant avoir répondu à ta question,

      Bonne journée, Ronan HELLO

    2. Publié par Cisco

      Merci t'es un boss #coeuraveclesmains Encore bravo pour tout ce travail si bien fait et tellement utile !

    3. Publié par Ronan

      Merci beaucoup ! Bonne continuation :)

  • Publié par marie helene vey

    Bonjour Ronan, J'essaye d'enrichir le dataLayer Auriez vous une piste afin d'intégrer le code de coupon avec le montant associé ? merci d'avance et bonne journée ;)

    1. Publié par Ronan

      Bonjour Marie,

      Le montant du discount proposé par un coupon est à renseigner au niveau de l'attribut : purchaseInfo.discount de la fonction trackEcommerceOrder.

      En revanche, si vous souhaitez remonter le texte du coupon utilisé, il faudra créer une nouvelle entrée dans le data layer comme par exemple : couponCode : MON_COUPON

      Ce code coupon pourra ensuite être envoyé vers Matomo sous forme d'événement ou de dimension personnalisées en fonction de votre besoin.

      Bonne journée, Ronan HELLO

    2. Publié par marie helene vey

      parfait merci beaucoup

  • Publié par Ant56690

    Bonjour :)

    Merci pour vos articles et la documentation bien réalisée sur Matomo,

    Utilisant GTM non server-side avec un dataLayer GA4, j'utilise Matomo comme outil analytique afin de réduire l'écart avec le CRM, et avoir également accès aux heatmaps et autres outils qui me semblent très utiles.

    Sur GTM, pour remonter les données sur Matomo, j'utilise le tag Template Matomo (pour onPremise et bientôt Cloud).

    Cependant, en regardant sur Matomo, premièrement tous les achats ne remontent pas sur Matomo quand je compare à un objectif mis en place qui est la page de confirmation. Certains vrais achats n'ont pas le "symbole" d'achat sur Matomo.

    Deuxièmement, je souhaiterais connaitre également le nom et l'ID des produits, ce qui n'est pas le cas aujourd'hui.

    De même, je souhaiterais aussi avoir accès autres évènements e-com de Matomo qui ne sont pas actifs sur celui-ci (update_cart, view_item) alors que les achats remontent (en partie).

    Est-ce possible d'utiliser GTM et les événements GA4 pour les transformer en événement traité par Matomo afin d'avoir des données remontées, ce qui ne nécessite pas l'implémentation technique sur le site et permet de gagner du temps ?

    Plus globalement, remonter les données e-commerces (nom, id produit, ajout au panier, achat) en restant sur GTM et avec un dataLayer GA4. Ou alors ce n'est pas possible ?

    Bien cordialement !

    1. Publié par Ronan

      Bonjour,

      Pour répondre à tes questions : Normalement, vous retrouvez bien le nom et le code produit dans Matomo dans le menu "E-Commerce > Produit", si vous ne voyez rien ici, c'est que le tracking e-commerce n'est pas fonctionnel.

      Comment est configuré l'objectif qui vous sert de référence pour le comptage des achats ? Assurez-vous que le déclencheur coté TagManager soit bien le même pour les deux actions afin de pouvoir comparer.

      Pour accéder aux événements e-commerce, il faut ajouter une balise de suivi d'événement Matomo. Par défaut, ces événements e-commerce ne sont pas comptabilisés comme "Événement" par Matomo.

      Oui, il est possible d'exploiter les événements GA4 sans souci dans Matomo en utilisant la synchronisation de dataLayer avec _mtm comme évoqué plus haut dans cet article. Et oui, vous pouvez tout remonter depuis GTM et un dataLayer GA4 pour Matomo (sauf ajout/retrait du panier).

      En espérant avoir répondu à vos questions, Ronan

Vous préférez une formation Matomo sur-mesure ?

Je réalise des formations professionnelles sur-mesure. Si ça peut vous intéresser, n'hésitez pas à me contacter 🤓

Je fais une demande