Un tutoriel rapide pour ajouter des heatmaps et des enregistrements de sessions gratuits à votre site avec Google Tag Manager et Microsoft Clarity, l'alternative gratuite à Hotjar.
Commençons par le prérequis : pour suivre ce tutoriel, il vous faut Google Tag Manager installé et un compte Microsoft Clarity. Si vous n'avez pas encore Tag Manager, consultez cet article sur l'installation de Tag Manager sur Webflow, notre plateforme de prédilection. Milk Moon Studio est avant tout un studio Webflow, et les designers Webflow aiment les projets low-code et propres. Même si vous êtes un expert Webflow et que vous n'utilisez pas Tag Manager, essayez-le. Il garde votre projet net, avec le seul script Tag Manager dans votre <head>, ce qui facilite grandement la gestion des scripts.
Pour garder votre site rapide, nous vous suggérons aussi d'appliquer notre tutoriel sur les balises différées à la balise Microsoft Clarity que nous allons créer dans Tag Manager.
Précisons au passage que, si vous voulez aller très loin dans la technique, Hotjar est une excellente solution au problème que nous cherchons à résoudre. Vous pouvez y visionner des enregistrements autour de parcours précis et d'événements de conversion, etc., ce qui demande un tout petit peu de code (sans parler de fonctions comme les sondages rapides). Mais pour ceux qui veulent simplement voir ce que font leurs utilisateurs et repérer quelques points de friction sur leur site, Clarity est excellent et gratuit. Vous obtenez toutes les heatmaps et tous les enregistrements de sessions habituels sans frais, et il est très simple de détecter des problèmes comme les clics morts et les clics de rage. Il se relie même à votre compte Google Analytics pour fournir des données plus précises. Au moment où nous avons écrit cet article, cela signifiait un compte Universal Analytics (UA), et nous renvoyions vers notre guide de configuration d'UA. UA a depuis été désactivé : utilisez plutôt notre guide pour ajouter Google Analytics 4 avec Zaraz. Le guide UA d'origine reste disponible pour mémoire : pour configurer UA dans Tag Manager, consultez cet article.
Mise à jour, 2026 : Clarity est toujours gratuit. La FAQ de Microsoft indique : "Clarity is a free service forever. You never encounter traffic limits or are compelled to upgrade to a paid version." (Clarity est un service gratuit pour toujours, sans limite de trafic ni obligation de passer à une version payante.) Il prend aussi désormais en charge Google Analytics 4, et il dispose d'un modèle officiel pour Tag Manager, que nous présentons à l'étape 2. Clarity a également besoin d'un consentement valide des visiteurs dans les juridictions qui l'exigent pour offrir toutes ses fonctionnalités, y compris les enregistrements de sessions. Nous examinons l'effet de ce point sur vos données dans le dilemme du consentement aux cookies.
Étape 1 : créer un projet Microsoft Clarity
Une fois inscrit sur Clarity, rendez-vous dans My Projects et cliquez sur Add new project.
Donnez un nom à votre projet, indiquez votre URL et choisissez une catégorie, puis cliquez sur Create.
Connectez maintenant votre compte Google Analytics pour obtenir des données plus précises.
Cliquez sur Get Started, puis sélectionnez le compte Google que vous utilisez pour GA.
Donnez l'accès à Clarity.
Sélectionnez maintenant le compte Analytics auquel vous souhaitez vous relier. À ce stade, Microsoft Clarity ne prenait en charge que les comptes Google Analytics UA, et pas GA4. Vous trouverez de l'aide pour le configurer et l'ajouter à Tag Manager dans cet article.
Mise à jour, 2026 : UA a cessé de traiter des données le 1er juillet 2023 (Google : "All standard Universal Analytics properties will stop processing new hits on July 1, 2023", soit : toutes les propriétés Universal Analytics standard cesseront de traiter de nouveaux hits le 1er juillet 2023). Les captures d'écran ci-dessus montrent donc l'ancien parcours. Clarity prend en charge GA4, mais vous le connectez en saisissant votre Account ID, votre Measurement ID et votre Property ID GA4, au lieu de choisir un compte dans une liste. Clarity n'envoie pas l'URL de lecture à GA4 et ne prend pas en charge les segments GA dans GA4 (source : Microsoft Learn, Google Analytics 4 integration with Clarity). Notre tutoriel sur les événements GA4 se combine très bien avec les enregistrements Clarity.
Étape 2 : installer la balise
Copiez l'extrait de code.
Rendez-vous dans Tag Manager et créez une nouvelle balise.
Donnez ensuite un nom à la balise, sélectionnez Custom HTML comme type de balise et collez l'extrait.
Pour le déclencheur, vous pouvez simplement choisir All Pages, mais nous allons utiliser notre déclencheur Fully Loaded. Il s'agit du déclencheur différé que nous avons configuré dans cet article. Le déclencheur All Pages convient parfaitement. Le déclencheur différé laisse simplement à la page le temps de tout charger d'abord, pour une expérience PageSpeed légèrement meilleure, ce qui rend Google un tout petit peu plus heureux.
Mise à jour, 2026 : Microsoft recommande désormais une voie plus simple que de coller l'extrait. Dans Clarity, allez dans Settings, puis Setup, puis Google Tag Manager, et sélectionnez Finish setup. Connectez-vous, choisissez votre compte et votre conteneur GTM, puis sélectionnez Create and publish. Ou bien, dans Tag Manager, choisissez Discover more tags dans la Community Template Library, recherchez Clarity et ajoutez le modèle officiel Microsoft Clarity, puis saisissez l'ID de votre projet Clarity. Le Custom HTML, comme montré ici, fonctionne toujours. Source : Microsoft Learn, How to install Clarity on Google Tag Manager. Quelle que soit la voie choisie, la balise Clarity peut toujours utiliser le déclencheur différé ci-dessus.
Il ne reste plus qu'à cliquer sur Submit puis Publish, et c'est terminé. Les résultats apparaîtront dans quelques heures et vous devriez obtenir quelque chose comme ceci :
Des questions sur la mise en place de l'analyse comportementale ? Écrivez-nous dans les commentaires, et vous trouverez toujours d'autres tutoriels ici.
Foire aux questions
Microsoft Clarity est-il vraiment gratuit ?
Oui. La FAQ de Clarity de Microsoft le décrit comme "a free service forever" (un service gratuit pour toujours), sans limite de trafic ni mise à niveau payante. Vous obtenez des heatmaps, des enregistrements de sessions et des indicateurs comme les clics morts et les clics de rage sans frais.
Comment installer Clarity avec Google Tag Manager ?
Créez un projet Clarity, puis connectez-le depuis la page Settings, Setup, Google Tag Manager de Clarity, ajoutez le modèle officiel Microsoft Clarity dans Tag Manager, ou collez le code de suivi dans une balise Custom HTML comme montré plus haut. Réglez le déclencheur sur All Pages, ou sur un déclencheur différé, puis soumettez et publiez.
Microsoft Clarity fonctionne-t-il avec GA4 ?
Oui. Quand nous avons écrit cet article, Clarity ne se reliait qu'à Universal Analytics, aujourd'hui désactivé. Clarity se connecte désormais à GA4, à l'aide de votre Account ID, de votre Measurement ID et de votre Property ID GA4. Microsoft précise qu'il n'envoie pas l'URL de lecture de l'enregistrement à GA4.
