DIGITAL SOP 049 : Mise en œuvre et analyse des cartes thermiques sur votre site web

Dernière mise à jour / révision : 02/11/2024

Temps d'exécution : 30 minutes - 1 heure

Objectif : Pour intégrer avec succès les cartes thermiques dans votre stratégie d'analyse.

Résultat idéal : Votre entreprise est désormais en mesure d'enregistrer, de consigner et d'analyser correctement ses cartes thermiques.

Prérequis ou exigences :

Pour suivre pleinement cette SOP, vous devrez configurer Google Tag Manager sur votre site Web. Si Google Tag Manager n'est pas configuré sur votre site Web, vous souhaiterez suivre la procédure décrite dans la SOP 004 (version Internet) pour les sites WordPress, SOP 065 (version Internet) pour les sites Shopify, ou SOP 066 (version Internet) pour les sites Squarespace.

Pourquoi c'est important : L'analyse comportementale à l'intérieur de la page donne à votre équipe des informations visuelles supplémentaires qui ne sont pas facilement collectées ou interprétées à l'aide d'outils d'analyse traditionnels tels que Google Analytics.

Où cela se fait-il ? Dans Google Tag Manager, Hotjar et Google Spreadsheets.

Lorsque cela est fait : Vous créerez une carte thermique chaque fois que vous voudrez en savoir plus sur le comportement de l'utilisateur sur une page ou un ensemble de pages.

Qui fait cela ? La personne responsable de l'analyse ou de l'optimisation des taux de conversion (CRO).

 

Ressources incluses dans cette SOP

Aide-mémoire pour le diagnostic Clickmap et Scrollmap

 Informations sur Scrollmap et Clickmap

Évaluation du besoin d'un outil Clickmap ou Scrollmap

1. Souhaitez-vous analyser des données quantitatives, analyser des métriques spécifiques sur des périodes données ou suivre les événements majeurs sur votre site Web ?
   1. Si oui, un outil comme Google Analytics est plus adapté à votre analyse. Même si dans certains cas, vous pouvez obtenir visuellement des indicateurs similaires grâce à une carte thermique, ce type de résultats est généralement obtenu.
      1. Si vous n'avez pas encore Google Analytics sur votre site Web, vous pouvez le configurer en suivant la SOP 009 (version Internet) pour WordPress ou SOP 067 (version Internet) pour Shopify.
      2. Si vous disposez de Google Analytics mais que vous n'avez pas défini les bons objectifs et événements pour suivre votre entreprise, vous pouvez le faire en suivant la SOP 021 (version Internet).

2. Souhaitez-vous analyser la manière dont vos utilisateurs interagissent au sein d’une page ou d’un sous-ensemble de pages spécifique ?
   1. Si oui, dans certains cas, vous pourrez peut-être le faire avec Google Analytics. Mais la plupart du temps, les données seront beaucoup plus faciles à analyser en regardant visuellement les scrollmaps et les clickmaps.

Décider quelles pages enregistrer

1. Identifiez les pages principales de votre site Web et configurez des cartes thermiques au niveau des pages pour elles. Ce sont les pages que la plupart des utilisateurs parcourront avant d'effectuer l'action que vous souhaitez qu'ils effectuent, par exemple :

• Page d'accueil ;
• Page de destination de génération de leads ;
• Page de tarification ;
• Page de vente ;
• Page de paiement ou étapes de paiement ;

2. Identifiez les pages de support qui fournissent des indices sur ce qui pourrait se passer dans l'esprit de votre utilisateur :

• Exemple :
  • Page FAQ – Si vous utilisez des éléments de style accordéon, vous donnera un aperçu des questions les plus courantes, vous permettant d'améliorer la copie de votre page de destination en voyant visuellement sur quelles questions sont les plus cliquées.
  • Page de sélection de catégorie – Si vous disposez d'une page sur laquelle les utilisateurs cliquent sur des catégories spécifiques de votre site Web, vous pouvez évaluer rapidement et visuellement quelles catégories sont les plus populaires parmi cet ensemble d'utilisateurs.
  • Portfolio – Si vous utilisez un portfolio d'une seule page, vérifiez si les utilisateurs voient vos meilleurs projets, identifiez s'ils essaient de cliquer sur l'un d'entre eux pour identifier les plus intéressants.
  • Page de fonctionnalités – Identifiez les fonctionnalités qui intéressent davantage les utilisateurs.

