Suivi du commerce électronique avec Matomo Tag Manager

Guide d’implémentation facile du commerce électronique avec Matomo Tag Manager et dataLayer pour tout site de commerce électronique.

Ce guide est une traduction de mon guide original écrit sur mon site personnel.

Vous êtes sur le point de lire la V2 du tutoriel de mise en œuvre du suivi du commerce électronique 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 de commerce électronique de GA4.
Il est évident que si vous disposez déjà d’une implémentation e-commerce pour Google Analytics 4, la configuration de la couche de données est grandement simplifiée (les étapes 1, 2 et 4 ayant déjà été 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 l’implémenter vous-même sur dataLayer.

N’oubliez pas de synchroniser votre dataLayer avec _mtm afin que les événements dataLayer soient visibles par Matomo.

Configurer le suivi du commerce électronique avec Matomo Tag Manager

Le suivi avancé du commerce électronique de Matomo est conçu pour fonctionner avec le code de suivi classique de Matomo. Dans cette deuxième partie de la mise en œuvre, nous verrons comment utiliser Matomo Tag Manager pour faire fonctionner le balisage de votre site de commerce électronique.

La mise en œuvre de cette surveillance nécessite des compétences techniques et une connaissance avancée de Matomo et de Matomo Tag Manager. Si vous souhaitez un soutien ou que je réalise cette mise en œuvre pour vous, n’hésitez pas à me contacter directement pour demander un devis.

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

Nous configurerons à plusieurs reprises la couche de données Matomo pour déclencher des événements personnalisés, afin de nous assurer que ces événements se déclenchent bien avant le suivi standard de Matomo, nous créerons un léger délai de 1 milliseconde (donc imperceptible) avant de déclencher la balise de suivi des pages vues.

La création de ce décalage est nécessaire pour que les balises d’affichage des pages de produits et de catégories fonctionnent correctement. Il est facultatif pour le suivi des mises à jour du panier et le suivi des commandes.

Pour réaliser cette configuration, éditez la balise « Matomo Statistics » et allez dans les paramètres avancés, puis mettez le « Délai d’activation » à 1 et sauvegardez votre nouvelle configuration.

Maintenant que votre tag Matomo est configuré, nous pouvons commencer à mettre en place le suivi du commerce électronique !

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 plus de quatre. Nous allons donc simplement créer cette variable en utilisant les paramètres ci-dessous :

  • Nom de la variable : Commerce électronique
  • Nom de la variable de la couche de données : ecommerce

Cette variable nous permettra d’accéder à toutes les propriétés de commerce électronique présentes dans la couche de données. Vous n’avez pas besoin d’adapter quoi que ce soit.

1

Étape 1 – Afficher la page d’un produit

Cette première étape vise à compter le nombre de fois qu’une page de produit a été visitée. Vous trouverez ces informations dans les rapports de performance des produits dans la section e-commerce de Matomo.

Pour faire fonctionner cette balise, nous devons récupérer les informations sur les produits dans votre base de données et les exposer à Matomo en utilisant la couche de données.

Mise en place de la couche de données (compatible avec GA4)

Copiez le code suivant en haut de votre page produit (si possible avant votre code Tag Manager) et adaptez dynamiquement les valeurs item_id, item_name, item_category et price.

<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>Langage du code : HTML, XML (xml)

Pour vous assurer que votre couche de données est correctement configurée, vous pouvez saisir _mtm les données présentes dans la console de développement de votre navigateur et les lire. Vos données doivent bien sûr y figurer.

Vous pouvez répéter cette opération de validation à chaque étape de ce guide

Création de la balise HTML personnalisée

Maintenant qu’il est possible d’accéder aux données sur les produits à partir de Matomo Tag Manager, nous allons créer une balise HTML personnalisée.

  • Tag name : Matomo – Ecommerce – View Item
<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>Langage du code : HTML, XML (xml)

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

Création du déclencheur personnalisé

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

Pour ce faire, nous allons créer un déclencheur personnalisé de type « Événement personnalisé » (tout en bas de 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 effectuée, le contrôle du commerce électronique de la page produit est terminé.

2

Étape 2 – Afficher une page de catégorie

Avez-vous trouvé comment faire la page produit ? Si c’est le cas, nous continuerons la configuration avec la page de catégorie, je vous guiderai !

Mise en place de la couche de données (compatible avec GA4)

Nous avons à nouveau besoin que le DataLayer expose le nom de la catégorie au Tag Manager, pour ce faire, copiez et adaptez le code suivant sur le modèle de votre page de catégorie de 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>Langage du code : HTML, XML (xml)

Création de la balise HTML personnalisée

Vous devez maintenant créer une nouvelle balise HTML personnalisée :

  • Tag name : 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>Langage du code : HTML, XML (xml)

Création du déclencheur personnalisé

Pour déclencher notre balise sur la page de la catégorie, nous allons créer un nouveau déclencheur personnalisé qui devra être configuré comme suit :

  • 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, c’est bien parti, continuons.

3

Étape 3 – Mise à jour du panier

Nous allons maintenant configurer une nouvelle balise pour écouter les changements au niveau du panier.

Mise en place du DataLayer (Incompatible avec GA4)

Dans ce scénario, le dataLayer doit afficher tous les 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>Langage du code : HTML, XML (xml)

Création de la balise HTML personnalisée

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

  • Tag name : Matomo – Ecommerce – Mise à jour du panier
<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>Langage du code : HTML, XML (xml)

Création du déclencheur personnalisé

Parfait, voyez-vous le chemin se redessiner à 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é, c’est bon signe pour l’avenir !

4

Étape 4 – Suivi de la commande

Nous voici arrivés à la dernière étape, la plus importante de toutes.

Mise en place de la couche de données (compatible avec GA4)

Pour collecter les informations relatives à la commande, vous devrez exposer dans votre dataLayer les données de chaque produit ainsi que la quantité, et ajouter les données relatives aux taxes et aux frais de livraison comme mentionné au début de ce tutoriel.

Voici le code que je vous recommande de mettre en œuvre dans votre couche de données :

<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>Langage du code : HTML, XML (xml)

Création de la balise HTML personnalisée

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

  • Tag name : Matomo – Ecommerce – Achat
<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>Langage du code : HTML, XML (xml)

Création du déclencheur personnalisé

Maintenant que notre dernière balise est créée, nous allons l’attacher à un trigger still de type « Custom event » 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 après ces quatre étapes pour appliquer les modifications.

Si vous avez des questions, n’hésitez pas à les poser dans la zone de commentaires prévue à cet effet.

Have some questions ? We have your solution