Qu’est-ce que Microsoft Clarity et comment l’intégrer à Google Analytics 4

L’autre jour, je t’expliquais comment « voir » le parcours complet d’un utilisateur dans GA4.

Je mets « voir » entre guillemets parce qu’en réalité, ce que tu voyais était une liste de tous les événements et pages consultés par un utilisateur sur ton site. Mais tu ne visualisais pas la navigation elle-même, c’est-à-dire un enregistrement de ce que cette personne avait fait.

Mais cela aussi, on peut l’obtenir, simplement pas avec GA4.

Il existe plusieurs alternatives et, dans cet article, je vais te parler de l’une des meilleures : Microsoft Clarity.

Ici, je t’explique tout en vidéo :

Et juste en dessous, tu l’as en texte.

Qu’est-ce que Microsoft Clarity ?

Il s’agit de l’outil d’ analyse du comportement des utilisateurs de Microsoft.

Cela signifie qu’il t’aide à comprendre l’interaction des utilisateurs avec ton site web ; on pourrait donc dire qu’il s’agit presque davantage d’un outil UX que d’un outil d’analytique digitale.

Il est très bon, facile à mettre en place et à utiliser et, en plus, il est gratuit.

Bref, il a tout pour lui.

Cela dit, ce n’est pas un substitut à GA4 mais un complément, car il offre des fonctionnalités que GA4 n’a pas.

À quoi sert MS Clarity

Oui, je viens de t’expliquer ce qu’est Clarity et quelles sont ses fonctionnalités, mais à quoi sert-il vraiment ?

Il te permet de voir et de revoir ce que les utilisateurs ont fait sur ton site.

Et tu peux le voir de façon agrégée, avec les cartes de chaleur ou aussi utilisateur par utilisateur, avec l’enregistrement de session de chacun.

Fonctionnalités

Comme je te le disais, l’outil possède les deux principales fonctionnalités déjà mentionnées.

Je vais t’en dire un peu plus sur chacune.

Cartes de chaleur

Ce sont des représentations d’une page précise du site qui nous montrent principalement :

• Les éléments les plus cliqués par les utilisateurs.
• Les parties de la page qui attirent le plus l’attention.
• Le niveau de scroll (jusqu’où descendent les utilisateurs).

Je pense qu’il est évident à quel point c’est utile pour des choses comme les menus (quels liens sont les plus cliqués), savoir s’il existe des éléments non cliquables que l’utilisateur croit cliquables ou ce qui suscite de l’intérêt (une image ? Un texte ? Un produit précis ?).

Les clics sur les liens peuvent se mesurer sans problème avec GA4, mais pour les deux autres points, il faut un outil comme celui-ci.

Pour voir la carte de chaleur, il suffit de cliquer sur la petite icône en forme de flamme de n’importe quel élément :

Tu peux aussi aller dans la section correspondante du menu supérieur et filtrer depuis là :

Enregistrement de session

Le concept est similaire au rapport Explorateur d’utilisateurs de GA4 dont je te parlais l’autre jour, sauf qu’ici tu vois la session elle-même, pas une liste d’événements :

En observant comment l’utilisateur interagit avec ta page, tu peux voir directement s’il fait ce que tu veux / attends ou non.

Et s’il ne le fait pas, réfléchir à la raison. Et modifier ton site, si nécessaire.

Attention aux enregistrements de sessions, c’est addictif. Tu en regardes deux et, tout à coup, cela fait une demi-heure que tu enchaînes les vidéos comme sur TikTok.

Pour voir les enregistrements, tu as les mêmes deux options qu’avant :

• Cliquer sur l’icône en forme de caméra de n’importe quel élément des graphiques.
• Aller dans la section correspondante du menu.

Et ce n’est pas tout : il y a une chose que très peu d’outils permettent, à savoir visualiser en temps réel ce que l’utilisateur est en train de faire sur ton site à cet instant :

À gauche, ma session actuelle sur le site. À droite, ce que je fais (avec environ une seconde de décalage)

Impressionnant.

Surtout quand IT détecte quelque chose d’étrange et que tu vas le lui montrer en temps réel XD.

Principaux cas d’usage

Bon, tu sais maintenant ce qu’il peut faire, mais quand est-il recommandé de l’utiliser et dans quel but ?

À mon avis, il existe plusieurs cas d’usage tout à fait recommandables, les voici.

Checkout

Le joyau de la couronne.

