Branche la caméra de ton site.

Ton site n'est pas une carte de visite.

Chaque jour, des clients y entrent. Certains repartent sans un mot. Tu ne vois ni la porte, ni la pièce, ni la seconde où ils ont décidé de ne pas acheter.

Un cambriolage laisse des traces : le verre au sol, le tiroir retourné. Un client qui repart ne laisse rien. Alors dans une maison, tu poses une alarme et des caméras. Pas pour attraper quelqu'un, mais pour savoir par quelle porte, dans quelle pièce, à quelle heure.

Sur ton site, cette caméra existe et elle est gratuite : Microsoft Clarity. Elle enregistre ce que font tes visiteurs : où ils cliquent, où ils s'arrêtent, quand ils partent. Ce guide te montre comment la brancher sans te tromper, puis comment la lire sans te noyer.

Installe Clarity en 10 minutes.

Trois étapes : créer le projet, poser le code avec la méthode qui correspond à ton site, vérifier que ça remonte.

1. Crée ton projet

   Va sur clarity.microsoft.com, clique Sign up et connecte toi. Dans Projects, clique New project, renseigne Name et Website, puis Add new project. Chaque projet a son propre code et son propre Project ID, visible dans Settings → Overview.

2. Pose le code selon ta plateforme

   Choisis ta plateforme. Une seule méthode par site : si tu poses le code à la main et via un plugin, tu fausses tes données.

   WordPress Shopify Wix Webflow Squarespace Framer Google Tag Manager Code à la main
   1. Dans l'administration WordPress : Plugins → Add new plugin.
   2. Cherche Microsoft Clarity, puis Install and Activate.
   3. Ouvre le plugin Clarity dans le menu, clique Sign in, choisis ton projet puis Continue (ou New project pour en créer un).

   Même procédure pour une boutique WooCommerce.

   1. Dans le Shopify App Store, cherche Microsoft Clarity: AI Insights et clique Install, puis confirme les permissions.
   2. Clique Go to app settings, active Clarity JS, puis Save. Reviens à l'installation et clique Refresh si besoin.
   3. Si un snippet Clarity était déjà dans ton thème, utilise plutôt Connect Project et évite de laisser un second tag indépendant.

   Prévois quelques heures avant que le tableau de bord se remplisse.

   1. Dans ton site Wix : Apps → App Market, cherche Microsoft Clarity, clique Add to site.
   2. Dans l'application, Sign in, choisis ton projet puis Connect (ou Add new project).

   Clarity demande ici un domaine enregistré sur ton compte Wix.

   1. Dans le Webflow Marketplace, cherche Microsoft Clarity et clique Install, puis sélectionne ton site.
   2. Connecte toi à Clarity, lie un projet existant ou choisis Add a new project (nom, URL, secteur), puis Add new project.
   3. Publie ton site : l'intégration ne s'active qu'après publication.
   1. Dans Clarity : Settings → Setup → Installation methods → Install manually → Get tracking code. Copie le script complet.
   2. Dans Squarespace : Settings → Advanced → Code Injection, colle dans Header, puis Save.

   Il faut un forfait Squarespace qui autorise le JavaScript personnalisé.

   1. Dans Clarity : Settings → Setup → Install manually → Get tracking code. Copie le script.
   2. Dans Framer : Project Settings → Custom Code → Add Script. Nomme le script, place le dans le <head> sur toutes les pages, choisis Run on every page visit.
   3. Publie le site.

   C'est une installation manuelle : il n'existe pas d'application Clarity officielle pour Framer.

   Méthode la plus propre si tu as déjà un conteneur GTM.

   1. Dans Clarity : Settings → Setup → Google Tag Manager → Finish setup. Connecte ton compte Google, clique Allow, choisis le compte et le conteneur, puis Create and publish.
   2. Si la connexion échoue, passe par GTM : New Tag → Tag Configuration → Discover more tags in the Community Template Library. Cherche Clarity, prends le modèle officiel Microsoft, Add to workspace, saisis ton Project ID, déclencheur All pages, puis Save → Submit → Publish.
   1. Dans Clarity : Settings → Setup → Installation methods → Install manually → Get tracking code.
   2. Copie l'intégralité du script de ton projet et colle le dans le <head> de chaque page à suivre. Ne réutilise jamais le code d'un autre projet.
   3. Déploie ton site.

