Formation Matomo

Suivi e-commerce avancé

  • Episode N° 30
  • Difficulté difficile
  • Publié le 08/09/2022 par
  • Dernière mise à jour le 03/10/2024

Pourquoi utiliser le suivi e-commerce sur votre site ?

Avoir un suivi de l’activité e-commerce de votre site web permet de mieux comprendre comment vos utilisateurs interagissent avec vos produits. Découvrez des comportements utilisateurs que vous ne soupçonnez pas et optimisez vos tunnels de vente pour maximiser votre panier moyen.

Matomo dispose d’une fonctionnalité de suivi e-commerce avancée (Enhanced Ecommerce) qui ajoute toutes les données d’action d’achat aux données de comportement collectées nativement.

Activer le suivi e-commerce dans Matomo

Pour disposer de ces fonctionnalités de suivi e-commerce, vous devez activer ce module dans l’administration de Matomo.

Activation et configuration

Rendez-vous dans l’administration de votre instance de Matomo avec un compte administrateur et cliquez sur “Sites web > Gérer” dans le menu latéral. Cliquez ensuite sur le bouton d’édition de votre site web.

Dans le formulaire qui vient de s’afficher, scrollez vers le bas et remplissez les champs suivants :

  • Le champ “E-Commerce” sur “E-Commerce activé”.
  • Le champ “Devise” sur “€”.
  • Le champ “Fuseau horaire” sur “France”.

Cliquez ensuite sur enregistrer. Si la configuration est bonne, vous devriez voir un onglet “E-Commerce” situé entre “Acquisition” et “Objectifs” dans le menu latéral de Matomo.

Anonymisation des ID de commande

Notre configuration dans l’administration de l’outil n’est pas encore terminée, pour respecter le RGPD, vous devez anonymiser l’identifiant pour chaque commande passée par vos clients. Pour cela, rendez-vous dans l’administration et cliquez sur “Vie privée > Anonymiser les données” et cochez la case “Anonymiser l'identifiant de la commande”. Sauvegardez les changements et le tour est joué !

Configurer le suivi e-commerce sur un CMS

La plupart du temps, les sites e-commerce sont construits à partir de CMS comme WordPress WooCommerce, Magento ou PrestaShop.

Dans le cas où votre site web fonctionne avec WooCommerce, Matomo dispose d’un plugin officiel payant (WooCommerce Analytics).

Si votre site web fonctionne avec d’autres CMS, certains connecteurs existent et ont été créés par la communauté, vous retrouverez la liste complète des CMS pris en charge par Matomo directement dans la documentation officielle.

Configuration des modules

Quel que soit le module d’intégration choisi, vous devrez renseigner l’URL de votre instance de Matomo, l’identifiant du site web et un jeton d’authentification.

  • L’URL doit ressembler à https://matomo.mon-domaine.fr.
  • L’identifiant du site web se trouve dans l'administration en cliquant sur l’onglet « Sites web ». (Si vous n’avez qu’un seul site sur Matomo, l’identifiant sera toujours 1).
  • Le jeton d'authentification se récupère en vous rendant dans “Personnel > Sécurité” et cliquez ensuite sur le bouton “Créer un nouveau jeton”. Vous devrez alors saisir votre mot de passe, puis donner un nom au jeton de sécurité.

Configurer le suivi e-commerce sans CMS

Si votre site web e-commerce n’est pas pris en charge par un module Matomo, vous allez devoir mettre en place un suivi manuel.

Le suivi complet du site nécessite quatre étapes, mais seule la dernière est obligatoire, toutefois, je recommande fortement de réaliser toutes les étapes du balisage.

Étape 1 - Vue d’une page produit

Dans cette première étape, nous allons nous focaliser sur la performance des pages produit. Ce balisage nous permettra de connaître quels sont les produits qui intéressent le plus les utilisateurs.

Pour mettre en place ce code de suivi, vous devez vous munir de quatre informations concernant vos produits :

Information Exemple de valeur Type de variable Nécessité
Code SKU produit “0123456789” String Obligatoire
Nom du produit “T-shirt Blanc” String Obligatoire
Nom de la catégorie “Vêtements” String/Array Optionnel
Prix du produit 19.99 Integer/Float Optionnel

Ces quatre informations seront à reporter dynamiquement dans un petit extrait de code à placer sur chaque page produit (vous placerez ce code dans le template de la page afin de ne pas répéter l’opération pour chaque produit du site).

<script>
_paq.push(['setEcommerceView',
    "0123456789",
    "T-shirt Blanc",
    "Vêtements",
    19.99
]);
</script>

Cet extrait de code permet d'émettre l’événement setEcommerceView et doit être placé obligatoirement avant la ligne suivante :

_paq.push(['trackPageView']);

Vous remarquerez que le prix est mentionné sans la devise. La devise a été configurée dans les réglages e-commerce de Matomo.

Étape 2 - Vue d’une page catégorie

Dans cette seconde étape, nous allons baliser les pages de catégorie des produits afin de déterminer leur performance individuelle.

