Comment configurer des heatmaps WordPress (2 méthodes faciles)

Lorsque j'ai commencé à travailler sur mes sites WordPress, je devinais la plupart du temps ce que voulaient les visiteurs. Ce n'est qu'en commençant à utiliser des heatmaps que j'ai vraiment compris comment les gens interagissaient avec mon site — où ils cliquaient, jusqu'où ils faisaient défiler, et ce qui attirait réellement leur attention.

Si vous essayez d'améliorer votre site WordPress mais que vous ne savez pas ce qui fonctionne et ce qui ne fonctionne pas, les heatmaps peuvent vous apporter des réponses.

Après avoir testé plusieurs outils au fil des ans, j'ai réduit mes options à 2 méthodes simples pour configurer des heatmaps dans WordPress : Microsoft Clarity et UserFeedback.

Dans ce guide, je vais vous expliquer chaque processus de configuration étape par étape. À la fin, vous aurez les outils nécessaires pour apporter des modifications basées sur des données à votre site. 🔥

Pourquoi avez-vous besoin de configurer des heatmaps WordPress ?

Une heatmap est un outil visuel qui vous montre exactement comment les visiteurs interagissent avec votre site Web WordPress. Elle utilise un code couleur pour mettre en évidence les zones les plus et les moins actives sur une page :

• Les zones rouges, oranges et jaunes (« chaudes ») indiquent où les visiteurs cliquent, tapotent ou passent le plus de temps.
• Les zones bleues et vertes (« froides ») indiquent les endroits qui reçoivent peu ou pas d'attention.

En visualisant cette activité, vous pouvez arrêter de deviner ce qui fonctionne et ce qui ne fonctionne pas. En d'autres termes, les heatmaps aident à éliminer les conjectures en vous donnant des informations claires sur le comportement des visiteurs.

Elles vous aident à répondre à des questions importantes, telles que :

• Les gens cliquent-ils sur vos boutons CTA ?
• Font-ils défiler suffisamment vers le bas pour voir votre contenu ?
• Est-ce qu'ils cliquent sur des éléments qui ne font rien ?

Avec ces informations, vous pouvez apporter des modifications intelligentes à votre site. Vous saurez quoi corriger, quoi déplacer et quoi améliorer.

Vous pouvez utiliser cet aperçu pour attirer plus de lecteurs, augmenter vos ventes, ou recevoir plus de demandes de renseignements de clients potentiels — le tout en apportant des changements simples basés sur la façon dont les gens utilisent réellement votre site.

Dans les sections suivantes, je vais vous expliquer comment configurer des heatmaps WordPress en utilisant 2 des meilleurs outils pour ajouter des heatmaps. L'un est entièrement gratuit, et l'autre est une option premium avec des fonctionnalités supplémentaires.

N'hésitez pas à utiliser les liens de navigation ci-dessous pour accéder à la méthode de votre choix :

Étape 0 : Préparer votre site WordPress pour les heatmaps

Avant d'ajouter des heatmaps à votre site WordPress, il est important de vous assurer que votre site est correctement préparé. Prendre quelques mesures préventives peut aider à éviter tout problème lors de vos débuts.

Si vous ajoutez des heatmaps à votre site en ligne pour la première fois, il est judicieux de tout tester sur un site de staging d'abord.

Un site de staging est essentiellement un duplicata de votre site web en ligne, où vous pouvez apporter des modifications et tester de nouvelles fonctionnalités sans affecter votre site réel. Il vous permet d'essayer de nouveaux outils, comme les heatmaps, en toute sécurité, sans risquer de perturber l'expérience utilisateur.

Ensuite, vous pouvez simplement publier les modifications pour les appliquer à votre site réel.

Si vous utilisez Bluehost, vous pouvez facilement créer un site de staging, grâce à leur solution rapide en 1 clic.

Cela dit, si vous n'avez pas accès au staging via votre hébergement, vous pouvez également utiliser des plugins comme WP Stagecoach pour créer des sites de staging.

Pour une explication complète, vous pouvez consulter notre guide sur comment créer un site de staging pour WordPress.

De plus, sauvegardez toujours votre site avant d'apporter des modifications majeures. Avoir une sauvegarde garantit qu'en cas de problème lors du processus d'installation, vous pouvez facilement restaurer votre site à son état précédent sans perdre de données importantes.

