Comment utiliser Hotjar pour créer une heat map ?


Dans cet article, je vais vous montrer comment créer une heat map sur Hotjar. La "heat map", que l'on appelle aussi une "carte de chaleur", consiste à visualiser le comportement des visiteurs sur une page web : où ils cliquent, où ils scrollent, à quel endroit ils ne prêtent jamais attention…

Imaginez toutes les informations que vous pouvez obtenir grâce à une heatmap : savoir si le bouton de votre newsletter est suffisamment visible, si votre publicité est à l'endroit optimal, si vos lecteurs s'intéressent vraiment à telle ou telle partie de votre site, s'il y a des éléments de votre menu qui sont totalement délaissés par rapport à d'autres…

C'est un outil formidable pour améliorer l'expérience utilisateur (et le taux de conversion si votre site a un objectif en ce sens !) et aujourd'hui, je vais vous apprendre à créer une heat map gratuitement avec Hotjar, un outil proposé par Google.

Une carte de chaleur, c'est quoi ?

Une heat map permet de repérer sous forme visuelle des comportements : soit les clics des visiteurs sur vos pages, soit les mouvements de leur souris (et le scroll), qui revèlent les "zones d'intérêt" sur la page. La carte de chaleur utilise ensuite les couleurs pour indiquer les zones "froides" (tirant vers le bleu), qui suscitent le moins d'intérêt... et les zones "chaudes" (tirant vers le rouge) qui attirent l'attention.

Ça vous permet d'en tirer des conclusions très concrètes : déplacer tel ou tel élément (formulaire de newsletter, etc) à l'endroit où l'utilisateur aura le plus de chances de le voir ; identifier quel type de titre attire le plus l'attention ; repérer les visuels qui incitent le plus à l'action…

Ça peut également permettre de repérer des problèmes : vous constatez par exemple que les gens essaient de cliquer sur des éléments qui ne sont pas cliquables ; qu'ils s'attardent sur un élément au détriment d'un autre...

On peut créer une heatmap propre à chaque appareil (ordinateur, tablette, smartphone) pour étudier aussi des différences de comportement.

Concrètement, créer une heat map avec un outil comme Hotjar permet d'obtenir ce type de rendu, ici sur les clics :

Une heatmap sur desktop avec Hotjar
Une heatmap sur desktop avec Hotjar

En réalité, la heatmap est un document très long puisque vous pouvez vraiment visualiser le comportement jusqu'au bas de la page web.

Sur la carte de chaleur ci-dessus par exemple, on constate que la cible intéressée par Game Of Thrones est très friande de contenus similaires (elle clique sur le menu "Séries" mais pas du tout sur le menu Livres ou Films). On constate aussi que ces gens sont intéressés par la possibilité de faire un don ou d'acheter l'intégrale de la série... mais qu'ils ne cliquent pas du tout sur le lien Amazon plus "généraliste", proposé pour qu'ils fassent leurs achats.

Si on regarde le haut de la page sur mobile, on constate que parmi les deux boutons proposés pour le moteur de recherche, ce n'est pas le même qui est utilisé : les internautes sur desktop (ordinateur) cliquaient plutôt sur le deuxième bouton qui correspond à une recherche classique... tandis que les internautes sur mobile cliquaient plutôt sur le premier bouton, correspondant à une recherche vocale.

Créer une heat map mobile avec Hotjar
Créer une heat map mobile avec Hotjar

Quand je vous dis que ça permet de repérer des choses très instructives, ce n'est pas un mensonge ;)

Une carte de chaleur centrée sur le scroll de l'internaute joue sur la couleur et vous montre à quel moment dans la page l'internaute "décroche".

L'attention décroît peu à peu au fil de la page
L'attention décroît peu à peu au fil de la page

Ce point de "rupture" n'est évidemment pas le même sur desktop et sur mobile...

Il existe aussi sur l'outil Hotjar une heatmap "Move" qui permet de repérer les mouvements de souris

Comment créer une heat map avec Hotjar ?

Hotjar, c'est quoi ? C'est un outil d'analyse comportementale, qui va enregistrer le comportement de vos visiteurs, de manière anonyme bien sûr. Vous pouvez obtenir gratuitement trois heatmaps par nom de domaine, avec 2000 pages vues analysées par jour au maximum. Il y a ensuite des formules payantes en fonction du nombre de pages vues que vous voulez analyser par jour.

