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.
É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é.
É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.
É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 !
É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