Améliore ton site avec Microsoft Clarity : heatmaps et analyse des usages

M Microsoft propose un outil original pour analyser ton site. Ils n’affrontent pas Google Analytics de front mais offrent des fonctionnalités complémentaires.

Découvre le comportement de tes visiteurs :

  • Ce qu’ils cliquent (ou ignorent)
  • Quand ils décrochent sur ta page
  • Les comportements anormaux (clics non aboutis, rage, retour rapide)

Cet article prend environ 8 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Tu visualises comment tes visiteurs se comportent sur ton site : clics, défilement, erreurs… Découvre le tutoriel. #clarity #analyse #site
Microsoft Clarity te permet de regarder les enregistrements de sessions, les zones les plus cliquées et la profondeur de lecture.

Pourquoi utiliser Microsoft Clarity ?

💖

  • Accessible à tous
  • Complet
  • Ne ralentit pas ton site
  • Gratuit

💔

  • En anglais
  • Gestion des pop-ups
  • Pas d’export
  • Pas sous Firefox

Tu as intérêt à l’installer le plus tôt possible pour disposer d’un volume de visites suffisant le jour où tu veux effectuer une analyse.

Comment se situe-t-il par rapport à ses concurrents ?

Clarity vs Google Analytics

En dehors de quelques indicateurs en commun comme les sessions et les sites référents, les deux outils sont complémentaires.

L’approche standard de Google Analytics est de commencer par une compréhension globale et d’aller creuser certains points.

Tu observes les comportements sur les pages avec Microsoft Clarity et tu essayes de comprendre le pourquoi. Certains points sont évidents quand d’autres demandent de regarder des déroulés de sessions pour essayer de décrypter l’usage.

Clarity vs Hotjar ou Crazyegg

D’autres solutions de heatmaps et d’enregistrement de sessions plus anciennes existent. La visualisation de ces outils est souvent plus fiable. Microsoft n’a clairement pas encore révolutionné ce point.

Elles ne sont cependant pas dépourvues de défauts : j’ai désinstallé Hotjar qui plombait la vitesse de mon site.

Le tableau de bord de Clarity présente une approche lisible et une circulation fluide entre les différentes informations.

Les restrictions

Ce point me rend fou : tu ne peux pas exporter les données pour des suivis ou des comparaisons. Je trouve cela difficile à comprendre pour l’éditeur d’Excel. Les données sont disponibles avec un historique de 12 mois ce qui est tout à fait correct. Ce ne serait pas un problème si nous pouvions conserver les données qui nous intéressent et observer les évolutions.

Les visualisations d’une page affichent les comportements de maximum 100 000 vues simultanément. Cela offre une belle marge pour la majorité des sites.

Une restriction qui n’est pas liée à Clarity mais au style d’outil. Tu ne retires rien sans un minimum de trafic. Ce serait dangereux de généraliser les comportements à partir de 10 visiteurs. Au début, tu peux regarder quelques sessions pour t’imprégner des comportements et repérer les points de blocage manifestes.

Tes premiers pas avec Clarity

Tes premiers pas avec Clarity

L’installation

Tu te connectes sur le site de Microsoft Clarity et tu cliques sur Sign up.

création compte Microsoft Clarity

Tu sélectionnes ta méthode d’identification.

signer

Tu acceptes les conditions générales.

confirmation email

Tu nommes ton site et tu indiques son URL complète.

nouveau projet

Sur WordPress, le plus simple est de passer par l’extension officielle.

extension clarity

Sur le site de Clarity, tu récupères le code situé tout à la fin

code clarity

et tu le colles dans Réglages > Clarity avant d’enregistrer.

identifier clarity wordpress

L’alternative sera d’ajouter le code directement dans ton thème enfant ou via l’extension Head, Footer and Post Injections.

head footer

Tu copies l’intégralité du code

code clarity complet

que tu colles dans le header de ton site (Réglages > Header and Footer > Onglet Head and Footer > Section On Every Page).

code head footer

Tu vides ton cache pour valider que tout est en place.

vider cache

Tu te rends sur ton site. Tu cliques droit puis tu inspectes sur Chrome

inspecter chrome

Tu retrouves les éléments de Clarity déclenchés dans Network quand tu scrolles par exemple.

verification clarity chrome

N’oublie pas d’ajouter Clarity dans ta politique de cookies.

Tout est en place. Tu patientes 2/3 jours avant de visualiser tes premiers résultats.

Voyons ce que te réserve Clarity.


Le tableau de bord

Le tableau de bord mélange des données classiques d’analyse de site et celles des usages. Je vais m’attarder sur les outils originaux mais ce sera une bonne première approche si tu débutes dans le domaine.

tableau de bord clarity

Le nombre de sessions (visites) avec le nombre de visiteurs uniques isolé.

sessions

Le taux de découverte moyen des pages. L’analyse par page (dans Heatmaps > Scroll) sera plus parlante.

profondeur lecture

Le temps passé sur le site au cours d’une visite n’est pas exploitable. Le temps actif indique que le visiteur regarde la page.

