Ce que vous saurez faire à la fin

Installer Hotjar ou Microsoft Clarity sur votre site web en moins de 15 minutes, sans aide d’un développeur.
Lire et interpréter les click maps, scroll maps et move maps pour détecter les zones mortes de vos pages.
Analyser les session recordings pour identifier les rage clicks, dead clicks et abandons inexpliqués.
Segmenter les enregistrements par appareil, source de trafic, ou comportement spécifique (utilisateurs frustrés).
Convertir vos observations en 5 à 10 actions concrètes priorisées pour améliorer l’UX et la conversion.

Durée : 3h pour l’installation et l’analyse initiale, puis 30 min/semaine en routine. Pré-requis : site web fonctionnel avec minimum 500 sessions hebdomadaires, accès au code ou à Google Tag Manager, navigateur moderne, budget zéro pour Microsoft Clarity ou environ 18 000 FCFA/mois pour Hotjar Plus.

Étape 1 — Comprendre ce que sont les heatmaps

Une heatmap (carte de chaleur) visualise le comportement agrégé de centaines de visiteurs sur une page. Là où ils cliquent souvent, la zone devient rouge. Là où ils ne vont jamais, elle reste bleue. Pour une PME sénégalaise qui investit 200 000 FCFA dans une refonte de site, les heatmaps révèlent en quelques jours si les visiteurs voient vraiment le bouton « Demander un devis » ou s’ils tournent en rond. Combinées aux session recordings (films d’écran de vrais utilisateurs), elles transforment les intuitions en faits.

Étape 2 — Choisir entre Hotjar et Microsoft Clarity

Hotjar est l’historique du marché, polyvalent, avec funnel et surveys intégrés. Microsoft Clarity est apparu en 2020, totalement gratuit et illimité, financé par Microsoft pour collecter des données d’usage. Pour une PME au budget serré, Clarity est imbattable. Pour une équipe produit qui veut intégrer surveys, NPS et funnels avancés, Hotjar reste devant.

Comparatif Hotjar vs Microsoft Clarity 2026
============================================
Critère              | Hotjar         | Clarity
---------------------|----------------|------------------
Prix                 | 0 / 18 000 F+  | 100% gratuit
Sessions/mois free   | 35             | Illimité
Heatmaps             | Oui            | Oui
Session recordings   | Oui            | Oui
Rage clicks détect.  | Oui            | Oui
Dead clicks détect.  | Non            | Oui
Surveys / NPS        | Oui            | Non
Funnels conversion   | Oui            | Non (basique)
Intégration GA4      | Oui            | Oui
Conformité RGPD      | Stricte        | Bonne
Performance site     | Léger          | Très léger

Recommandation TPE/PME budget 0 : Clarity
Recommandation produit data-driven : Hotjar
Recommandation idéale : LES DEUX en parallèle

Étape 3 — Installer Microsoft Clarity en 10 minutes

Allez sur clarity.microsoft.com et créez un compte gratuit avec votre email. Cliquez sur « Add new project », saisissez l’URL de votre site (par exemple maboutique-dakar.com) et la catégorie (e-commerce, service, blog). Clarity génère un snippet JavaScript à coller dans la balise head de votre site, ou à ajouter via Google Tag Manager. Vérifiez l’installation 5 minutes plus tard en visitant votre site et en regardant le dashboard Clarity.

Snippet d'installation Microsoft Clarity
=========================================
<!-- À coller juste avant la balise </head> -->
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;
        t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];
        y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "VOTRE_ID");
</script>

Étapes vérification :
1. Visiter le site en navigation privée
2. Naviguer 30 secondes sur 3 pages
3. Attendre 5 min puis ouvrir Clarity Dashboard
4. Vérifier que la session apparaît dans Recordings

Étape 4 — Interpréter une click map (carte des clics)

La click map montre où les visiteurs cliquent. Les zones rouges sont chaudes (beaucoup de clics), les bleues froides. Cherchez les anomalies : un clic massif sur un élément non cliquable signifie que les visiteurs s’attendent à une action (ajoutez le lien). Un bouton CTA principal froid signifie qu’il est mal positionné ou peu visible. Pour une page d’accueil PME à Dakar, le CTA « Contactez-nous » doit recevoir minimum 3% des clics totaux.