Définir un objectif et des pages à étudier

N'importe quel travail d'analyse de site web exige de définir son objectif en amont. Ça permet de bien cibler les pages à étudier ou les problèmes que l'on cherchera à résoudre. Par exemple :

  • Mes visiteurs arrivent-ils facilement à effectuer une recherche sur le site ?
  • Sont-ils attentifs aux liens que je leur propose dans mon contenu pour poursuivre leur lecture ?
  • Y a-t-il des rubriques du menu qui sont délaissées ?

En fonction de votre objectif, vous allez cibler les pages à analyser, par exemple :

  • Si vous avez une "mise en page type", que vous appliquez toujours sur un sujet précis, ça peut être intéressant de l'analyser car on peut supposer que toutes les pages du site construites sur le même modèle seront associées à des comportements similaires.
  • Si vous avez un problème de conversion sur une page, analysez-la : vous constatez qu'un visiteur ne clique pas assez sur le bouton "Acheter", "Demander un devis", "Abonnez-vous", que sais-je... peut-être que la carte de chaleur vous aidera à comprendre ce qui perturbe l'internaute et l'empêche d'aller au bout de son action.

Il faut également cibler des pages qui reçoivent assez de trafic. En effet, pour pouvoir tirer des conclusions, il est nécessaire d'avoir un panel de visiteurs représentatif.

C'est en ce sens aussi qu'une version payante de Hotjar est intéressante : elle vous permet d'analyser plus de volume de pages, donc d'avoir une meilleure fiabilité des données.

Créer une carte de chaleur avec Hotjar

Allez sur Hotjar et cliquez sur "Try it free". Entrez un nom, une adresse e-mail... et c'est parti, en quelques clics vous allez pouvoir créer une heat map. Vous devez d'abord créer un profil pour votre site (il y a un gros signe "+" en haut à gauche et un lien "Add new site" quand on clique dessus).

Une fois le profil de site créé, vous accédez à un dashboard général... avec un menu qui vous offre en réalité une multitude d'options, au-delà de la carte de chaleur.

Un dashboard sur Hotjar
Un dashboard sur Hotjar

Vous pouvez par exemple créer un sondage ou une enquête pour demander aux visiteurs leur avis sur votre site. Voici un exemple sur Booking.com :

Donner un avis sur un site
Donner un avis sur un site

La rubrique "Forms" permet quant à elle d'analyser le comportement sur un formulaire : quels champs créent de la confusion chez l'internaute, à quel moment il abandonne le remplissage d'un formulaire... Pour un professionnel, ça peut être extrêmement utile si vous fonctionnez avec un formulaire de demande de devis un peu "détaillé" par exemple : vous pouvez ainsi voir si le visiteur bloque sur certains champs ou se lasse au bout d'un moment...

Dans notre cas, nous allons nous intéresser au menu "Heatmaps". Cliquez sur le bouton "New Heatmap" puis donnez un nom à votre carte de chaleur et cliquez sur "Next". Avec une formule gratuite, l'outil enregistrera un maximum de 1000 pages vues.

Définissez ensuite quelle page va être analysée. Vous disposez de deux options :

  • Simple URL match : si vous avez une page avec différents paramètres, vous pouvez entrez l'URL sans ces paramètres, toutes les variantes avec paramètres seront alors analysées. Par exemple, si vous avez une boutique avec l'URL maboutique.fr/bracelets/bracelet-eden?style=or et l'URL maboutique.fr/bracelets/bracelet-eden?style=argent, vous pouvez entrer la partie maboutique.fr/bracelets/bracelet-eden et Hotjar analysera les deux variantes, or et argent.
  • Exact URL match : Hotjar analysera l'URL exacte entrée ici, c'est l'option que j'avais choisie pour analyser quelques pages de mes blogs.
Créer une heat map sur Hotjar
Créer une heat map sur Hotjar

Vous disposez aussi d'options avancées ("Advanced Options") qui vous donnent la possibilité d'exclure certaines parties de la page, notamment si vous avez une pop-up. Vous pouvez entrer le nom d'une classe CSS précise à exclure par exemple.

Il ne vous reste plus qu'à cliquer sur le bouton "Create Heatmap".

Lancer le tracking Hotjar