temps passé

La répartition par navigateur.

navigateurs

Les appareils utilisés.

appareils

Les sites référents. Tu cliques sur un élément pour appliquer automatiquement un filtre à l’ensemble des informations. Tu accèdes directement aux outils filtrés sur la droite (cette option est plus pertinente pour les pages).

sources trafic

Tu retrouves les filtres appliqués en haut de page. Voyons comment affiner ces filtres.

filtre automatique


Les filtres

Les filtres sont des paramétrages qui s’appliquent sur l’ensemble des informations du site. Tu les configures dans Filters.

filtres clarity

Je te conseille d’indiquer la période d’observation maximale si tu n’as pas un trafic conséquent. Les 3 jours par défaut sont pensés pour les très gros sites. Tu restreins par appareils et pays si tu le souhaites.

filtre utilisateurs

Les navigateurs et les systèmes d’exploitation sont utiles pour isoler une erreur technique sur une configuration spécifique.

problemes materiel

Tu analyses tes tunnels de vente en précisant les URL d’entrée, de sortie et un passage obligé.

chemin

Tu sélectionnes une source précise de trafic :

  • Site référent
  • Source
  • Medium (catégorie de trafic : SEO, E-mail…)
  • Les campagnes (UTMs de Google Analytics)
  • Channel doublonne avec Medium pour moi
filtre source

Les caractéristiques de la visite sur la page (surtout utile pour les deux premières options) :

  • le temps sur la page
  • le nombre de clics
  • la présence d’erreurs JavaScript ou d’images qui ne chargent pas
  • la taille de la page
  • la résolution
  • le temps où la page est visible
  • le temps où le visiteur est sur un autre onglet
filtre page

Tu enregistres tes filtres les plus fréquents en segments pour éviter de refaire systématiquement toute l’opération.

Les segments

Tu cliques sur Save as segment quand ton filtre est appliqué.

creation segment

Tu indiques si tu crées un nouveau segment avec Save as new ou si tu mets à jour un segment existant avec Update existing.

nouveau segment

Tu le nommes.

nommer segment

Il est désormais disponible dans Segments. Tout est logique en dehors de la mise à jour.

selectionner segment

Tu réinitialises avec Clear.

remise à zéro des filtres et segments Clarity

Voyons comment Clarity t’aide à identifier les blocages de tes visiteurs.

Détecte les problèmes sur tes pages

Détecte les problèmes sur tes pages

Ces 4 indicateurs sont particulièrement utiles pour identifier les endroits où tes utilisateurs se comportent anormalement.

Les clics inutiles

Ces clics n’aboutissent pas. Cela peut être un lien ou un bouton non fonctionnels. Ton visiteur peut être perturbé par un élément trompeur comme une capture d’écran ou une image qu’il pense cliquable.

J’ai de nombreux clics à des endroits improbables sur mon article sur les messages de bienvenue. Les enregistrements montrent qu’il s’agit des copier-coller des textes.

clics vides

Clarity isole les segments les plus fréquents. Dans cet exemple, cette information n’est pas utilisable.

segment concerné

Les accès de rage

Ton bouton qui ne fonctionne pas déclenche de multiples clics sur le coup de l’énervement.

clics rage

Le défilement excessif

Ton visiteur est persuadé de trouver une information et scanne sans trouver. Tu ne respectes pas les standards des sites de ton secteur ou ton titre est trompeur.

défilement excessif

Les retours en arrières immédiats

Oui, mais non. Ton visiteur repart à peine arrivé. La cause de ce comportement est plus complexe à interpréter.

retours rapides

Tu observes l’action en question en cliquant sur Recordings.

Valide le comportement de tes visiteurs avec les enregistrements

Valide le comportement de tes visiteurs avec les enregistrements

Tu regardes la session reconstituée d’un visiteur. Mieux vaut chercher un point précis sinon tu y passes vite des heures. C’est précieux pour tes pages de vente. Tu valides, par exemple, les arguments qui fonctionnent pour ceux qui achètent.

Tu arrives directement depuis les problèmes sur tes pages ou avec l’onglet Recordings.

onglet recordings

Tu visualises immédiatement un résumé de la session :

  • page d’entrée
  • page de sortie
  • heure et date
  • nombre de pages visitées
  • durée de la visite
  • nombre de clics
  • matériel, système d’exploitation et pays
enregistrements visites

Tu tries pour isoler l’information qui t’intéresse :

  • classement en partant du plus récent (le classement inverse est systématiquement en dessous)
  • de la session la plus courte
  • du niveau de clics le plus bas
  • du nombre de pages visitées le plus faible
tri enregistrements

Tu sélectionnes la vitesse de lecture (X1 par défaut) et le passage automatique des périodes d’inactivité (Skip inactivity).

lecteur enregistrements

Les événements sont représentés par des barres noires avec le détail qui s’affiche au survol.

description événement

Le changement de page.

change page

La sortie du site. C’est un comportement que je n’arrive pas trop à interpréter quand le visiteur revient sur la même page.