3. Si vous êtes en train de repenser une page spécifique ou un modèle :

• Créez une carte thermique de l'ancienne version ;
• Créez une carte thermique de la nouvelle version ;

4. Analysez les pages à fort potentiel et peu performantes :

• Volume élevé / Taux de rebond élevé : ouvrez Google Analytics → Dans la barre latérale, cliquez sur « Comportement » → « Contenu du site » → « Toutes les pages » → Trier par « Pages vues uniques » → Identifiez les pages où le taux de rebond est inhabituellement élevé par rapport au autres.

Créer et configurer un compte avec Hotjar

1. Cliquez sur ici et enregistrez votre email.
2. Entrez vos coordonnées, acceptez les conditions d'utilisation et cliquez sur le bouton « Commencer ». Si vous choisissez plutôt de vous inscrire avec votre compte Google, vous serez directement redirigé vers la configuration de Hotjar.

3. Vous serez invité à saisir vos informations personnelles.
4. Entrez votre « Rôle », sélectionnez « Oui » si vous souhaitez utiliser ce compte pour gérer des clients, ou « Non » si cela concerne uniquement votre site Web, le nom de votre organisation, puis cliquez sur « Suivant ».
5. La page suivante vous demandera « Où souhaitez-vous installer Hotjar ? » Entrez l'URL de votre site → Cliquez sur le bouton « Continuer ».

6. Hotjar détectera désormais si Google Tag Manager est installé.

7. À l'étape suivante, sélectionnez « Afficher les plateformes » et sélectionnez Google Tag Manager.

Installer Hotjar à l'aide de Google Tag Manager

1. Après avoir cliqué sur « Google Tag Manager », Hotjar vous redirigera vers votre compte Google afin qu'il puisse accéder à votre compte – cochez les trois et cliquez sur « Continuer ».

2. Accordez à Hotjar l'accès à votre compte Google Tag Manager et cliquez sur « Continuer ».

3. Sélectionnez votre compte GTM et votre conteneur de balises GTM dans la liste déroulante, puis cliquez sur le bouton « Créer et publier une balise ».

4. Cliquez sur le bouton « Confirmer et créer ».

5. L'étape suivante consiste à vérifier votre installation, cliquez simplement sur le bouton. Cette étape peut prendre plus de 60 secondes.

6. Ajoutez votre URL pour vérifier l'installation.

7. Il peut y avoir des retards/des résultats infructueux lors de la vérification, réessayez simplement. Finalement, il vous redirigera vers le tableau de bord Hotjar, ce qui signifie que Google Tag Manager a été intégré avec succès à Hotjar.

Vérifiez la balise Hotjar dans Google Tag Manager

1. Aller à  http://tagmanager.google.com  et connectez-vous avec les détails de votre compte.
2. Sélectionnez le « Nom du conteneur » configuré sur votre site Web.

3. Cliquez sur « Tags » dans la barre latérale gauche de votre espace de travail.

4. Dans vos balises les plus récentes, vous verrez le « Code de suivi AUTO Hotjar » qui a été automatiquement ajouté par Hotjar au cours des étapes précédentes.
   

   

