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 :

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.

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".

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.

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 :

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.

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".

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).

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).

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.