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 25/09/2022
Retour à la formation 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.

Étape 1 - Vue d’une page produit

Pour exposer ces données au Tag Manager, nous allons devoir utiliser le dataLayer.

Mise en place du DataLayer

Copiez et adaptez le code suivant pour exposer les données du produit au Tag Manager :

window._mtm = window._mtm || [];
window._mtm.push({
    'event': 'product_view',
    'ecommerce': {
        'product': {
            'sku': '0123456789',
            'name': 'T-shirt Blanc',
            'categories': 'Vêtements',
            'price': '19.99',
        }
    }
});

Création de la variable personnalisée

Maintenant que notre dataLayer expose les données du produit, il faut créer une variable de couche de données avec les paramètres suivants :

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

Cette variable va nous permettre d’accéder à toutes les propriétés du produit présentes dans le Data Layer.

Création de la balise HTML personnalisé

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 - E-Commerce - Product view

Collez ensuite le code suivant dans le champ “Custom HTML”.

<script>
window._paq = window._paq || [];
let productInfo = {{ProductInfo}};

_paq.push(['setEcommerceView',
    productInfo.sku,
    productInfo.name,
    productInfo.categories,
    productInfo.price
]);
</script>

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 il faut maintenant la déclencher au bon moment, c'est-à-dire quand Matomo reçoit l 'événement personnalisé product_view.

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 : E-Commerce Product View
  • Nom de l’événement : product_view

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

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.

window._mtm = window._mtm || [];
window._mtm.push({
    'event': 'category_view',
    'ecommerce': {
        'category': {
            'name': 'Vêtements'
        }
    }
});

Création de la variable personnalisée

Nous allons récupérer les données précédemment exposées en créant une variable personnalisée avec les paramètres suivants : 

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

Enregistrez la configuration et passez à la suite.

Création de la balise HTML personnalisé

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

  • Nom de la balise : Matomo - E-Commerce - Category View

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

<script>
window._paq = window._paq || [];
let categoryInfo = {{CategoryInfo}};

_paq.push(['setEcommerceView',
    false,
    false,
    categoryInfo.name
]);
</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 : E-Commerce Category View
  • Nom de l’événement : category_view

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

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 :

window._mtm = window._mtm || [];
window._mtm.push({
    'event': 'cart_update',
    'ecommerce': {
        'cart': {
            'total': 35.98,
            'products': [
                {
                    'sku': '0123456789',
                    'name': 'T-shirt Blanc',
                    'categories': 'Vêtements',
                    'price': '19.99',
                    'quantity': 1,
                }, {
                    'sku': '9876543210',
                    'name': 'T-shirt Vert',
                    'categories': 'Vêtements',
                    'price': '15.99',
                    'quantity': 1,
                }
            ]
        }
    }
});

Création de la variable personnalisée

On récupère les données exposées dans le dataLayer en créant une variable personnalisée avec les paramètres suivants : 

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

Enregistrez la configuration et passez à l’étape suivante.

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 - E-Commerce - Cart Update
<script>
window._paq = window._paq || [];
let cartInfo = {{CartInfo}};

cartInfo.products.forEach(product => {
    _paq.push(['addEcommerceItem',
        product.sku,
        product.name, 
        product.categories,
        product.price,
        (product.quantity || 1)
    ]);
});

_paq.push(['trackEcommerceCartUpdate', cartInfo.total]); 
</script>

Création du déclencheur personnalisé

Parfait, vous voyez le chemin se redessiner à nouveau ? Aller, on créé le déclencheur associé :

  • Nom du déclencheur : E-Commerce Cart Update
  • Nom de l’événement : cart_update

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

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 :

window._mtm = window._mtm || [];
window._mtm.push({
    'event': 'purchase',
    'ecommerce': {
        'purchase': {
            'id': '000123',
            'revenue': 35.98,
            'orderSubTotal': 30.98,
            'tax': 3,
            'shipping': 2,
            'discount': false,
            'products': [
                {
                    'sku': '0123456789',
                    'name': 'T-shirt Blanc',
                    'categories': 'Vêtements',
                    'price': '19.99',
                    'quantity': 1,
                }, {
                    'sku': '9876543210',
                    'name': 'T-shirt Vert',
                    'categories': 'Vêtements',
                    'price': '15.99',
                    'quantity': 1,
                }
            ],
        }
    }
});

Création de la variable personnalisée

Nous allons récupérer les données précédemment exposées en créant une variable personnalisée avec les paramètres suivants : 

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

Enregistrez la configuration et passez à l’étape suivante.

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 (toujours à adapter selon vos besoins).

  • Nom de la balise :  Matomo - E-Commerce - Order
<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)
    ]);
});

window._paq.push(['trackEcommerceOrder',
    purchaseInfo.id,
    purchaseInfo.revenue,
    purchaseInfo.orderSubTotal,
    (purchaseInfo.tax || 0),
    (purchaseInfo.shipping || 0),
    (purchaseInfo.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 : E-Commerce Order
  • Nom de l’événement : purchase

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

Allez, ne t'arrête pas maintenant !
Épisode précédent
Bravo, vous avez fini cette série ! Continuer avec une autre série
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