5. [Facultatif] Vous souhaiterez peut-être renommer la balise pour qu'elle corresponde à la convention de dénomination utilisée dans votre compte GTM.
   1. Remarque : Lors de la création de nouvelles balises, il est recommandé de définir une convention de dénomination dès le début. Cela permet de conserver une configuration Google Tag Manager bien organisée et facile à gérer pendant de nombreuses années.[Nom abrégé de l'outil]_[Utiliser pour cette balise] est un bon début.
      1. par exemple : « HJ_TrackingCode »

Configuration et affichage des Heatmaps

1. Une fois que vous avez ajouté votre code de suivi Hotjar. Hotjar enregistrera automatiquement les sessions utilisateur et les cartes thermiques sur votre site. C’est ce qu’on appelle le suivi continu. Vous n'avez plus besoin de configurer des cartes thermiques pour une page individuelle.
2. Pour afficher les cartes thermiques existantes sur votre site. Cliquez sur l'icône « Heatmaps » dans la barre latérale.

3. Il vous dirigera vers la page du tableau de bord Heatmap. Cliquez sur « Nouvelle carte thermique ».

4. Entrez l'URL de votre page pour afficher la carte thermique.

Remarque : Vous ne pourrez afficher les cartes thermiques que sur les pages sur lesquelles le code de suivi Hotjar est installé. La carte thermique peut ne pas être disponible avant 24 heures après l'installation, car elle collecte les sessions utilisateur et génère une carte thermique pour votre site.

5. Vous devriez alors pouvoir voir la carte thermique générée sur votre page.

6. Vous avez ensuite la possibilité de définir différentes règles de page pour afficher différentes cartes thermiques sur votre site.

Exclure le trafic interne de vos cartes thermiques

1. Si vous disposez d'une adresse IP statique, êtes déjà connecté au réseau que vous souhaitez exclure de vos heatmaps (ex : votre réseau de bureau) et n'utilisez pas de VPN, passez à « Exclusion d'une adresse IP d'un réseau »

2. Si vous n'êtes pas sûr de l'un de ces éléments : passez à « Exclusion d'une adresse IP d'un réseau »

À l'exclusion de votre adresse IP actuelle :

1. Sur votre navigateur allez sur  https://insights.hotjar.com/settings/ip
2. Faites défiler jusqu'à « Blocage IP » et cliquez sur « Bloquer votre IP actuelle »

Ensuite, « Enregistrer les modifications ».

Exclure une adresse IP d'un réseau :

1. Identifiez les adresses IP que vous souhaitez exclure :

1. Option 1 : Demandez à la personne responsable du réseau de votre bureau ou à votre FAI (Fournisseur d'Accès Internet) :
   1. L'adresse IP de notre réseau est-elle statique ? Si votre adresse IP n’est pas statique, l’exclure de vos Heatmaps ne sera pas une solution à long terme.
   2. Quelle est notre adresse IP externe ? C'est l'adresse IP dont vous avez besoin. Prenez-en note.

2. Option 2 : Vérifiez-le vous-même (ou envoyez ces instructions à une personne dont vous souhaitez exclure le réseau, comme le réseau domestique d'un employé s'il travaille à distance) :

Remarque : assurez-vous que vous n'utilisez pas de VPN. Si vous n'êtes pas sûr, ignorez et demandez à la personne responsable de l'informatique dans votre organisation. Si vous utilisez votre ordinateur personnel (ou si vous connaissez parfaitement le logiciel installé sur votre ordinateur) et que vous n'avez installé aucun logiciel VPN, suivez cette méthode.

1. Connectez-vous à votre réseau local. (Habituellement, il vous suffit d'être connecté au Wi-Fi du réseau que vous souhaitez exclure)
2. Aller à  http://beta.speedtest.net/
3. Localisez votre adresse IP sur la page :

4. Appelez votre FAI et demandez-lui si l'adresse IP de votre réseau est statique.
   1. Remarque : Si vous souhaitez exclure votre adresse IP locale, l'adresse IP de votre bureau doit être statique.

2. Sur votre navigateur allez sur  https://insights.hotjar.com/settings/ip
3. Entrez un nom interne pour cette adresse IP
   1. Exemple : « La maison de Tommy »

4. Cliquez sur « Enregistrer les modifications ».

5. C'est ça! Répétez maintenant cette procédure pour tous les réseaux que vous ou vos collaborateurs pouvez utiliser pour accéder à votre site Internet.

Exemple : votre réseau de bureau, votre réseau domestique, les réseaux domestiques de vos collaborateurs, etc.

Analysez vos enregistrements

1. Connectez-vous à votre tableau de bord.
2. Dans la barre latérale, cliquez sur « Enregistrements ».

3. Ouvrir le  Aide-mémoire pour le diagnostic Clickmap et Scrollmap  .
4. Parcourez chacun des « indicateurs » et identifiez ceux qui s’appliquent à votre carte thermique.
5. Enregistrez les résultats de vos enregistrements en suivant les étapes du chapitre suivant.

Enregistrez les résultats de vos enregistrements

Important : assurez-vous qu'aucune modification n'a été apportée aux pages qui collectent des données entre la date « Début » et la date « Fin » de vos cartes thermiques.

1. Exemple : si votre page d'accueil comporte plusieurs CTA et que vous les modifiez fréquemment chaque jour. Si les données des cartes thermiques et des cartes de défilement sont collectées sur un mois entier, vos données ne seront pas significatives puisque la page cible a changé plusieurs fois pendant la collecte des cartes de clics.

1. Ouvrir le  Feuille de calcul Scrollmap et Clickmap Insights  .
2. Remplissez chaque cellule :
   1. Date de début : date à laquelle vous avez commencé à collecter des données.
   2. Date de fin : date à laquelle votre carte thermique a cessé de collecter des données (soit parce que vous l'avez arrêtée, soit parce qu'elle a atteint le nombre de pages vues configuré).
   3. Segment : si vous enregistrez uniquement un segment spécifique de votre trafic (par exemple, vous collectez uniquement des données sur le trafic Facebook), saisissez-le ici.
   4. Page analysée : l'URL de la page ou du groupe de pages en cours d'enregistrement.
   5. Niveau : sélectionnez « Page » si vous enregistrez une seule page spécifique. Sélectionnez « Modèle » si vous n'évaluez pas le contenu d'une page spécifique mais plutôt un modèle.
   6. Raisons de l'enregistrement : S'il y a une raison spécifique pour laquelle vous pensez devoir analyser cette page, saisissez-la ici. En règle générale, vous devriez avoir une raison à cela. Par exemple : vous devrez peut-être placer un autre bouton CTA au milieu de la page si vous constatez que les utilisateurs ne font souvent pas défiler vers le bas de votre page de destination.
   7. Page d'origine : enregistrez une capture d'écran de votre page d'origine et téléchargez cette image sur un service de stockage cloud comme Google Drive pour obtenir un lien partageable.
      1. Si vous ne disposez d'aucun moyen pour créer cette capture d'écran et que vous utilisez Google Chrome, "Superbe capture d'écran' est un bon outil qui offre cette fonctionnalité gratuitement.
         8. Scrollmap et Clickmap :
            1. Connectez-vous à votre  tableau de bord  .
            2. Dans la barre latérale, cliquez sur « Enregistrements »

3. Sélectionnez vos enregistrements et cliquez sur « Exporter.

4. Enregistrez les fichiers Téléchargez ces images sur un service de stockage cloud comme Google Drive et obtenez un lien partageable. (En dehors du champ d'application de cette SOP)

9. Commentaires sur les résultats : c'est ici que vous devez résumer vos conclusions en fonction des  Aide-mémoire pour le diagnostic Clickmap et Scrollmap  .
   1. Par exemple : « Possibilité d'éléments cliquables trompeurs. Les utilisateurs cliquent sur les images au lieu du bouton CTA.

10. Hypothèse : c'est ici que vous proposez une raison possible pour les résultats que vous venez d'enregistrer.
    1. Par exemple : « Nos bordures d’images les font ressembler à des éléments cliquables. »

11. Étape suivante : sur la base de votre hypothèse, vous saisissez une solution possible à ce problème :
    1. Par exemple : « Nous devrions essayer de supprimer les bordures de l’image et mieux mettre en valeur notre CTA. »

C'est ça! Vous êtes maintenant prêt à mettre en œuvre toutes les modifications apportées aux pages et à enregistrer et enregistrer à nouveau votre trafic, jusqu'à ce que vous obteniez le comportement souhaité de vos utilisateurs.