Étape 5 — Analyser les scroll maps (cartes de défilement)

La scroll map indique jusqu’où les visiteurs descendent sur votre page. Si 80% atteignent 50% de la page mais seulement 20% atteignent 75%, vous avez une chute brutale à mi-page. Souvent due à un faux pli (visuellement on dirait que la page se termine). Solution : ajouter un indicateur visuel « Scrollez pour découvrir » ou réduire la hauteur des sections. Les pages produits performantes ont 60% de visiteurs qui atteignent le bas.

Étape 6 — Lire les move maps (cartes des mouvements de souris)

Sur desktop, les mouvements de souris suivent souvent le regard (théorie controversée mais utile). Les zones où la souris stationne sont des zones d’attention. Sur mobile, le move map devient le tap map (zones touchées). Croisez avec votre design : les zones d’attention coïncident-elles avec votre hiérarchie ? Si non, votre design ne guide pas l’œil correctement.

Étape 7 — Détecter et exploiter les rage clicks

Un rage click est une série de clics rapides (3+ en 1 seconde) au même endroit. Signal d’une frustration utilisateur : le visiteur clique compulsivement parce que rien ne se passe. Causes typiques : bouton lent à charger, lien cassé, élément qui semble cliquable mais ne l’est pas. Microsoft Clarity les détecte automatiquement et les regroupe par URL. Filtrez « Sessions with rage clicks » et regardez 5 enregistrements. Vous trouverez 90% du temps un bug critique invisible en analytics standard.

Top 5 causes de rage clicks à corriger
=======================================
1. Bouton qui charge plus de 2 secondes
   → Optimiser le JS ou ajouter un loader visible

2. Élément ressemblant à un bouton mais non cliquable
   → Soit rendre cliquable, soit changer le style

3. Image qui semble agrandissable mais ne l'est pas
   → Ajouter un lightbox au clic

4. Lien externe qui ouvre dans le même onglet
   → Ajouter target="_blank" + rel="noopener"

5. Formulaire qui ne soumet pas (validation cassée)
   → Tester le formulaire en navigation privée
   → Vérifier les erreurs console JavaScript

Étape 8 — Identifier les dead clicks (clics morts)

Un dead click est un clic sur un élément qui ne déclenche aucune action. Souvent sur des images, des titres ou des paragraphes. Cela signifie que le visiteur s’attendait à une interaction. Microsoft Clarity liste ces zones. Décidez : soit vous rendez l’élément interactif (lien vers fiche détaillée), soit vous changez le style pour qu’il ne ressemble plus à un bouton.

Étape 9 — Exploiter les session recordings

Les session recordings sont des films de 30 secondes à 5 minutes montrant un visiteur réel naviguer sur votre site. Une mine d’or comportementale. Au début, regardez 10 enregistrements de visiteurs ayant abandonné un panier. Vous découvrirez des choses inavouables : un menu déroulant qui se ferme tout seul sur mobile, un champ « code postal » obligatoire qui bloque les Sénégalais, une popup qui apparaît au mauvais moment.

Méthode d'analyse 10 sessions par semaine
==========================================
Lundi : 3 sessions de visiteurs ayant converti
        → Identifier ce qui marche

Mercredi : 4 sessions de visiteurs ayant abandonné
        au moment du paiement
        → Identifier les frictions critiques

Vendredi : 3 sessions de visiteurs mobile (Tecno,
        Itel, Samsung A) avec rage clicks
        → Identifier les bugs spécifiques mobile

Notes à prendre dans un Google Sheet :
- URL où ça bloque
- Comportement observé
- Hypothèse de cause
- Action proposée + responsable + date

Étape 10 — Segmenter intelligemment

Sans segmentation, vous noyez les insights. Créez des segments utiles : visiteurs mobile, visiteurs desktop, visiteurs venant de Facebook Ads, visiteurs ayant abandonné le checkout, visiteurs avec rage clicks. Microsoft Clarity et Hotjar offrent ces filtres en standard. Comparez les heatmaps entre segments : la version mobile peut révéler un problème invisible sur desktop.

Étape 11 — Combiner avec Google Analytics 4

