Suivi e-commerce avec Matomo Tag Manager
- Episode N° 31
- Difficulté difficile
- Publié le 08/09/2022 par Ronan HELLO
- Dernière mise à jour le 03/12/2022
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 !
É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
Copiez le code suivant en haut de votre page produit (si possible avant le code de votre Tag Manager) et adapter les valeurs sku, name, categories et price de manière dynamique.
<script>
window._mtm = window._mtm || [];
window._mtm.push({
'event': 'product_view',
'ecommerce': {
'product': {
'sku': '0123456789',
'name': 'T-shirt Blanc',
'categories': '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 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. Vous n'avez pas besoin d'adapter quoi que ce soit.
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.
<script>
window._mtm = window._mtm || [];
window._mtm.push({
'event': 'category_view',
'ecommerce': {
'category': {
'name': 'Vêtements'
}
}
});
</script>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 :
<script>
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,
}
]
}
}
});
</script>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 :
<script>
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,
}
],
}
}
});
</script>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.
- 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.
Si vous avez des questions n'hésitez pas à les poser dans l'espace commentaire prévu à cet effet !