Si tu as un ecommerce ou vends un service qui exige des formulaires un peu longs (téléphonie, banque…), je te recommande de faire deux choses :

1. Commence par regarder les enregistrements de cette page (en incluant les utilisateurs sur appareils mobiles et de bureau). Analyse les principaux problèmes auxquels tes utilisateurs sont confrontés. Propose des améliorations.
2. Calcule les taux de conversion du checkout (utilisateurs qui achètent / utilisateurs qui entrent) avec un outil comme GA4. Tu pourras ainsi vérifier si les améliorations proposées en sont réellement.

En option, et un peu plus complexe, tu peux envoyer des événements d’erreur chaque fois qu’une erreur se produit dans un champ du checkout. Tu pourras ainsi quantifier quels champs ne sont pas clairs pour tes utilisateurs.

Principales landing pages / Pages de vente

Ces pages sont importantes pour plusieurs raisons :

• Les landing pages, parce qu’elles constituent le premier contact d’un utilisateur avec ton site. Si elles ne fonctionnent pas et que tes utilisateurs rebondissent, tout investissement publicitaire revient à jeter de l’argent par la fenêtre.
• Les pages de vente, parce que ce sont elles qui doivent convaincre l’utilisateur de sortir sa carte. Ou au moins de s’inscrire.

Sachant cela, dans les deux cas je te suggère à nouveau deux choses, mais toutes deux dans cet outil :

1. Observe les enregistrements de ces pages. Comme pour le checkout.
2. Regarde les cartes de chaleur: les utilisateurs cliquent-ils là où tu l’attends ? Regardent-ils là où tu le souhaites ? Sinon, pourquoi ? Que peux-tu changer ?

Observe, analyse, apporte des changements et mesure —le rebond et les taux de conversion, par exemple—.

Nouvelles fonctionnalités ou changements importants

Quand tu mets en place un changement important sur le site, ou lances quelque chose de nouveau, tu n’as aucune idée de la façon dont cela va fonctionner.

Encore moins si tu n’as pas réalisé de test utilisateur, ce qui est généralement le cas.

Donc, quelques jours plus tard, le mieux à faire —en plus de comparer les résultats obtenus aux objectifs— est de regarder les cartes de chaleur et les enregistrements utilisateurs de cette nouvelle section. Surtout si elle ne fonctionne pas comme prévu.

Tu pourras ainsi vérifier des choses comme :

• Si le trafic arrive ou non.
• Si le trafic arrive, mais ne fait pas ce que tu attends.
• Si l’utilisateur lit et fait défiler la page.
• Erreurs possibles.

Autrement dit, tu réduiras le champ des raisons pour lesquelles cela ne fonctionne pas comme prévu.

Avec Microsoft Clarity, ce type d’analyse est très simple.

Au passage, si ce que tu lis te plaît mais que tu n’es pas encore décidé à l’installer sur ton site, sache que tu peux l’essayer sans l’installer ici.

Pages avec des erreurs

Tu as peut-être déjà mis en place une mesure des erreurs dans GA4. Les plus courantes sont les erreurs JavaScript ou les événements d’erreur dans les formulaires.

Dans ce cas, il faut regarder dans GA4 sur quelles pages ces erreurs se produisent et si elles surviennent avec un navigateur / appareil précis.

Une fois cela fait, l’étape suivante consiste à essayer de reproduire le problème toi-même.

Si tu n’y arrives pas, il faudra regarder des enregistrements d’utilisateurs avec ce type d’appareil ou de navigateur, pour voir ce qu’ils font qui fait planter le site.

Une fois l’erreur trouvée, place au plus facile : la corriger. XD

Menus

Tu peux créer des événements pour quantifier les clics sur chaque élément d’un menu dans GA4, mais il est beaucoup plus rapide d’utiliser une carte de chaleur.

Tu verras ainsi rapidement quelles sections suscitent le plus d’intérêt chez tes utilisateurs.

Parfait pour n’importe quel site et idéal pour analyser les liens vers les différentes catégories d’un ecommerce.

Filtres dans un ecommerce

Et si l’on parle d’ecommerce, le suivi de l’utilisation des filtres dans GA4 n’est pas si courant. Une carte de chaleur ne te dira donc pas toujours quelles options l’utilisateur a choisies, mais elle t’indiquera quels filtres sont les plus utilisés.

Très pratique lorsque tu as beaucoup de filtres et veux les diviser en deux niveaux : les habituels —au premier niveau— et les avancés —cachés derrière un clic sur un lien—.