Le suivi des pages de catégories produits est très proche du suivi des pages produits. On va pratiquement retrouver le même code de suivi, mais auquel on retire l’information du code SKU et du nom de produit. Il faudra donc retourner le booléen false pour les deux premières valeurs. On omettra de mentionner le prix, ce qui équivaut à envoyer la valeur false également.

Information Exemple de valeur Type de variable Nécessité
Code SKU produit false Boolean Obligatoire
Nom du produit false Boolean Obligatoire
Nom de la catégorie “Vêtements” String/Array Optionnel

Voici par exemple, le code de suivi à placer sur le gabarit de vos pages catégories :

<script>
_paq.push(['setEcommerceView',
    false, // Le code SKU n'est pas compatible avec les catégories
    false, // Le nom du produit n'est pas compatible avec les catégories
    "Vêtements"
]);
</script>

Le nom de l’événement setEcommerceView est identique, d'où la nécessité de retourner false pour les items concernant les produits. Vous devrez également le placer obligatoirement avant la ligne suivante :

_paq.push(['trackPageView']);

Félicitations, vous pouvez maintenant suivre les vues de vos pages catégories, nous allons maintenant nous attaquer à la gestion du panier.

Étape 3 - Mise à jour du panier

Dans cette troisième étape, nous allons nous intéresser à l’ajout et au retrait des produits dans le panier. Le suivi de cette information nous permettra de connaître les produits présents dans les paniers abandonnés par les visiteurs de votre site e-commerce.

L’action d’ajout et de retrait du panier ne nécessite qu’un seul balisage, pour chaque modification du contenu du panier, nous allons envoyer à Matomo le détail et le nombre de chaque produit présent dans le panier après modification grâce à l’événement addEcommerceItem.

Une fois chaque produit renseigné, nous allons envoyer un dernier événement trackEcommerceCartupdate qui contiendra la somme totale des éléments du panier.

Information Exemple de valeur Type de variable Nécessité
Code SKU produit “0123456789” String Obligatoire
Nom du produit “T-shirt Blanc” String Obligatoire
Nom de la catégorie “Vêtements” String/Array Optionnel
Prix du produit 19.99 Integer/Float Optionnel
Quantité 2 Integer Optionnel

Voici un exemple de code complet pour le suivi du panier :

<script>
_paq.push(['addEcommerceItem',
    "0123456789",
    "T-shirt Blanc",
    "Vêtements",
    19.99,
    2
]);
_paq.push(['trackEcommerceCartUpdate', 19.99]);
</script>

Étape 4 - Suivi des commandes

Nous arrivons maintenant à la quatrième et dernière étape du balisage de votre site e-commerce.

Pour compléter cette étape, nous allons réutiliser le code d’ajout des produits au panier pour l’adapter à la commande. Il faudra ajouter ce code pour chaque produit présent dans la commande, exactement comme pour l’ajout/retrait du panier.

<script>
_paq.push(['addEcommerceItem',
    "0123456789",
    "T-shirt Blanc",
    "Vêtements",
    19.99,
    2
]);
</script>

Une fois ce code mis en place, vous allez devoir rassembler différentes informations liées à la commande :

Information Exemple de valeur Type de variable Nécessité
Numéro de commande “123456” String Obligatoire
Total 39.98 Integer/Float Obligatoire
Sous-total 31.98 Integer/Float Optionnel
Taxes 5 Integer/Float Optionnel
Coût d’envoi 3 Integer/Float Optionnel
Promotion false Integer/Float/Boolean Optionnel

Ces informations seront à adapter au code suivant qu’il faudra placer à la suite des événements addEcommerceItem.

<script>
_paq.push(['trackEcommerceOrder',
    "000123",
    39.98,
    31.98,
    5,
    3,
    false
]);
</script>

Ce qui devrait donner finalement pour la page le code complet suivant :

<script>
_paq.push(['addEcommerceItem',
    "0123456789",
    "T-shirt Blanc",
    "Vêtements",
    19.99,
    2
]);

_paq.push(['trackEcommerceOrder',
    "000123",
    39.98,
    31.98,
    5,
    3,
    false
]);
</script>

Félicitations, vous venez de baliser intégralement votre site web pour le suivi e-commerce ! Dans l'épisode suivant, vous allez voir comment réaliser cette même configuration en utilisant le Tag Manager interne de Matomo, c'est cette dernière configuration que je vous recommande.

Allez, ne t'arrête pas maintenant !
Épisode suivant
Épisode précédent
Commentaires

