Este artículo identifica y ofrece algunas soluciones para los resultados inesperados, en blanco, rotos y cortados de las capturas de pantalla del mapa térmico. Si necesita ayuda para solucionar el problema de los datos térmicos colocados en la parte superior de la captura de pantalla, consulte nuestro artículo Solución de problemas de datos del mapa térmico.
Haga clic en la captura de pantalla que describa mejor lo que está viendo:
Mi captura de pantalla no tiene ningún estilo o CSS aplicado, con imágenes e iconos más grandes de lo esperado.
Artículos mencionados en el vídeo: Hotjar IPs y Cómo retomar una captura de pantalla Heatmap
La falta de CSS o imágenes e iconos SVG que son más grandes de lo esperado típicamente significa que el servidor de su sitio está bloqueando el acceso de Hotjar a los archivos CSS.
Las razones por las que su sitio puede estar bloqueando el acceso de Hotjar a CSS incluyen:
- El acceso está limitado a direcciones IP específicas
- El bloqueo se basa en el dominio/referente
- El acceso está restringido en función de la geolocalización (es decir, no es posible acceder a los activos desde Irlanda)
- Bloqueo basado en la falta de cookies/sessionStorage
- Bloqueo basado en la protección por contraseña, impidiendo que se acceda a los activos directamente a través de su URL, o bloqueando peticiones a endpoints específicos
Solución:
En la mayoría de los casos, hacer las concesiones que se indican a continuación puede solucionar los problemas relacionados con el bloqueo de dominios/referentes e IP. Tras realizar estos cambios, la actualización de la captura de pantalla debería resolver el problema.
-
Permitir el dominio/referente https://insights.hotjar.com
Sugerimos permitir los dominios *.hotjar.com especialmente para aplicar CSS a Heatmaps.
-
Permitir las direcciones IP de Hotjar
Todos nuestros servidores están alojados en Amazon AWS eu-west-1 en Irlanda y acceden a las hojas de estilo a través de HTTPS. A continuación se muestra una lista de las IPs que Hotjar utiliza para enviar egress, el tráfico saliente de la que se puede permitir si es necesario en su extremo.
18.203.61.76 18.203.176.135 52.17.197.221Las IPs listadas arriba no cubren el dominio real
El dominio real es https://insights.hotjar.com. Esto se debe a que es servido por nuestro proveedor de CDN. Sugerimos permitir los dominios *.hotjar.com especialmente para aplicar CSS a Heatmaps.
Si utilizas una Red de Entrega de Contenido (CDN), un Firewall de Aplicaciones Web (WAF), o cualquier otro servicio que se sitúe entre tu servidor y el resto de la web, entonces puede que necesites hacer los cambios dentro de esos servicios así como en el servidor.
-
Permitir los User-Agents de Hotjar
Algunos CDNs o WAFs no permiten el acceso basado en la dirección IP pero pueden permitir el acceso basado en el User-Agent.
teléfono': ( 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_2 como Mac OS X) AppleWebKit/605.1.15 (KHTML, como 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, como 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, como Gecko) ' 'Hotjar Chrome/97.0.4692.71 Safari/537.36' )
Mi captura de pantalla está cortada por abajo, tiene un tamaño incorrecto o está distorsionada
Cuando la captura de pantalla se corta, tiene un tamaño incorrecto o aparece distorsionada, esto puede ocurrir cuando la funcionalidad estándar de desplazamiento de la página está personalizada en el código de tu sitio.
A continuación se indican algunas posibles causas y soluciones para este problema:
-
La página tiene una altura superior a 15.000 píxeles
Cuando tomamos inicialmente una captura de pantalla de una página, Hotjar la renderiza a un máximo de 15.000 píxeles de altura. Las páginas más largas que esto serán recortadas a este punto.
Sin embargo, utilizando el botón Haga una nueva captura de pantalla de esta página usted mismo>. le permitirá capturar la página completa en la mayoría de los casos.
Consulte nuestro artículo Limitaciones de los mapas térmicos para obtener una lista de lo que los mapas térmicos no pueden capturar.
-
El desplazamiento de la página no se produce en el elemento del documento
Si su página no se desplaza en el elemento del documento o utiliza un bloqueo de desplazamiento para desplazar la página, Hotjar no podrá capturar una pantalla completa de la página, y puede aparecer cortada. Esto se debe a que nuestro proceso de captura de pantalla necesita determinar la longitud del documento. Si ve una captura de pantalla cortada, podría deberse a que el desplazamiento de su página se produce en un contenedor
, que nuestra herramienta Heatmaps no admite.Consulte nuestro artículo Limitaciones de Heatmaps para obtener una lista de lo que Heatmaps no puede capturar.
El ancho de la página se está configurando con JavaScript
Hotjar captura una pantalla con los siguientes anchos de dispositivo:
- ordenador: 1280px
- Tableta 800px
- Teléfono 380px
Las capturas de pantalla pueden verse afectadas si se utiliza JavaScript para establecer una anchura fija cuando cambia el tamaño del navegador. Si un usuario visita una página de su sitio con una anchura de navegador fija aplicada, la captura de pantalla de esa página puede no aparecer correctamente, ya que no tendrá la anchura requerida que utiliza la herramienta de captura de pantalla Hotjar.
Posible solución:
En algunos casos, puede solucionar esto actualizando la captura de pantalla. Consulte nuestro artículo Cómo actualizar una captura de pantalla de mapa de calor para obtener una guía paso a paso sobre cómo hacerlo.
La altura de la página se ha establecido con JavaScript
Su página puede tener algunos elementos que son 100% de la altura del navegador, establecido mediante JavaScript. Hotjar toma capturas de pantalla de la página en una única ventana grande, y este tipo de elementos pueden seguir agrandándose, dando lugar a una captura de pantalla inesperada.
Posible solución:
La solución puede requerir la ayuda de su equipo de desarrollo. A veces puede resolverse estableciendo un valor máximo para el cálculo de la altura. Puede ser un valor de su elección, hasta 1200.
viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight; // - o - // if (viewportHeight > 1200) { viewportHeight = 1200; }Las unidades VH se utilizan para el tamaño del texto en la página
Cuando las imágenes y el texto de una captura de pantalla aparecen distorsionados, esto puede deberse a que se está utilizando una unidad vh para el tamaño del texto dentro del estilo CSS del elemento. Actualmente, las capturas de pantalla de Heatmap no admiten este método de uso de vh.
Posible solución:
En algunos casos, puede solucionarlo actualizando la captura de pantalla. Consulte nuestro artículo Cómo actualizar una captura de pantalla de Heatmap para obtener una guía paso a paso sobre cómo hacerlo.
En mi captura de pantalla faltan elementos o todo es blanco/negro
Esto suele ocurrir cuando el contenido dinámico de la página se carga en eventos como desplazarse, pasar el ratón o hacer clic. También puede ocurrir cuando las imágenes de la página están configuradas para cargarse con retraso, por ejemplo para aumentar la velocidad de carga del sitio.
Posible solución:
Este problema puede solucionarse en algunos casos tomando una nueva captura de pantalla utilizando nuestra herramienta de actualización de capturas de pantalla. Con esta herramienta usted tiene la oportunidad de cargar su sitio en una nueva ventana, permitir que cualquier contenido dinámico se cargue, y luego capturar una nueva pantalla. Consulte nuestro artículo Cómo actualizar una captura de pantalla de mapa de calor para obtener una guía paso a paso sobre cómo hacerlo.
Mi captura de pantalla de ordenador muestra elementos de un dispositivo móvil
Es posible que te encuentres con un problema en el que las capturas de pantalla de tu sitio de ordenador tengan elementos del sitio móvil, como el menú de navegación. Esto también puede ocurrir al revés, con elementos de ordenador en la captura de pantalla móvil.
Esto puede ocurrir debido a reglas CSS en tu página donde el sitio de ordenador no está configurado para mostrarse a partir de 1280px. También puede ocurrir cuando los elementos se ocultan/mostran usando min-device-width y max-device-width.Posible solución:
No todos los navegadores web reconocen min-device-width y max-device-width, lo que puede solucionarse sustituyéndolos por min-width y max-width. Encontrarás más detalles sobre las diferencias entre ambos en un post de Menucool titulado max-device-width vs max-width? ¿Cuál debo usar?