comportement visiteurs site hotjar gratuit

Hotjar : Comment savoir le comportement des visiteurs de votre site web !

Publié par Soufiane

Dernière mise à jour : 22 août 2021

Voulez-vous savoir comment vos visiteurs utilisent votre site web ? Comme si vous êtes assis à côté d'eux ?

Comme vous le savez, la création d'un site web est devenu la chose la plus facile au Monde mais pas tout le monde y réussit !

Pourquoi ?
Vous allez me dire...

La plupart des webmasters oublient une partie très importante dans la création de leurs sites, les tests !

Hotjar.com permet aux créateurs de sites d'analyser et afficher le comportement des visiteurs en toute facilité et sécurité, à l'aide d'une interface intuitive et gratuite.

Avec un compte gratuit, vous aurez la possibilité de créer trois "Heatmaps" et enregistrer les mouvements/clics de 300 visiteurs, vous pouvez les supprimer ou passer à un compte PRO pour bénéficier davantage d'enregistrement.

Vous allez découvrir dans ce tutoriel comment j'ai fait pour analyser une partie des visiteurs de Easytutoriel.com =)

Allons-y !

Connaître de près ses visiteurs avec hotjar

1. Inscription et préparation de hotjar

Pour s'inscrire ouvrez cette page : www.easytutoriel.com/hotjar.com (lien d'affiliation ^_^ , pour savoir le nombre d'inscrits via Easytutoriel.com)

Cliquez sur "SIGN IN" en haut de la page, pour ouvrir la page d'inscription.

Mettez les informations suivantes :

  • FULL NAME : Votre nom complet (vous pouvez utiliser un nom qui n'est pas le vôtre...)
  • EMAIL : Adresse E-mail (mettez un Email valide pour pouvoir réinitialiser le mot de passe)
  • PASSWORD : Mot de passe.
  • ROLE : Travail ou rôle professionnel.

Puis cliquez sur la validation reCaptcha et "Continue" pour passer à la deuxième étape d'inscription hotjar.

1 hotjar inscription

Dans la deuxième étape mettez les informations suivantes :

  • ORGANIZATION : Nom de votre site/entreprise
  • WEBSITE : URL de votre site (attention au protocole, si votre site est en https mettez https)
  • COUNTRY : Pays de résidence
  • I accept the Terms & Conditions of use : Acceptation des conditions d'utilisation

Puis cliquez sur "Create Account".

2 hotjar inscription 2

2. Installation du <script> sur votre site

Sur le tableau de bord de votre site "Site Dashboard" vous aurez le code Javascript que vous devez recopier sur les pages de votre site.

Recopiez le code et mettez-le avant </head> !

3 hotjar code tracking

Si vous utilisez WordPress.org comme CMS, modifiez le fichier header.php de votre thème wp-content/themes/MON_THEME/header.php et ajoutez le code juste avant </head>.

4 hotjar header head wordpress code

Vous pouvez tout de même modifier le fichier via le tableau de bord de votre site WordPress via "Apparence" > "Éditeur".

3. Accéder aux statistiques hotjar

Normalement juste après la création de votre compte hotjar on va vous proposer la création d'un "Heatmap" pour connaître les zones les plus cliqués sur votre site et un "Recording" permettant d'enregistrer le mouvement de souris d'un échantillon de visiteurs.

Si cela n'est pas encore fait, voici comment procéder :

Savoir les zones chaudes et froides avec les Heatmaps

Sur la page des "Heatmaps" cliquez sur "New Heatmap" pour créer un nouvel Heatmap et découvrir les emplacements les plus visités sur votre site.

5 hotjar ajouter heatmap

Mettez sur "NAME" un nom pour la Heatmap et choisissez dans "PAGE URL" le lien de la page que vous voulez analyser ou mettez "Starts with" pour analyser la totalité des pages de votre site.

Cliquez sur "Create Heatmap" pour la créer et attendez quelques minutes pour pouvoir accéder aux résultats en temps réel.

6 hotjar heatmap nom url creation

L'icône en vert à gauche marquant le statut actuel de la Heatmap a comme valeur "Collecting data..." (en français collection de données) ; il faut donc attendre ou l'oublier pour une demi-journée pour avoir des informations pertinentes.

7 hotjar collection donnees

Après un certain temps vous aurez ce résultat, les zones en couleurs sont les emplacement qui ont enregistré le plus grand nombre de [mouvements/clics/scroll] du rouge vers le bleu selon le taux d'activités.

13 hotjar heatmap affichage

Regarder des exemplaires de visiteurs

Voici un exemple d'un enregistrement d'un visiteur du site, attention à ne pas partager l'adresse IP et les informations relatifs aux visiteurs sans leur accords.

Comme vous pouvez le voir, vous pouvez voir que ce lecteur utilise la souris à l'endroit du texte de l'article, sur d'autres enregistrements j'ai trouvé d'autres résultats, certains s'inscrivent à la Newsletter à droite, certains publient des commentaires...

enregistrement hotjar easytutoriel animation

Cette technologie permet de savoir le comportement d'une petite partie de ses visiteurs mais ça vaut vraiment le coup !

Pour commencer l'enregistrement allez sur "Recordings" puis cliquez sur "Record Visitors".

8 hotjar enregistrements

Pour un compte gratuit vous avez droit à "100 enregistrements" que vous pouvez d'ailleurs supprimer et relancer à nouveau =)

Cliquez sur "Start Recording" pour commencer l'enregistrement.

9 hotjar commencer enregistrement

Après quelques minutes, j'ai reçu 22 enregistrements sur 100.

10 hotjar enregistrements complets

Pour ouvrir un enregistrement cliquez sur "Play".

11 hotjar play enregistrement

Vous pouvez augmenter la vitesse de l'enregistrement, ignorer les pauses avec "Skip Pauses".

Voici les détails de l'interface permettant de lire l'enregistrement :

12 hotjar enregistrement

 

Et voilà !

Vous venez de découvrir comment savoir plus sur vos visiteurs =)

Et vous ? Quelles sont les méthodes que vous utilisez pour savoir plus sur vos visiteurs ?

Si vous avez des questions n'hésitez pas à laisser vos commentaires ;)

Au prochain tutoriel, mettez un commentaire !

Soufiane - Easytutoriel.com


Ceux qui ont aimé cet article ont également apprécié ceux-là :


L'auteur : Soufiane

Soufiane est un jeune informaticien et spécialiste en web-design, connait pas mal de choses du monde informatique. Ce passionné aime aider les gens à innover et à en savoir plus du monde informatique...

Soyez le premier à ajouter un commentaire !

Publier un commentaire :

xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)