Suivi e-commerce avec Matomo Tag Manager

Épisode N° 31 de la formation Matomo, publié le 08/09/2022 par et mis à jour le 24/04/2024

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 DataLayer (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 dataLayer 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 DataLayer (Compatible avec GA4)

Nous avons à nouveau besoin du DataLayer 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, aller, 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 DataLayer (Incompatible avec GA4)

Dans ce cas de figure, le dataLayer 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 à nouveau ? Aller, on créé 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 toute.

Mise en place du DataLayer (Compatible avec GA4)

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

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

<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.

Voir les autres épisodes de la série