Avantages de Microsoft Clarity

Tu sais maintenant ce que tu peux commencer à mesurer avec l’outil, ce qu’il peut t’offrir et pourquoi je te recommande de t’y mettre au plus vite.

Mais si je ne t’ai toujours pas convaincu, voici les avantages qui me paraissent les plus importants :

• Il est très facile à installer et à utiliser. Il est puissant. Et il est gratuit.
• Il n’affecte pas les performances de ton site.
• Il propose des enregistrements utilisateurs et des cartes de chaleur illimités.
• Il n’y a pas de limite de trafic, il convient donc à tout type de projet.
• Tu peux l’ajouter à un nombre illimité de projets.
• Il n’y a pas d’échantillonnage des données. Autrement dit, il te montre tous les enregistrements de tes utilisateurs et les cartes de chaleur reposent sur des données non échantillonnées.
• Il est conforme au GDPR et au CCPA.
• Il n’est pas nécessaire de créer une carte pour chaque page que tu souhaites suivre. Il le fait automatiquement.
• Tu peux analyser deux versions d’une même page web en comparant leurs deux cartes de chaleur côte à côte.
• Tu peux appliquer des filtres aux enregistrements de sessions (pays, pages…). Tu peux donc cibler précisément ce que tu veux voir.
• Tu peux aussi intégrer Microsoft Clarity à GA4. Tu pourras alors voir les données de GA4 dans Clarity. Je t’explique maintenant comment.
• Enfin, même si je l’utilise moins que je ne devrais, sache que tu peux poser des questions sur les données de Clarity à l’IA de Microsoft, qui essaiera de te répondre et de tirer les bonnes conclusions. Cela t’évite de regarder toutes les sessions, ce qui est à la fois bien (gain de temps) et moins bien (tu vas manquer des détails) :

Comment installer Microsoft Clarity sur ton site

Pour commencer à utiliser l’outil, tu n’as que deux choses à faire.

Étape 1. Créer un compte

La première chose à faire est de créer un compte ici :

https://clarity.microsoft.com

Tu peux le créer directement avec ton compte Google ou Microsoft.

Étape 2. Ajouter le code à ton site

Tu as trois alternatives, toutes assez simples.

#1. Intégration directe avec certains (nombreux) CMS :

Tu sais, le plugin classique que tu installes dans WordPress (par exemple) et dans lequel il suffit de saisir ton identifiant de compte.

Facile, mais il y a un problème : tu ne contrôles pas facilement les cookies et il est possible d’en déposer un avant que l’utilisateur n’accepte la bannière.

Oui, c’est possible, en désactivant les cookies dans la configuration de l’outil et en ajoutant du JavaScript, mais ce n’est pas simple pour tout le monde.

#2. Via GTM

C’est pourquoi je préfère cette deuxième option, afin de pouvoir contrôler quand les cookies sont déposés, par exemple via Consent Mode.

Et bien sûr, Google Tag Manager dispose d’un modèle pour cela :

En réalité, il existe quelques autres modèles, mais celui que je te montre ci-dessus est le modèle officiel de Microsoft.

Si tu n’aimes pas utiliser de modèles, tu peux aussi créer une balise de type HTML et coller le code précédent.

#3. Ajouter le code manuellement

Que ce soit en modifiant directement les fichiers de ton site ou via une fonctionnalité du thème du CMS ou un plugin qui te permette de l’ajouter.

Personnellement, c’est l’option que j’aime le moins. Mais c’est une option.

Étapes suivantes

Une fois l’outil installé sur ton site de l’une des trois façons, Clarity commencera à collecter les données de tout ton site, sauf si tu as volontairement fait autrement (par exemple en ne sélectionnant que certaines pages dans GTM).

Tu pourras alors commencer à observer les sessions de tes utilisateurs et les cartes de chaleur.

Plus simple, impossible.

Alternatives à Clarity

Bon, maintenant que tu connais l’outil, ce qu’il apporte et comment l’installer, il se peut qu’il ne te plaise pas pour une raison quelconque.

Si c’est le cas, voici les trois que j’ai le plus utilisées dans différents projets.

Hotjar

Très bon, avec un forfait gratuit tout à fait correct. Mais bien sûr, il n’est pas presque illimité comme Clarity. C’est pourquoi il est devenu mon deuxième choix.

