P Pour améliorer ton site, tu dois de savoir comment tes visiteurs naviguent sur tes pages.
Tu visualises leur comportement sur ta page avec un outil simple mais redoutablement efficace une heatmap.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 59 exemple d'heatmap](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/heatmap.png)
La carte de chaleur matérialise en couleur les zones qui attirent et celles qui laissent indifférent. C’est particulièrement utile sur ta page d’accueil.
La carte de scroll est un outil complémentaire qui t’indique quand tes lecteurs décrochent.
La carte de mouvements t’indique ce qui est lu.
Hotjar offre ces outils pour les sites en dessous de 2 000 pages vues par jour. Je ne sais pas pour toi, personnellement j’en suis à des années lumières. Cela te laisse tout le temps d’améliorer ton site.
Sommaire
Cet article prend environ 8 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 60 Que font tes visiteurs sur ton site ? Découvre ce qui fonctionne et ce que tu dois améliorer. #site #blog #wordpress](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/hotjar-pinterest-a.jpg)
S’enregistrer sur Hotjar
- Se connecter à Hotjar
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 62 hotjar accueil](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/hotjar-accueil.png)
- Cliquer sur Pricing
- Onglet Personnel
- Bouton Start Now de l’offre Basic
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 63 hotjar souscription](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/01-hotjar-souscription.png)
- Compléter son nom et son adresse e-mail
- Bouton Let’s Get started
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 64 souscription nom et e-mail](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/hotjar-souscription-2.png)
- Créer un mot de passe
- Cocher I accept the Terms of service
- Bouton Next
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 65 création du mot de passe](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/hotjar-souscription-3.png)
- Sélectionner ton métier (sans importance)
- Choisir No pour Utilises-tu ce compte pour le compte de clients ?
- Inscrire le nom de ta société
- Bouton Next
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 66 formulaire métier](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/hotjar-souscription-4.png)
- Renseigner l’URL de ton site
- Cocher Je ne suis pas un robot
- Bouton Start using Hotjar
(désolé, j’ai oublié d’enregistrer l’écran)
- Bouton Record Site Visitors
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 67 enregistrement de ton site](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/05-hotjar-enregistrement-1.png)
- Bouton + Create Heatmap
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 68 configure heatmap](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/06-hotjar-enregistrement-2.png)
La prochaine étape configure un sondage instantané.
- Personnaliser la couleur du bouton
- Traduire la question par Quelle note attribuez-vous à ce site ?
- Décocher la demande d’e-mail (Ask responders…). Cette option n’est d’aucune utilité car tu ne peux pas utiliser cette adresse dans le cadre de la RGPD.
- Bouton Collect Feedback on homepage
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 69 installe feedback](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/hotjar-enregistrement-3.png)
- Invitation des membres de l’équipe :
Perso, je clique sur passer cette étape (Skip this step). Sinon, renseigner l’adresse e-mail et Bouton Invite Users
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 70 inviter des collaborateurs](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/08-hotjar-enregistrement-4.png)
Tu arrives (enfin) sur l’interface d’Hotjar.
- Cliquer sur Exit
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 71 quitter l'installation](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/hotjar-enregistrement-5.png)
- Copier l’identifiant de ton site
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 72 copie de l'identifiant](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/12-hotjar-enregistrement-6.png)
Ne ferme pas cette page
Connecte Hotjar avec ton site
Dans WordPress
- Chercher WP Hotjar dans les extensions
- Activer et Installer
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 73 wp hotjar installer](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/wp-hotjar-installer.png)
- Rechercher Hotjar dans le menu de gauche
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 74 wp hotjar dans le menu](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/wp-hotjar-menu.png)
- Coller ton Identifiant
- Bouton Enregistrer les modifications
- Cliquer sur Vider le cache si tu as un outil de gestion de cache
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 75 renseigne identifiant](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/wp-hotjar-code.png)
De retour dans Hotjar
- Bouton I have installed the tracking code
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 76 Vérification de l'installation du tracking](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/14-hotjar-enregistrement-7.png)
- Bouton Verify installation
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 77 vérification du tracking suite](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/hotjar-enregistrement-8.png)
Tu as un message qui indique que tout est en place.
Pas de panique : cela a pris 2 minutes avant de fonctionner pour moi.
Il va falloir attendre un peu qu’Hotjar collecte de l’information.
Ta page d’accueil est automatiquement analysée.
Ajoute d’autres Heatmaps
Tu peux ajouter d’autres pages (dans la limite de 3 au total).
Je souhaite par exemple analyser la page de présentation de la newsletter.
- Cliquer sur Heatmaps dans le menu de gauche
- Bouton + New Heatmap
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 78 ajput d'une nouvelle heatmap](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/17-hotjar-heatmap-ajout.png)
- Nommer la page suivie. Par exemple : Inscription à la newsletter
- Bouton Next
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 79 nommer la page](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/18-hotjar-heatmap-nom.png)
- Bouton Next
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 80 passer cette section](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/hotjar-heatmap-pages.png)
- Compléter l’URL de la page à suivre
- Bouton Next
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 81 url de la page](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/20-hotjar-heatmap-url.png)
- Bouton Create Heatmap
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 82 validation finale](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/21-hotjar-heatmap-validation.png)
Tu retrouves en dessous l’ensemble des heatmaps créées.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 83 liste des heatmaps actives](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/22-hotjar-heatmap-liste-heatmaps.png)
Récolte des avis sur ton site
Tu as déjà complété des informations sur la collecte de retours des lecteurs. Cependant, nous allons affiner certains points.
- Sélectionner Incoming dans le menu de gauche
1 )Appearance
- Sélectionner Français
- Choisir son emplacement dans Position on page :
- Centré droit
- Centré gauche
- Bas droit
- Bas gauche
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 84 emplacement de la collecte du feedback](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/23-avis-apparence.png)
2) Steps
- Personnaliser le Message de remerciement
- Décocher Ask respondents…
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 85 personnalisation du message de remerciements](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/24-avis-etapes.png)
5) Actions
- Bouton Save
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 86 sauvegarde](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/25-avis-sauvegarde.png)
Maintenant, tu laisses reposer entre une semaine et un mois en fonction de ton trafic sur les pages que tu souhaites analyser. Le mieux est de se mettre une alerte.
Les différentes analyses
- Se connecter sur Hotjar (Sign In)
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 87 connexion à Hotjar](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/connexion.png)
- Cliquer sur Heatmaps dans le menu de gauche
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 88 menu heatmaps](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/menu-heatmaps.png)
Tu retrouves le nom de ta page, sa date de création et le plus important : le nombre de vues sur la page.
- Bouton View Heatmap
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 89 interface heatmaps](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/interface-heatmaps.png)
Note : ne tire pas de conclusions hâtives avec d’avoir un nombre raisonnable de vues sur ta page. Je dirais minimum 50.
Trois outils complémentaires te sont proposés :
- Les zones où tes visiteurs cliquent (click).
- L’analyse de la profondeur de lecture de ta page (move).
- Le parcours de tes lecteurs (scroll).
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 90 les cartes proposées](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/3-options-cartes.png)
Les clics
Tu découvres en premier le nombre de clics enregistrés sur ta page. Par défaut, ce sont la pages vues sur un ordinateur qui s’affichent.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 91 volume de clics](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/volume-clics.png)
Les clics sont matérialisés par des taches de couleurs qui reflètent le nombre. Plus la couleur est chaude plus le volume est important.
Dans ma barre de navigation, les clics sont répartis entre les différentes sections à l’exception de l’inscription à la newsletter qui concentre la grande majorité des clics de cette barre.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 92 visualisation des clics](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/visualisation-clics.png)
Quand tu survoles une zone, le nombre de clics s’affichent.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 93 affichage du volume de clics](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/affichage-volume-clics.png)
Cette analyse est particulièrement utile pour identifier si tes visiteurs visualisent bien les éléments que tu souhaites mettre en avant.
Tu vas affiner en comparant les comportements sur ordinateur et mobile.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 94 appareils utilisés](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/device.png)
N’hésite pas à ajouter des liens de navigation internes comme un sommaire pour identifier ce que recherche tes visiteurs sur ta page.
Le défilement de la page
Ta page est divisée en zones en fonction du % de visiteurs.
Deux explications à la disparition de l’internaute de la page
- Il clique sur un lien vers une autre page
- Il ferme la page (ce que tu redoutes)
Tu recherches en priorité les zones de décrochage massif.
Si tu n’as pas de lien dans une zone qui perd un grand nombre de vues, tu dois remanier au plus vite cette partie ou la supprimer.
J’ai par exemple une fuite de visiteurs en plein dans une explication sur ma page d’accueil au moment où j’explique que je recommande fortement une dépense de 70 € par an. Je comprends que cela ne convienne pas pour ceux qui recherchent du 100 % gratuit.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 95 décrochage des lecteurs](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/09decrochage.png)
Bien que cette partie me desserve, je préfère jouer la franchise dès le départ et ne pas décevoir les lecteurs. Je la conserve en connaissance de cause.
Le parcours des lecteurs (seulement sur ordinateur)
L’outil suit le pointeur de la souris et marque l’endroit ou le lecteur s’arrête. Cela reflète le parcours et identifie les zones les plus lues.
J’aime beaucoup cette analyse car elle me permet de bien visualiser les parties qui concentrent l’intérêt.
C’est assez parlant sur ce paragraphe de texte.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 96 déplacement sur la page](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/move.png)
L’enregistrement des visites
Tu le retrouves dans le menu de gauche > recordings.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 97 menu des enregistrements](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/menu-recordings.png)
Chaque session est enregistrée et tu visualises ce que l’internaute fait en temps réel.
Tu retrouves la nationalité, la page d’entrée et de sortie et la durée de la session.
Cela peut être utile pour voir concrètement ce qui bloque sur un formulaire d’enregistrement. Je ne l’utilise pas.
- Cliquer sur Play
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 98 interface recordings](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/interface-recordings.png)
Les barres dans la zone de lecture matérialisent les défilements.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 99 vidéo des enregistrements](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/recordings.png)
Cas concret
Je me concentre sur les pages stratégiques : ma page d’accueil et celle qui présente la newsletter. J’ai ajouté ma page de la catégorie Construire ton site avant de la remanier.
Page d’accueil
Sur la page d’accueil, je souhaite m’assurer que la navigation est fluide et que les éléments présents retiennent l’attention.
Les clics du menu sont équitablement répartis avec la newsletter qui prédomine.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 100 menu](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/menu-1.png)
Je ne visualise aucun clic sur la vidéo. C’est étrange car elle est visualisée dans Youtube en provenance de mon site et présente uniquement sur cette page. A creuser.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 101 clics sur la vidéo](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/clic-video.png)
La section Que vas-tu trouver enregistre peu de clics et est peut-être redondante avec le menu.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 102 que trouver](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/que-trouver.png)
La recherche sur le site ne comptabilise qu’un seul clic. Je peux envisager de la remonter dans la page.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 103 recherche site](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/recherche-site.png)
Les réseaux sociaux ne rencontrent pas le succès escompté. Cette information ne semble pas correspondre aux attentes des lecteurs.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 104 réseaux sociaux](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/18reseaux-sociaux.png)
Les utilisateurs sur mobile
Je recherche les comportements spécifiques. Les mobinautes cliquent sur le résumé du contenu qui ne contient aucun lien. Je vais immédiatement remédier à cela.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 105 mobile visiteurs](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/mobile-visiteurs.png)
Le menu intermédiaire est utilisé par les mobinautes.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 106 menus intermediaires](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/20menus-intermediaires.png)
L’analyse des mouvements met en avant que la section où je me présente est plus faible. Je dois envisager de la réécrire avec une meilleure accroche.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 107 presentation auteur](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/presentation-auteur.png)
La partie des réseaux sociaux est lue mais ne déclenche pas de clic. Il faudra envisager un appel à l’action spécifique.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 108 vues de la partie réseaux sociaux](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/vues-reseaux-sociaux.png)
Le défilement est régulier.
La page de présentation de la newsletter
Un objectif simple pour cette page : convaincre les visiteurs de s’abonner sur le formulaire en bas de page.
Les zones cliquées correspondent bien aux boutons d’actions et au formulaire.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 109 clics sur la page de présentation de la newsletter](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/newsletter-clics.png)
La page est lue en particulier les arguments sur le contenu de la bibliothèque réservée aux abonnés.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 110 newsletter zones lues](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/newsletter-zones-lues.png)
83% des visiteurs atteignent le formulaire. La page fonctionne.
Les utilisateurs sur mobile
53% des visiteurs arrivent à la zone de formulaire. C’est trop faible.
Hypothèse : la section avec les éléments de la bibliothèque entraine un défilement trop long sur mobile.
Action : je ne peux malheureusement pas masquer une section en version mobile mais j’ai fortement diminué la taille des visuels.
La page de la rubrique Construire ton site
Ma page ne me satisfaisait pas. Je me suis servi d’Hotjar pour auditer la page en vue de sa refonte.
Le biais : 30 vues sont trop faibles pour être parlantes.
Cependant, je ne souhaitais pas attendre 2 mois de plus pour agir. Attendre la perfection empêche d’agir.
De plus, j’avais reçu des retours qui m’indiquaient qu’il était impossible de s’y retrouver.
Certaines sections n’étaient pas du tout lues. Je les ai éliminées.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 111 construire section non lue](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/construire-section.png)
Le sommaire, bien que trop chargé, remplissait son rôle.
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 112 sommaire de construire](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/construire-sommaire.png)
Je n’ai pas encore assez de pages vues sur la nouvelle version pour tirer un enseignement.
Conclusion
L’installation d’Hotjar est un peu longue mais après tu es tranquille.
L’analyse du comportement de tes visiteurs est simplifiée. Tu peux améliorer ton site étape par étape et valider tes modifications.
Les limites de l’outil :
- Les pages ne sont pas toujours intégralement chargées
- L’absence des images freine la compréhension rapide
- Tu dois refaire une nouvelle carte lors de modifications ce qui complique le suivi
- Les barres latérales n’apparaissent pas dans l’analyse
Alternatives :
Sumo propose cette option mais l’outil est affreusement lent et l’affichage approximatif.
Crazy Eggs fournit également des Heatmaps de qualité mais malheureusement l’offre d’essai est limitée dans le temps (maximum trois mois).
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 113 signature de Jean du site pour pas un rond](https://www.pourpasunrond.fr/wp-content/uploads/2019/07/signature-jean-pour-pas-un-rond.png)
Les articles qui peuvent t’intéresser :
- Les meilleurs blogs / podcasts / YouTube à suivre pour ton site et ton activité
- Audite gratuitement tes concurrents sur le web
- Une fiche synthétique pour auditer simplement ton entreprise
Retrouve tous les tutoriels et ressources pour ton entreprise
![Espionne les visiteurs de ton site (pour leur bien) [Tutoriel] 115 portrait jean lochet fondateur pourpasunrond.fr 1](https://www.pourpasunrond.fr/wp-content/uploads/2019/11/portrait-jean-lochet-fondateur-pourpasunrond.fr_-1.png)
Jean
Fondateur, auteur et homme à tout faire
J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.
Bonjour Jean,
Une question me taraude 😉 . L’utilisation de hotjar pour les heatmap ou le recording nécessite t-elle le recueil du consentement des utilisateurs pour le dépôt de cookies ? A priori, les données sont anonymisées mais avec le RGPD je m’y perd totalement ?
Cordialement
Bonjour Anthony,
Comme toute fonctionnalité non nécessaire au bon fonctionnement du site Hotjar nécessite que le cookie soit désactivable et déclaré dans la politique des cookies.
Étant donné que tu ne collectes pas d’information personnelle, tu n’as pas la nécessité d’obtenir l’accord explicite pour le traitement des données.
Magnifique journée,
Jean