Enfin, n'oubliez pas que les cartes de chaleur fonctionnent mieux lorsqu'elles sont utilisées conjointement avec d'autres outils d'analyse et les commentaires des utilisateurs.

Considérez-les comme un point de départ pour découvrir des problèmes ou des opportunités potentiels, et non comme la seule source d'information. La combinaison des informations des cartes de chaleur avec des données plus larges vous donne une image plus claire et plus précise de la manière dont les visiteurs interagissent avec votre site.

Méthode 1 : Configurer les cartes de chaleur WordPress avec Microsoft Clarity

Microsoft Clarity est un outil gratuit et facile à utiliser de cartes de chaleur et d'enregistrement de sessions qui s'intègre parfaitement à WordPress. Il est idéal pour l'analyse globale du site, parfait pour les débutants, les blogueurs et les propriétaires de petites entreprises qui souhaitent comprendre le comportement des visiteurs.

C'est pourquoi nous l'utilisons sur certains de nos sites partenaires pour suivre les cartes de chaleur et obtenir des informations sur les interactions des utilisateurs.

Étape 1 : Créez un compte Microsoft Clarity gratuit

Pour configurer les cartes de chaleur WordPress avec Microsoft Clarity, vous aurez d'abord besoin d'un compte.

Rendez-vous sur le site web de Microsoft Clarity et cliquez sur « Get Started ».

Dans la fenêtre contextuelle qui apparaît, vous verrez que vous pouvez vous inscrire avec un compte Microsoft, Facebook ou Google. Cliquez simplement sur celui que vous préférez.

Pour ce tutoriel, je vais sélectionner « Sign in to Google ».

Après cela, vous pouvez suivre le processus d'inscription en choisissant le compte approprié.

Ensuite, cliquez sur « Continue » sur la page de confirmation.

Lors de l'inscription, il vous sera demandé de confirmer votre adresse e-mail.

N'oubliez pas de cocher les Conditions d'utilisation de Clarity et de cliquer sur la case à cocher avant de continuer.

Vous serez ensuite invité à créer un nouveau projet pour votre site WordPress.

Il vous suffit de donner un nom à votre projet, d'entrer l'URL de votre site web et de choisir votre secteur d'activité dans le menu déroulant.

Une fois cela fait, cliquez sur « Add new project » pour terminer la configuration.

Une fois cela fait, vous êtes prêt à installer le plugin Microsoft Clarity pour WordPress afin de configurer des cartes thermiques sur votre site web.

Étape 2 : Installer Microsoft Clarity sur votre site WordPress

Dans cette étape, vous installerez le plugin Microsoft Clarity et le connecterez au compte que vous venez de créer.

Depuis votre tableau de bord WordPress, allons dans Plugins » Ajouter un nouveau plugin.

Utilisez la barre de recherche pour trouver rapidement le plugin Microsoft Clarity.

Cliquez simplement sur « Installer maintenant » sur le résultat de recherche pertinent, et une fois de plus sur « Activer » lorsqu'il apparaît. 

Pour des instructions étape par étape, consultez notre guide sur comment installer un plugin WordPress.

Lors de l'activation du plugin, la prochaine étape consiste à choisir un projet Clarity pour connecter les deux outils.

Vous pouvez accéder à Clarity depuis votre zone d'administration WordPress et choisir le projet que vous venez de créer dans le menu déroulant.

Dans les prochaines secondes, vous devriez voir une notification « Projet intégré avec succès ».

Pour plus de détails, vous pouvez consulter notre guide sur comment installer Microsoft Clarity Analytics dans WordPress.

💡 Note : Si vous utilisez un plugin de mise en cache WordPress, vous devez vider votre cache WordPress après avoir connecté Microsoft Clarity à votre site web. Ceci est important car, sinon, Microsoft ne pourra pas vérifier votre site pendant quelques heures.

Étape 3 : Configurer les cartes thermiques dans Microsoft Clarity

Une fois que vous connectez Microsoft Clarity, il commencera automatiquement à suivre vos visiteurs — pas besoin de coller de code manuellement ou de modifier les fichiers du thème.

Dans votre tableau de bord Clarity, vous trouverez des rapports utiles qui vous donneront un aperçu de la façon dont les gens interagissent avec votre blog ou site WordPress.

Certaines des métriques clés incluent :