Vous devez être connecté pour pouvoir commenter. Se connecter

  • Publié par Niccolas Berthelot

    Bonjour,

    Il est donc possible d'activer le mode e-commerce sans avoir le consentement de l'utilisateur (si nous anonymisons l'id de commande) ?

    Il n'y a pas réellement de communication de Matomo sur le e-commerce et la RGPD... Les seules informations à ce sujet sont les suivantes (CNIL) : "En mode “exempté de recueil du consentement” il est important que la mesure des commandes du commerce électronique (E-commerce) ne soit pas utilisée sur le site. (Pour pouvoir utiliser la mesure du E-Commerce pour un visiteur, il serait nécessaire de demander le consentement de l’utilisateur.)"

    1. Publié par Ronan

      Bonjour,

      En effet, l'utilisation du module de suivi e-commerce n'est pas compatible avec le mode de suivi sans consentement utilisateur. En clair, si vous souhaitez effectuer un suivi utilisateur, il vous faut un bandeau cookie.

      Bonne journée, Ronan

  • Publié par Vincent

    Bonjour,

    Sans pour autant activer les fonctionnalités e-commerce il semble acceptable de faire remonter un achat sous forme d'événement personnalisé avec une valeur d'événement. Cela ne va d'ailleurs pas à l'encontre du guide de configuration de la CNIL.

    Pour autant à quel point peut on pousser "le vice" ? Sans fonctionnalité e-commerce, pas d'order-id. Il me semble tout à fait possible (sur le plan technique) de suivre :

    • sous forme d'événement personnalisé les vues de pages produits
    • sous forme d'événement personnalisé les ajouts au panier
    • sous forme de dimension personnalisée (visite) l'état des paniers
    • sous forme d'événement personnalisé l'achat

    Cela ne permettrait pas d'avoir une vision "au produit" comme avec les fonctionnalités e-commerce mais cela donnerais une bonne vision ROIste notamment

    1. Publié par Ronan

      Bonjour Vincent,

      Concernant le suivi e-commerce, ce qui est interdit principalement c'est de remonter un numéro de commande qui te permettrait de retrouver l'identité de l'acheteur.

      Donc je te recommande en effet de remonter les actions e-commerce sous forme d'événements personnalisés. Le souci de Matomo est que tu ne peux pas remonter de valeur autre qu'un nombre dans le champ value d'un événement. Par contre, on peut complètement utiliser le champ action pour passer une chaine de caractères (moins pratique, mais fonctionne quand même)

      Les événements ressembleraient à ça :

      • Ecommerce - {{ProductName}} - view_item
      • Ecommerce - {{ProductCategory}} - view_item_list
      • Ecommerce - {{ProductsNameArrayStringified}} - cart_update
      • Ecommerce - {{ProductsNameArrayStringified}} - purchase - {{OrderValue}}

      La catégorie "Ecommerce" permet de regrouper les événements L'action est variable pour remonter les informations Le nom d'événement suit la convention de nommage établie par Google (et largement suivie)

      J'espère que ma réponse pourra t'aider dans ton balisage.

  • Publié par Adam Pop France

    Hello Ronan, j'ai implémenter le suivi e-commerce avancé pour mon site, tout fonctionne sauf le nombre de visite dans l'onglet produit de la catégorie e-commerce sur Matomo, pourtant mon code est le suivant :

    <script>
var _paq = window._paq = window._paq || [];

var productDetails = {{dlv - ecommerce.detail.products}};

// Vérifier si les détails du produit sont disponibles
if (productDetails) {
    _paq.push(['setEcommerceView',
        productDetails.id,        // SKU du produit
        productDetails.name,      // Nom du produit
        productDetails.brand,     // Marque du produit (ou catégorie si applicable)
        productDetails.price      // Prix du produit
    ]);
    _paq.push(['trackPageView']);
}
</script>

    Aurais-tu une solution? Merci d'avance !

    1. Publié par Ronan

      Bonjour Adam,

      Le code que tu montres ici contient une variable de dataLayer, c'est bien le cas ? Si oui, je t'invite à lire la documentation de la page suivante qui sera plus adaptée.

      Pour que les informations de vues de produits soient pris en compte, il faut s'assurer que la balise Matomo se déclenche quelques millisecondes après ta balise de page de vue de produit.

      Si tu n'utilises pas le TagManager, tu peux directement placer ce code avant le code de suivi Matomo et ton souci sera réglé.

      En espérant t'avoir donné de bonnes pistes, Ronan

    2. Publié par Adam Pop France

      Bonjour Ronan, Tout d'abord merci beaucoup pour ta réponse qui m'est utile, Mais j'utilise GTM pour implémenter les données sur Matomo est-ce le même types de problèmes?> Merci d'avance !

    3. Publié par Ronan

      Bonjour Adam,

      Oui, peu importe que ce soit GTM ou MTM, l'usage d'un Tag Manager rend le tracking plus propre et plus simple à maintenir dans le temps.

      Donc dans GTM, tu peux créer un délai de 1 ms sur ta balise Matomo. Cela forcera le Tag Manager à prioriser les balises, et donc à déclencher l'événement de page vue après l'information de vue de page produit.

    4. Publié par Adam Pop France

      Bonjour Ronan, je vais mettre en place tes conseils merci ça m'aide vraiment !

    5. Publié par Ronan

      Aucun souci, n'hésites pas si tu as des questions !

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