Suivi e-commerce avancé

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 :

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 retrouver pratiquement 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.

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élicitation, 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.

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 :

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 au final 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élicitation, 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.