Hotjar ne peut pas être utilisé pour n'importe quel site, ce serait la porte ouverte à toutes les dérives (coucou l'espionnage des concurrents, la collecte de données sans aucun contrôle...).

Il ne peut être utilisé que sur un site dont vous êtes propriétaire... et pour qu'il fonctionne, il faut ajouter sur vos pages un code de tracking, exactement comme lorsque vous installez Google Analytics.

Avant, je vous conseille de vous exclure vous-même de ce tracking, comme on le fait sur Google Analytics, le but étant de ne pas enregistrer votre propre comportement. Ça se passe dans le menu Settings > IP Blocking en haut à droite de la page : cliquez sur le bouton "Block my own IP", Hotjar détectera l'adresse IP qui identifie votre ordinateur et l'exclura de l'analyse.

Si vous faites ce type d'analyse pour une entreprise, vous pouvez exclure les adresses IP des autres personnes qui connaissent bien le site... car leur comportement n'est pas représentatif du "visiteur moyen".

Bloquer une IP sur Hotjar
Bloquer une IP sur Hotjar

Enfin, allez dans Settings > Sites & Organizations et cliquez sur le bouton "Tracking code" à côté de l'adresse de votre site. Vous obtenez un bout de code à copier entre les balises <head> et </head> de votre site (sur WordPress, on les trouve en général dans le fichier header.php du thème).

Code de tracking Hotjar
Code de tracking Hotjar

Une fois tout ceci terminé, vous pouvez cliquez sur le bouton "Verify Installation" dans l'onglet du même nom.

Hotjar va désormais enregistrer les sessions de vos visiteurs sur les pages que vous avez définies.

Visualiser votre heat map

Ça se passera dans le menu "Heatmaps" de votre site, où vous pourrez cliquer sur un bouton "View Heatmap" pour afficher les cartes de chaleur. Vous n'êtes pas obligé d'attendre d'avoir 1000 pages vues pour prévisualiser la heat map, Hotjar vous affichera en temps réel les premiers résultats avec le nombre de clics sur chaque appareil (desktop, mobile, tablette).

Visualiser sa heatmap sur Hotjar
Visualiser sa heatmap sur Hotjar

Cependant, dans un souci de représentativité des données, je vous conseille vivement d'attendre d'avoir un nombre élevé de pages vues pour tirer des conclusions. Vous pourrez ensuite télécharger vos différentes heatmaps pour les analyser.


Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

4 commentaires sur “Comment utiliser Hotjar pour créer une heat map ?
  • Yohann

    Bonjour Marlène,
    Excellent outil, je le teste depuis 4j et j’avoue être bluffé par la qualité des infos transmises que ce soit sur les zones de clics, les mouvements de souris, scroll avec dissociation desktop, tablette et mobile. Merci de la découverte… et je vais aussi tester Smarlook annoncé dans un commentaire du coup ;-)

    Répondre à Yohann
    • Marlène

      Oui, l’offre a l’air assez similaire (3 heatmaps avec la version gratuite) et du coup, associer les 2 outils peut permettre de tester sur un panel de pages un peu plus large.

      Répondre à Marlène
  • Suny ☼

    Cool je vais découvrir Hotjar, merci ! J’utilisais plutôt Smarlook jusque là qui « filme » le comportement de l’utilisateur et voir comment il se comporte sur notre site, c’est gratuit et intéressant aussi.

    Marlène, je voulais te demander, toi qui as 3 blogs de thématique différents (lecture, voyage, blogging), est-ce que tu vois une grosse disparité au niveau du taux de rebond de tes visiteurs ?
    Est-ce que certains sites peuvent avoir un taux de rebond de 80 % et ça peut être considéré comme normal ? J’ai beau avoir changé le design d’un blog, amélioré le contenu, où je livre des infos (psycho, devperso), etc… et je ne vois pas d’évolution significative du taux rebond. Par contre, j’ai un site d’Ecommerce, 50 % de taux de rebond, mais c’est plutôt logique vu que les gens sont là pour chercher des produits.

    De ton côté, voyage/lecture/blog, tu vois une grosse différence sur le taux de rebond?

    Répondre à Suny
    • Marlène

      Je t’invite à lire l’article sur le taux de rebond. Il n’y a pas un seul site qui ait le même taux de rebond puisque chaque site a des objectifs différents, une cible différente, un thème différent… ce qui induit aussi des comportements différents.

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.