Espionne les visiteurs de ton site (pour leur bien) [Tutoriel]

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.

exemple d'heatmap

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.

picto articles intermediaires

Intermédiaire

S’enregistrer sur Hotjar

hotjar accueil

  • Cliquer sur Pricing
  • Onglet Personnel
  • Bouton Start Now de l’offre Basic

hotjar souscription

  • Compléter son nom et son adresse e-mail
  • Bouton Let’s Get started

souscription nom et e-mail

  • Créer un mot de passe
  • Cocher I accept the Terms of service
  • Bouton Next

création du mot de passe

  • 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

formulaire métier

  • 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

enregistrement de ton site

  • Bouton + Create Heatmap

configure heatmap

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

installe feedback

  • 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

inviter des collaborateurs

Tu arrives (enfin) sur l’interface d’Hotjar.

  • Cliquer sur Exit

quitter l'installation

  • Copier l’identifiant de ton site

copie de l'identifiant

Ne ferme pas cette page

Connecte Hotjar avec ton site

Dans WordPress

  • Chercher WP Hotjar dans les extensions
  • Activer et Installer

wp hotjar installer

  • Rechercher Hotjar dans le menu de gauche

wp hotjar dans le menu

  • Coller ton Identifiant
  • Bouton Enregistrer les modifications
  • Cliquer sur Vider le cache si tu as un outil de gestion de cache

renseigne identifiant

De retour dans Hotjar

  • Bouton I have installed the tracking code

Vérification de l'installation du tracking

  • Bouton Verify installation

vérification du tracking suite

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

ajput d'une nouvelle heatmap

  • Nommer la page suivie. Par exemple : Inscription à la newsletter
  • Bouton Next

nommer la page

  • Bouton Next

passer cette section

  • Compléter l’URL de la page à suivre
  • Bouton Next

url de la page

  • Bouton Create Heatmap

validation finale

Tu retrouves en dessous l’ensemble des heatmaps créées.

liste des heatmaps actives

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

emplacement de la collecte du feedback

2) Steps

  • Personnaliser le Message de remerciement
  • Décocher Ask respondents…

personnalisation du message de remerciements

5) Actions

  • Bouton Save

sauvegarde

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)

connexion à Hotjar

  • Cliquer sur Heatmaps dans le menu de gauche

menu heatmaps

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

interface heatmaps

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

les cartes proposées

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.

volume de clics

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.

visualisation des clics

Quand tu survoles une zone, le nombre de clics s’affichent.

affichage du volume de clics

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.

appareils utilisés

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.

décrochage des lecteurs

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.

déplacement sur la page

L’enregistrement des visites

Tu le retrouves dans le menu de gauche > recordings.

menu des enregistrements

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

interface recordings

Les barres dans la zone de lecture matérialisent les défilements.

vidéo des enregistrements

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.

menu

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.

clics sur la vidéo

La section Que vas-tu trouver enregistre peu de clics et est peut-être redondante avec le menu.

que trouver

La recherche sur le site ne comptabilise qu’un seul clic. Je peux envisager de la remonter dans la page.

recherche site

Les réseaux sociaux ne rencontrent pas le succès escompté. Cette information ne semble pas correspondre aux attentes des lecteurs.

réseaux sociaux

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.

mobile visiteurs

Le menu intermédiaire est utilisé par les mobinautes.

menus intermediaires

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.

La partie des réseaux sociaux est lue mais ne déclenche pas de clic. Il faudra envisager un appel à l’action spécifique.

vues de la partie réseaux sociaux

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.

clics sur la page de présentation de la newsletter

La page est lue en particulier les arguments sur le contenu de la bibliothèque réservée aux abonnés.

newsletter zones lues

 

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.

construire section non lue

Le sommaire, bien que trop chargé, remplissait son rôle.

sommaire de construire

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
Visualise le parcours des utilisateurs de ton site pour améliorer l'expérience utilisateurs.

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

Les articles qui peuvent t’intéresser :

Retrouve tous les tutoriels pour Attirer des visiteurs sur ton site

bannière pour l'inscription à la newsletter

Que font tes visiteurs sur ton site ? Découvre ce qui fonctionne et ce que tu dois améliorer. #site #blog #wordpress

Résumé
Que font exactement tes visiteurs sur ton site ? [Tuto]
Article
Que font exactement tes visiteurs sur ton site ? [Tuto]
Description
Visualise simplement avec Hotjar les actions de tes visiteurs sur les pages de ton site à l'aide de cartes de chaleur (heatmaps) [Tuto]
Auteur
Publié par
pour pas un rond
Logo

Laisser un commentaire

You have to agree to the comment policy.