3. Vérifie que ça remonte

   1. Ouvre ton site publié (pas un brouillon) et clique sur quelques éléments.
   2. Ouvre les outils du navigateur, onglet Network, et cherche une requête POST vers clarity.ms/collect.
   3. Dans Clarity, regarde les visiteurs en temps réel : le bouton Watch now ouvre leur visualisation.
   Combien de temps avant les données

   Les enregistrements en temps réel peuvent démarrer dès que le code fonctionne. Les cartes de chaleur affichent les clics sous environ 30 minutes. Le tableau de bord agrégé peut mettre quelques heures.

   Si rien n'arrive

   Compare le script de ton <head> avec celui de Settings → Setup → Installation methods → Install manually (surtout le src), et vérifie que le tag est bien présent sur chaque page voulue.

Le consentement : ne saute pas cette étape.

Depuis le 31 octobre 2025, Clarity exige un signal de consentement pour garder toutes ses fonctionnalités sur les visites venant de l'Espace économique européen, du Royaume Uni et de la Suisse.

Dans ces régions, le mode consentement est actif par défaut. Sans accord valide, Clarity ne pose pas ses cookies mais peut continuer en mode limité, sans cookies. Autrement dit : « pas de cookie » ne veut pas dire « pas de collecte ». Classe Clarity parmi les technologies non essentielles dans ton bandeau.

Ce que ton bandeau doit faire

Envoyer le choix à la main (Consent API v2)

Une fois le script Clarity chargé, transmets le choix réel du visiteur. Les deux paramètres sont obligatoires, et n'envoie jamais granted par défaut.

window.clarity('consentv2', {
  ad_Storage: 'denied',        // 'granted' ou 'denied'
  analytics_Storage: 'granted' // 'granted' ou 'denied'
});

Renvoie ce signal à chaque changement ou retrait de consentement. Cette API remplace l'ancienne consent.

Teste le résultat

1. Sur ton site publié, ouvre la console du navigateur et colle :

clarity('metadata', (d, upgrade, consent) => console.log('consentStatus:', consent), false, true, true);

2. Avant d'accepter, tu dois voir analytics_storage: "DENIED" et ad_storage: "DENIED". Après acceptation, les valeurs doivent changer.
3. Efface les cookies du site, refuse, puis vérifie qu'aucun cookie _clck ou _clsk n'est créé.

Les cinq réglages qui évitent de lire des données fausses.

1. Masque les données sensibles

Dans Settings → Masking → Masking mode, choisis le niveau.

Pour masquer une zone précise (espace client, adresse, panier) : Settings → Masking → Mask by element → Add element avec un sélecteur CSS, ou ajoute l'attribut suivant à l'élément HTML :

data-clarity-mask="true"

Le masquage ne s'applique pas aux anciens enregistrements et peut prendre jusqu'à une heure pour être actif. Vérifie aussi qu'aucune donnée personnelle ne traîne dans tes URL.

2. Exclus ton propre trafic

Si tu es administrateur du projet : Settings → IP blocking → Block IP address → Block my current IP. Nomme l'entrée et valide. Attends environ 15 minutes. Les plages CIDR sont possibles.

3. Laisse la détection des bots activée

Clarity exclut par défaut les bots détectés de tes totaux et affiche leur nombre en haut du tableau de bord. Pour les inspecter : Filters → Traffic → Bot traffic. Certains bots sophistiqués peuvent passer entre les mailles.

4. Relie Google Analytics 4 (facultatif)

Settings → Setup → Google Analytics integration → Get Started, connecte ton compte Google, choisis la propriété Web, Save. Une propriété Web par projet.

5. Définis ce qu'est une conversion

Sans conversion définie, Clarity te montre du comportement mais pas du résultat. Deux outils :

• Smart events : Settings → Smart events → New event. Clarity détecte parfois seul des actions comme Purchase, Add to Cart, Begin Checkout, Contact Us, Submit Form, Request Quote, Sign Up, Login, Download. Tu peux en créer jusqu'à 20 personnalisés (clic sur un bouton, visite d'une page, événement API). Réservé aux administrateurs. Vérifie dans un enregistrement que l'événement suit bien la bonne action avant de t'y fier.
• Funnels : Settings → Funnels → New funnel. Glisse des smart events ou des visites de page comme étapes, dans l'ordre. Tu obtiens le taux de conversion, les sessions converties, le temps médian et la perte à chaque étape.

Le dernier palier doit être une conversion réussie, pas un simple clic sur « Envoyer ».

Les trois questions à poser à tes données.

Tout le reste est du bruit. Ces trois questions suffisent à trouver où tu perds des clients.

Question 1 : la porte d'entrée

Ouvre Dashboards → Clarity puis Filters → Traffic. Tu y trouves le canal, la source, le medium, la campagne (tes UTM) et le site référent.

