Dépannage de capture d'écran de carte de chaleur

Cet article identifie et propose des solutions pour les résultats inattendus, vides, cassés et tronqués des captures d'écran de la carte thermique. Si vous cherchez de l'aide pour résoudre les problèmes de données de chaleur superposées à la capture d'écran, consultez notre article sur le Dépannage des données de la carte thermique.

Cliquez sur le problème de capture d'écran ci-dessous qui décrit le mieux ce que vous voyez :

Ma capture d'écran n'a pas de style ou de CSS appliqué, avec des images et des icônes plus grandes que prévu

Articles mentionnés dans la vidéo : Adresses IP Hotjaret Comment refaire une capture d'écran de carte thermique

Le manque de CSS ou d'images et d'icônes SVG plus grandes que prévu signifie généralement que le serveur de votre site bloque Hotjar d'accéder aux fichiers CSS.

Les raisons pour lesquelles votre site peut bloquer Hotjar d'accéder au CSS incluent :

• L'accès est limité à des adresses IP spécifiques
• Le blocage se produit en fonction du domaine/référent
• L'accès est restreint en fonction de la géolocalisation (c'est-à-dire qu'il n'est pas possible d'accéder aux ressources depuis l'Irlande)
• Le blocage est basé sur l'absence de cookie/sessionStorage
• Le blocage est basé sur la protection par mot de passe, empêchant l'accès aux ressources directement via leur URL, ou bloquant les requêtes vers des points d'extrémité spécifiques

Solution :

Dans la plupart des cas, apporter les modifications répertoriées ci-dessous peut résoudre les problèmes liés au blocage de domaine/référent et d'IP. Après avoir apporté ces modifications, mettre à jour votre capture d'écran devrait résoudre le problème.

• Autoriser le domaine/référent https://insights.hotjar.com

  Nous vous suggérons d'autoriser les domaines *.hotjar.com en particulier pour appliquer les CSS aux Heatmaps.

• Autoriser les adresses IP de Hotjar

  Tous nos serveurs sont hébergés sur Amazon AWS eu-west-1 en Irlande et accèdent aux feuilles de style via HTTPS. Ci-dessous se trouve une liste des IPs utilisées par Hotjar pour envoyer du trafic sortant, que vous pouvez autoriser si nécessaire de votre côté.

  18.203.61.76
  18.203.176.135
  52.17.197.221

  Les IPs listées ci-dessus ne couvrent pas le domaine réel

  Le domaine réel est https://insights.hotjar.com. Cela est dû au fait qu'il est servi par notre fournisseur de CDN. Nous vous suggérons d'autoriser les domaines *.hotjar.com en particulier pour appliquer les CSS aux Heatmaps.

  Si vous utilisez un Réseau de diffusion de contenu (CDN), un pare-feu d'application Web (WAF), ou tout autre service intermédiaire entre votre serveur et le reste du web, vous devrez peut-être apporter les modifications nécessaires à ces services ainsi qu'au serveur.

• Autoriser les User-Agents de Hotjar

  Certains CDN ou WAF ne vous permettent pas d'autoriser l'accès en fonction de l'adresse IP mais peuvent vous permettre d'autoriser l'accès en fonction de l'User-Agent.

  'phone': (
          'Mozilla/5.0 (iPhone; CPU iPhone OS 15_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) '
          'Hotjar Version/15.2 Mobile/15E148 Safari/604.1'
      ),
  'tablet': (
          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) '
          'Hotjar Version/15.2 Safari/605.1.15'
      ),
  'desktop': (
          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) '
          'Hotjar Chrome/97.0.4692.71 Safari/537.36'
      )

Retour en haut

Ma capture d'écran est coupée en bas, a la mauvaise taille ou est déformée

Lorsque votre capture d'écran est coupée, que la taille est incorrecte ou qu'elle est déformée, cela peut se produire lorsque la fonctionnalité standard de défilement de la page est personnalisée dans le code de votre site.

Voici quelques causes possibles et solutions à ce problème :

• La page a une hauteur supérieure à 15 000 pixels

  Lorsque nous prenons initialement une capture d'écran d'une page, Hotjar la rend à un maximum de 15 000 pixels de hauteur. Les pages plus longues que cela seront rognées à ce point.

  Cependant, en utilisant l'option de prendre une nouvelle capture d'écran de cette page vous-même, vous pourrez capturer la page entière dans la plupart des cas.

  Consultez notre article sur les Limitations des Heatmaps pour une liste de ce que les Heatmaps ne peuvent pas capturer.