Heatmaps et analytics se complètent. GA4 vous dit « le taux de rebond du checkout est de 65% » mais ne dit pas pourquoi. Hotjar ou Clarity vous montrent le comportement précis. Connectez les deux : intégration native GA4 dans les deux outils. Vous pouvez ensuite filtrer les enregistrements Clarity par audience GA4 (par exemple « Acheteurs récurrents »).

Étape 12 — Respecter la vie privée et le RGPD

Hotjar et Clarity masquent automatiquement les champs sensibles (mots de passe, numéros de carte). Vérifiez que votre politique de confidentialité mentionne l’usage de ces outils. Au Sénégal, la CDP (Commission de protection des données personnelles) impose le consentement préalable comme le RGPD européen. Ajoutez un bandeau cookies avec acceptation explicite avant de lancer les enregistrements.

Mention type pour politique confidentialité
============================================
Nous utilisons Microsoft Clarity et/ou Hotjar pour
mieux comprendre le comportement de nos visiteurs et
améliorer notre site. Ces outils enregistrent de
manière anonyme les interactions (clics, scrolls,
mouvements de souris) sur nos pages. Aucune donnée
sensible (mot de passe, carte bancaire, numéro
mobile money) n'est collectée. Vous pouvez vous
opposer à cette collecte en désactivant les cookies
dans votre navigateur ou via notre bandeau cookies.

Étape 13 — Convertir les insights en actions priorisées

Un insight non actionné ne sert à rien. Toutes les semaines, listez 3 insights majeurs et associez-les à une action concrète : qui fait quoi pour quand. Priorisez par impact estimé sur la conversion. Suivez les actions dans un Trello, Notion ou Google Sheet. Au bout d’un trimestre, vous aurez 30 améliorations déployées et un site nettement plus efficace.

Étape 14 — Cas concret : agence de location à Saly

Une agence de location de villas à Saly avait un taux de conversion de 0,8% sur les demandes de réservation. Après installation de Microsoft Clarity (gratuit), 3 problèmes apparaissent en 7 jours : (1) 40% de rage clicks sur l’image principale qui n’ouvrait pas la galerie, (2) le formulaire de réservation s’écrasait sur mobile car la date était mal affichée, (3) 70% des visiteurs ne scrollaient pas en dessous du premier bloc qui ne contenait pas de prix. Corrections déployées en 2 semaines : taux de conversion passé à 1,9%, soit +137% relatif. Coût total : 0 FCFA d’outil et 80 000 FCFA de dev.

Erreurs classiques à éviter

Erreur : Installer l’outil et ne jamais ouvrir le dashboard. Sans routine hebdomadaire d’analyse, vous payez (ou consommez de la bande passante) pour rien.
Erreur : Regarder une seule session et tirer des conclusions. Toujours analyser au moins 10 sessions par hypothèse pour éviter le biais de l’anecdote.
Erreur : Confondre clics et compréhension. Un visiteur peut cliquer beaucoup parce qu’il est perdu, pas parce que l’interface est efficace.
Erreur : Ignorer la segmentation mobile vs desktop. Les comportements diffèrent radicalement, ne moyennez pas tout.
Erreur : Ne pas masquer les données sensibles. Risque légal et risque de fuite de données clients (numéros, emails, montants).
Erreur : Lancer Clarity et Hotjar sans bandeau cookies conforme. Sanction CDP au Sénégal et RGPD pour visiteurs européens.
Erreur : Surinterpréter les move maps. Le mouvement de souris ne suit pas toujours le regard. Sert d’indice, pas de preuve.

Checklist heatmaps Hotjar Clarity

✓ Outil choisi (Clarity gratuit ou Hotjar payant)
✓ Compte créé et site enregistré
✓ Snippet installé dans head ou via GTM
✓ Installation vérifiée sur 3 pages différentes
✓ Données sensibles masquées (vérification CSS)
✓ Politique confidentialité mise à jour
✓ Bandeau cookies conforme RGPD/CDP installé
✓ Heatmaps activées sur 5 pages prioritaires
                  (home, fiche, panier, checkout, contact)
✓ Recording activé avec quota suffisant
✓ Routine hebdomadaire planifiée (30 min/semaine)
✓ Filtres par device et source créés
✓ Top 5 rage clicks identifiés et corrigés
✓ Top 5 dead clicks audités
✓ 10 sessions analysées par segment chaque semaine
✓ 3 actions par semaine assignées et trackées