• Sessions – Ceci montre combien de visites individuelles votre site a reçues.
• Pages par session – Indique combien de pages un visiteur a consultées pendant une session.
• Profondeur de défilement – Indique jusqu'où les utilisateurs font défiler chaque page.
• Temps actif – Suivi du temps pendant lequel les utilisateurs interagissent activement avec votre page (pas seulement en la laissant ouverte dans un onglet en arrière-plan).

Vous trouverez également des widgets prédéfinis comme « Aperçu des utilisateurs », qui met en évidence les types de visiteurs et les appareils.

De plus, il existe des informations comportementales telles que les clics de rage (lorsque les utilisateurs cliquent à plusieurs reprises par frustration) et le défilement excessif (lorsque les utilisateurs font défiler trop, cherchant peut-être quelque chose).

Pour voir vos cartes thermiques, passez à l'onglet « Cartes thermiques ».

Une fois à l'intérieur, vous verrez une liste de toutes les cartes thermiques de page que Clarity a enregistrées automatiquement.

Cliquez simplement sur une page que vous souhaitez analyser.

Une fois que vous ouvrez une carte thermique, vous verrez trois vues principales : Clics, Défilement et Attention.

Vous pouvez passer à « Clics » pour voir où les visiteurs cliquent le plus.

Pour connaître votre profondeur de défilement, passez simplement à l'onglet « Défilement ».

Ici, Clarity révélera jusqu'où les utilisateurs font défiler votre page. Cela aide à identifier s'ils manquent votre contenu clé.

Enfin, cliquez sur le bouton « Attention » pour voir le temps moyen que les visiteurs passent sur différentes parties de la page.

Les zones rouges indiquent une attention plus élevée, tandis que les zones bleues en reçoivent moins.

C'est tout – Vous avez configuré avec succès des cartes thermiques WordPress à l'aide de Microsoft Clarity !

Méthode 2 : Configurer des cartes thermiques WordPress à l'aide de UserFeedback

UserFeedback par MonsterInsights combine des commentaires de type carte thermique avec des enquêtes et un ciblage avancé. C'est une option puissante pour les sites Web en croissance, les boutiques en ligne et les agences ayant besoin d'informations plus approfondies et d'un meilleur contrôle sur la manière de collecter les commentaires des visiteurs.

Chez WPBeginner, nous avons utilisé UserFeedback pour mieux comprendre ce que nos clients en conception Web attendent de nous. Nous avons eu une excellente expérience avec, et vous pouvez consulter notre avis complet sur UserFeedback pour voir pourquoi nous le recommandons !

Étape 1 : Installer et activer UserFeedback

Tout d'abord, vous devrez créer un compte UserFeedback. Vous pouvez le faire en visitant le site Web UserFeedback et en vous inscrivant à un forfait.

Une fois que vous aurez créé un compte, vous serez redirigé vers le tableau de bord de votre compte UserFeedback, où vous trouverez le lien de téléchargement du fichier zip UserFeedback et votre clé de licence.

Il est maintenant temps d'installer le plugin.

Depuis votre tableau de bord WordPress, vous devez aller dans Extensions » Ajouter.

Sur l'écran suivant, recherchons UserFeedback.

Vous pouvez ensuite installer et activer le plugin comme n'importe quel autre plugin WordPress.

Vous débutez avec l'installation de plugins ? Voici un guide détaillé sur comment installer un plugin WordPress.

Une fois activé, vous pouvez saisir votre clé de licence pour débloquer toutes les fonctionnalités professionnelles incluses dans votre plan.

Pour ce faire, vous pouvez naviguer vers UserFeedback » Paramètres. Ensuite, copiez et collez simplement votre clé de licence depuis votre tableau de bord UserFeedback dans le champ « Clé de licence ».

Cliquez sur le bouton « Vérifier » pour lancer le processus de vérification.

En quelques secondes, vous devriez voir un message de succès de la vérification.

Étape 2 : Activer le module complémentaire Heatmaps

Maintenant, allons dans UserFeedback » Modules complémentaires pour installer le module complémentaire Heatmaps.

Vous pouvez simplement faire défiler la page pour trouver le module complémentaire Heatmaps et cliquer sur « Installer le module complémentaire » dans la boîte appropriée.

Une fois installé, assurez-vous qu'il est activé en cliquant sur le bouton « Activer ».

Étape 3 : Créer une nouvelle carte thermique

Avec le module complémentaire Heatmaps activé, vous pouvez maintenant créer la carte thermique de votre site.