quitte site

Le mythe du lecteur qui commence tranquillement en début de page avec une lecture linéaire prend rapidement du plomb dans l’aile.

Visualise les clics avec les cartes thermiques (heatmaps)

Visualise les clics

Les cartes thermiques sont disponibles dans l’onglet Heatmaps.

onglet heatmaps

Les vues sur PC et les clics sont sélectionnés par défaut.

interface clics

Les thèmes de prédilection des lecteurs sont immédiatement identifiés avec un sommaire. L’information est précieuse quand tu souhaites améliorer une page.

densité clics

La version mobile.

clics mobile

Tu découvres le volume de clics au survol.

detail nombre clics

Tu accèdes directement à l’élément sur la gauche. Tu visualises les sessions qui comportent ce clic avec View recordings. Tu disposes ainsi de toutes les sessions des acheteurs par exemple.

aller directement élément cliqué

Les clics sont localisés au sein d’un élément. Je vois ainsi qu’un visuel récapitulatif destiné à être épinglé sur Pinterest est clairement perçu comme un sommaire.

Cela ne vaut pas la peine de tout bouleverser pour un ou deux clics mais cela commence à devenir conséquent dans cet exemple.

répartition des clics

Tu risques de rencontrer des difficultés si tu possèdes des pop-ups. Elles se superposent à ton visuel.

pop-up bloque vue

J’arrive à les supprimer en cliquant sur des éléments hors pop-up sur la gauche.

supprime pop-up

Tu ne disposes pas de cette option pour le défilement. Tu peux tenter de rafraîchir la page ou modifier la plage de date. C’est clairement un défaut majeur.

C’est vrai qu’aucun site Américain qui se respecte ne présente un avertissement pour les cookies mais bon. Copie à revoir sur ce point pour Microsoft.

Détecte les passages faibles de tes pages avec le suivi des scrolls

Détecte les passages faibles de tes pages

L’analyse du défilement (Scroll) est disponible en onglet.

analyse scroll

Les statistiques globales sont présentes sur la gauche. Cela fait un petit choc la première fois.

Evolution scroll

Il manque une visualisation comme sur Youtube. Tu peux la bricoler en copiant les données mais l’export faciliterait l’opération.

Visualisation perte visiteurs au scroll

Je te conseille de dézoomer pour te faciliter l’analyse.

carte défilement

Tu recherches les variations rapides de couleurs qui signalent un décrochage.

perte visiteurs

Tu disposes d’un comptage précis au survol.

précision volume visiteurs

La balise Average fold est précieuse. Elle matérialise la zone d’écran immédiate visible pour la moyenne des visiteurs.

moyenne vue immédiate

Tu retrouves également les grandes étapes.

points d'étapes

Conclusion

Clarity est jeune. Il nécessite encore quelques ajustements en particulier pour l’analyse du défilement. Les affichages, en particulier avec les éléments en superposition comme les bannières de cookies ou les pop-ups, méritent d’être améliorés.

Il possède cependant des atouts indéniables pour explorer les comportements qui font passer la pilule.

Le tutoriel de Microsoft Clarity pour analyser le comportement des visiteurs de ton site et l'expérience utilisateurs. #pourpasunrond Cliquez pour tweeter

S’ils mettent les moyens techniques à la hauteur des ambitions affichées, je n’ai aucun doute qu’ils vont devenir incontournables et rendre la concurrence complexe pour les autres outils de visualisation.

signature de Jean du site pour pas un rond

Les articles susceptibles de t’intéresser

Retrouve tous les tutoriels pour Attirer des visiteurs sur ton site

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean

4 réflexions au sujet de “Améliore ton site avec Microsoft Clarity : heatmaps et analyse des usages”

  1. Merci Jean !
    Très intéressant et complet. Je vais tester l’outil sur un site en production, afin de voir ce qu’il apporte de plus ou de mieux par rapport à Google Analytics.
    Question : as-tu installé les 2 solutions sur un même site ? cela peut-il engendrer des incompatibilités ?
    A priori je pense que non, mais dans un « Esprit de Concurrence », sait-on jamais 😉

    Répondre
    • Bonjour Michel,

      Clarity a été conçu dès l’origine pour venir complémenter Google Analytics. Ils ont même une option pour remonter dans Analytics.
      Les 2 cohabitent parfaitement.

      Excellente journée,
      Jean

      Répondre
  2. Bonjour Jean,
    Malheureusement sur mon site dans « Réglages » pas de Header and Footer …. à moins d’y aller via Filezzila… je ne vois pas comment faire, et même à la prochaine mise à jour tout sera à refaire !
    Mauvaise manœuvre de ma part ?
    Bonne journée
    Véronique

    Répondre
    • Bonjour Véronique,

      Les réglages Header and Footer sont liés à l’installation de l’extension Head, Footer and Post Injections.
      Tu as tout à fait raison de ne pas toucher aux fichiers de ton thème.

      Magnifique journée,
      Jean

      Répondre

Laisser un commentaire