Ce que tu cherches : quel canal t'amène des gens qui te ressemblent et convertissent, pas juste du volume. Compare engagement et conversion canal par canal, puis enregistre tes comparaisons : Filters → Apply → Save as segment. Exemple utile : AIPlatform + mobile, comparé à Organic Search + mobile.

Question 2 : la pièce où ils vont

Ouvre Heatmaps, choisis une page, une période et un appareil (PC, Tablet, Mobile).

Ce que tu cherches : le pourcentage de visiteurs qui atteignent ton CTA ou ton argument clé. Ne te fie pas à la profondeur moyenne : une longue page a légitimement une moyenne plus basse qu'une page courte. Compare la même page, par appareil et par canal. Limite : 100 000 pages vues par carte.

Question 3 : la seconde du demi tour

C'est l'étape qui change tout. Ouvre Recordings, mais pas au hasard :

1. Depuis ton funnel, clique l'icône de la perte sur l'étape qui fuit : Clarity ouvre les enregistrements de ceux qui sont partis là.
2. Affine avec Filters : appareil, canal, page d'entrée ou de sortie, signal de friction. En boutique, Purchases: No isole ceux qui n'ont pas acheté.
3. Dans le lecteur, saute les temps d'inactivité et ouvre More details → Events pour la chronologie.
4. Regarde aussi 2 ou 3 sessions converties du même segment. Ce contraste évite de prendre un comportement normal pour une cause d'abandon.

Ce que tu cherches : le moment exact juste avant le départ. Une session se termine après 30 minutes d'inactivité. Rappel : c'est une reconstruction de la page, pas une vidéo.

Les signaux de friction, et ce qu'ils veulent vraiment dire.

Tu les trouves dans Filters → User Actions → Insights. Un signal n'est pas un verdict : c'est une piste à vérifier dans un enregistrement.

Il n'existe pas de profondeur de scroll moyenne « normale » universelle. Les repères 25 %, 50 % et 75 % de la carte de scroll sont des points d'inspection, pas des notes.

30 minutes par semaine, pas plus.

Partir d'un abandon précis, pas d'une pile de vidéos. Une page, un segment, une hypothèse.

La checklist de friction à passer sur une page

Quoi corriger en premier.

Règle 1 : un achat, un devis ou un formulaire réellement cassé passe avant tout, surtout s'il touche beaucoup de sessions. Ne laisse pas une moyenne repousser un défaut bloquant.

Règle 2 : pour le reste, note chaque hypothèse de 1 à 10 sur trois critères et calcule le score ICE.

Écris tes hypothèses de façon vérifiable : « sur mobile, la bannière recouvre le bouton de devis », pas « les visiteurs n'aiment pas la page ».

Ton journal de friction (modèle à copier)

Colle le dans un tableur : une ligne par constat.

URL	Appareil	Canal	Moment	Ce que j'ai vu	Hypothèse	Correction	Impact	Confiance	Facilité	ICE	Lien enregistrement	Date de contrôle

Laisse l'IA de Clarity faire le tri, pas la décision.

Clarity Copilot répond à des questions en langage naturel et résume des sessions. Utilise le pour trier en masse, puis relis toujours les sessions sources : il peut se tromper, ne voit pas ton design, et ne résume pas les sessions de moins de 5 secondes.

Cinq questions à lui poser

1. Sur mobile, quelles pages ont le plus de clics sans réponse cette semaine ?
2. Quels canaux d'acquisition amènent des sessions à forte intention mais sans conversion ?
3. Sur la page [URL], à quelle hauteur la majorité des visiteurs mobiles arrêtent de défiler ?
4. Quelles erreurs JavaScript touchent le plus de sessions ?
5. Compare les sessions qui ont atteint [étape du funnel] avec celles qui ont quitté juste avant.

Sept erreurs qui faussent la lecture.

Ta checklist de mise en route.

Coche au fur et à mesure. Ta progression reste sur cet appareil. 0 / 12

• Projet Clarity créé, Project ID noté
• Code installé avec une seule méthode
• Requête vers clarity.ms/collect vue sur le site publié
• Consentement transmis à Clarity et testé (refus, acceptation, retrait)
• Politique de confidentialité mise à jour
• Masquage réglé et zones sensibles masquées
• Mon IP et celle de l'équipe exclues
• Détection des bots laissée active
• Une conversion définie (smart event) et un funnel créé
• Segments enregistrés par canal (dont AIPlatform)
• Créneau de 30 minutes bloqué chaque semaine
• Premiers 5 enregistrements de non convertis regardés