• Le défilement de la page ne se produit pas sur l'élément document

  Si votre page ne défile pas sur l'élément document ou utilise un verrouillage de défilement pour faire défiler la page, Hotjar ne pourra pas capturer une capture d'écran complète de la page, et elle peut sembler coupée. Cela est dû au fait que notre processus de capture d'écran a besoin de déterminer la longueur du document. Si vous voyez une capture d'écran tronquée, cela pourrait être dû au fait que le défilement de votre page se fait sur un conteneur <div>, que notre outil Heatmaps ne prend pas en charge.

  Consultez notre article sur les Limitations des Heatmaps pour une liste de ce que les Heatmaps ne peuvent pas capturer.

• La largeur de la page est définie avec JavaScript

  Hotjar capture une capture d'écran aux largeurs d'appareil suivantes :

  • Ordinateur de bureau : 1500px
  • Tablette : 800px
  • Téléphone : 380px

  Les captures d'écran peuvent être affectées si JavaScript est utilisé pour définir une largeur fixe lorsque la taille du navigateur change. Si un utilisateur visite une page sur votre site avec une largeur de navigateur fixe appliquée, la capture d'écran de cette page peut ne pas apparaître correctement car elle ne sera pas la largeur requise par l'outil de capture d'écran Hotjar.

  Solution possible :

  Dans certains cas, vous pouvez résoudre ce problème en mettant à jour la capture d'écran. Consultez notre article sur Comment mettre à jour une capture d'écran Heatmap pour un guide étape par étape sur la façon de le faire.

• La hauteur de la page a été définie avec JavaScript

  Votre page peut comporter des éléments qui occupent 100 % de la hauteur du navigateur, définis à l'aide de JavaScript. Hotjar prend des captures d'écran de page dans une seule grande fenêtre, et ces types d'éléments peuvent continuer à s'agrandir, ce qui entraîne une capture d'écran inattendue.

  Solution possible :

  Une solution peut nécessiter l'aide de votre équipe de développement. Il est parfois possible de résoudre ce problème en définissant une valeur maximale pour le calcul de la hauteur. Cela peut être une valeur de votre choix, jusqu'à 1200.

  
  viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight;
  // - ou - //
  if (viewportHeight > 1200) {
  	viewportHeight = 1200;
  }
  

• Les unités VH sont utilisées pour la taille du texte sur la page

  Lorsque les images et le texte dans une capture d'écran sont déformés, cela peut être dû à l'utilisation d'une unité vh pour la taille du texte dans le style CSS de l'élément. Les captures d'écran des Heatmaps ne prennent pas en charge actuellement cette méthode d'utilisation de vh.

  Solution possible :

  Dans certains cas, vous pouvez résoudre ce problème en mettant à jour la capture d'écran. Consultez notre article sur Comment mettre à jour une capture d'écran Heatmap pour un guide étape par étape sur la façon de le faire.

Retour en haut

Ma capture d'écran comporte des éléments manquants ou apparaît entièrement blanc/noir

Cela se produit généralement lorsque du contenu dynamique sur la page se charge lors d'événements tels que le défilement, le survol ou le clic. Cela peut également se produire lorsque les images de votre page sont configurées pour se charger avec un délai, par exemple pour augmenter la vitesse de chargement de votre site.

Solution possible :

Ce problème peut être résolu dans certains cas en prenant une nouvelle capture d'écran à l'aide de notre outil de mise à jour des captures d'écran. Avec cet outil, vous avez la possibilité de charger votre site dans une nouvelle fenêtre, de permettre à tout contenu dynamique de se charger, puis de capturer une nouvelle capture d'écran. Consultez notre article Comment mettre à jour une capture d'écran de heatmap pour un guide étape par étape sur la façon de procéder.

Retour en haut

Ma capture d'écran sur ordinateur affiche des éléments pour un appareil mobile

Vous pourriez rencontrer un problème où les captures d'écran de votre site sur ordinateur contiennent des éléments du site mobile, tels que le menu de navigation. Cela peut également se produire dans l'autre sens, avec des éléments de bureau dans la capture d'écran mobile.
Cela peut se produire en raison des règles CSS sur votre page où le site sur ordinateur n'est pas configuré pour être affiché à partir de 1280px. Cela peut également se produire lorsque des éléments sont masqués/affichés en utilisant min-device-width et max-device-width.

Solution possible :

Tous les navigateurs Web ne reconnaissent pas min-device-width et max-device-width, ce qui peut être corrigé en les remplaçant par min-width et max-width. Vous trouverez plus de détails sur les différences entre ces éléments dans un article sur Menucool intitulé max-device-width vs max-width ? Lequel dois-je utiliser ?

Retour en haut