Il propose cependant des fonctionnalités supplémentaires, comme la possibilité de demander du feedback aux utilisateurs via un petit formulaire intégré au site.

Yandex Metrica

La version russe de Google proposait une plateforme d’analytique digitale presque aussi puissante que son rival américain. Outre des fonctionnalités similaires à Google Analytics, elle proposait des enregistrements et des cartes de chaleur dans sa version gratuite.

Il n’était pas rare de voir des sites mettre en place cet outil en parallèle de celui de Google.

Mais la technologie utilisée leur a porté préjudice : de plus en plus de projets ne pouvaient pas l’implémenter ou le faisaient difficilement, et l’outil a donc décliné.

CrazyEgg

Le premier que j’ai utilisé, donc j’y suis particulièrement attaché.

À l’époque, c’était vraiment très bien, car son forfait était assez économique. Il se concentre sur les cartes de chaleur et ne propose pas (en janvier 2024) d’enregistrements.

En dehors de ces trois-là, il existe beaucoup d’autres alternatives. Chères ou bon marché, avec plus ou moins de fonctionnalités. Donc, si ce que propose Microsoft Clarity ne te plaît pas (vraiment ?), fouille un peu sur le web.

Bonus : comment utiliser Microsoft Clarity avec Google Analytics 4

Ce n’est pas quelque chose de très mis en avant et tu ne le savais peut-être pas, mais Clarity et GA4 peuvent être liés.

Comment lier Microsoft Clarity à GA4

Pour cela —en partant du principe que GA4 est déjà installé sur ton site— tu dois te connecter à ton compte Clarity et aller dans Paramètres > Paramètres puis cliquer sur le bouton Commencer :

Il te demandera de te connecter au compte Google avec lequel tu as accès à GA4 :

Puis d’accorder les autorisations nécessaires :

Et enfin de sélectionner la propriété GA4 à laquelle tu veux le lier :

Une fois cela fait, les deux comptes seront liés :

Et tu pourras voir les données de GA4 dans Clarity:

Mais il manque une dernière petite étape : nous allons créer une dimension personnalisée dans GA4 comme ceci (si Clarity ne l’a pas créée automatiquement, ce qu’il fait parfois) :

L’important ici est qu’elle soit de type événement et que le paramètre soit “claritydimension”. Pour le nom de la dimension, tu peux mettre ce que tu veux.

Avantages de lier GA4 et Clarity

Bon, une fois les deux liés, tu voudras savoir quels avantages cela apporte.

En plus de celui que je viens de mentionner —voir les données de GA4 dans Clarity et filtrer plus facilement les segments d’utilisateurs que tu veux analyser ; il suffit de cliquer sur n’importe quel élément des graphiques pour voir apparaître en dessous l’option d’afficher la carte de chaleur ou les enregistrements correspondants— je pense que le meilleur avantage est l’inverse : voir les données de Clarity dans GA4.

C’est pour cela que nous avons créé la dimension personnalisée dans GA4.

Tu peux utiliser cette dimension dans les rapports standard ou les explorations :

Ce qu’elle te montre, c’est l’URL de Clarity qui contient le segment d’utilisateurs Analytics correspondant.

Cela signifie que tu pourras visualiser le parcours complet de l’utilisateur qui t’intéresse sur le site :

• Celui qui a passé une énorme commande.
• Ou l’autre qui disait que quelque chose ne fonctionnait pas.

Pas mal, hein ?

Important, pour voir les URL, tu devras trier le tableau selon cette dimension :

Autre petit inconvénient : l’URL n’est pas un lien, tu devras donc la copier et la coller toi-même dans un onglet du navigateur. Ce ne serait pas difficile à corriger pour Google, même si je ne sais pas s’ils ont vraiment envie de le faire…

Conclusions finales

Voilà tout ce que je voulais dire sur Microsoft Clarity.

Dans ces plus de 2500 mots, je me suis concentré sur les principaux aspects que je voulais te faire connaître : ce qu’est Clarity, ses avantages, ses principaux cas d’usage et les façons de l’implémenter dans ton projet.

Je n’ai pas inclus certaines options plus avancées parce que, franchement, je ne pense pas que ce soit nécessaire. Avec ce que je t’ai expliqué, tu as largement de quoi jouer avec pendant un bon moment.

Parce que je suppose que tu l’as déjà installé, n’est-ce pas ?

Si ce n’est pas le cas, tu as déjà trop attendu.

C’est utile, gratuit et puissant. Qui dit mieux ?