Allons dans UserFeedback » Heatmaps dans votre tableau de bord WordPress, et cliquez sur le bouton « Nouvelle carte thermique ».

Dans la fenêtre contextuelle qui apparaît, développez le menu déroulant pour sélectionner la page spécifique que vous souhaitez suivre. Par exemple, vous pouvez créer une carte thermique pour votre page d'accueil, une page de destination ou un article de blog.

Cliquez sur le bouton « Créer » pour configurer la carte thermique.

Étape 4 : Afficher les résultats de votre carte thermique

Après avoir créé une carte thermique, UserFeedback commencera immédiatement à collecter les données des utilisateurs.

Allons dans UserFeedback » Heatmaps et cliquons sur une carte thermique pour voir des informations visuelles détaillées.

Sur l'écran suivant, vous pourrez consulter des informations détaillées sur vos visiteurs, notamment :

• Filtre par appareil – Comparez le comportement des utilisateurs sur ordinateur, tablette et mobile.
• Clics – Voyez exactement où les gens cliquent sur votre page.
• Mouvements de souris – Suivez la façon dont les utilisateurs déplacent leur souris sur l'écran.

Si vous faites la promotion de votre site sur plusieurs canaux, vous pouvez également filtrer les données par campagne UTM, source ou support. Cela vous aide à comprendre comment les visiteurs issus de différents efforts marketing interagissent avec votre site.

Et voilà – vous avez configuré avec succès des cartes de chaleur WordPress à l'aide de UserFeedback !

Étapes bonus : Maximisez vos insights de heatmap 🔥

Les cartes de chaleur ne sont utiles que si vous savez comment agir sur ce qu'elles vous disent. Voici comment transformer les informations de vos cartes de chaleur en améliorations concrètes pour votre site WordPress.

Corrigez les points où les visiteurs abandonnent

Vous pouvez utiliser les cartes de défilement pour voir jusqu'où vos visiteurs descendent sur une page. Si un contenu important est enfoui trop bas sur la page, la plupart des gens ne le verront peut-être jamais.

Vous pouvez essayer de déplacer des éléments clés comme les appels à l'action ou les offres plus haut sur la page, et diviser les longues pages en sections plus petites avec des titres clairs. Vous pouvez également utiliser des filtres de date pour suivre l'impact de ces changements sur le comportement des visiteurs au fil du temps.

Ce petit changement peut réduire les taux de rebond et maintenir l'engagement de vos visiteurs plus longtemps.

Repérer et résoudre la confusion des utilisateurs

Parfois, les visiteurs essaient de cliquer sur des images, des icônes ou du texte qui ne sont pas cliquables. Cela montre qu'ils sont confus ou qu'ils s'attendent à quelque chose de différent.

Vous pouvez examiner vos cartes de clics et vos mouvements de souris pour repérer ces zones. Si nécessaire, vous pouvez lier ces images ou ajouter des boutons à proximité pour faciliter les choses aux utilisateurs.

Vous pouvez également configurer une enquête rapide avec UserFeedback pour demander ce que les utilisateurs s'attendaient à trouver.

Identifier et corriger les problèmes de navigation

Si vous constatez que les visiteurs sautent fréquemment d'une page à l'autre sans direction claire, c'est un signe que votre navigation peut être confuse.

Simplifiez votre navigation en vous assurant que les informations sont faciles à trouver et en ajustant tout ce qui pourrait causer de la confusion. Vous pouvez également parcourir les étapes importantes de votre site comme un visiteur novice pour vous assurer que tout fonctionne correctement.

Vous voudrez peut-être aussi consulter notre guide sur comment créer un menu de navigation personnalisé dans WordPress.

Rendez vos boutons d'appel à l'action impossibles à manquer

Si vos CTA (boutons d'appel à l'action) ne reçoivent pas assez de clics, je vous recommande d'ajuster leur couleur, leur texte ou leur placement pour qu'ils ressortent davantage.

Utilisez vos informations sur les mouvements de souris pour repérer les hésitations avant de cliquer et vérifiez les filtres d'appareils pour vous assurer que vos CTA sont visibles et faciles à cliquer sur tous les appareils, en particulier sur mobile.

J'espère que cet article vous a aidé à configurer des heatmaps WordPress. Ensuite, vous voudrez peut-être explorer nos conseils avancés pour les pages de destination afin de faire décoller les conversions WordPress et notre guide ultime sur le ciblage géolocalisé.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.