Este artículo identifica y ofrece algunas soluciones para resultados inesperados, en blanco, rotos y recortados en capturas de pantalla de mapas de calor. Si estás buscando ayuda para solucionar problemas con los datos de calor colocados encima de la captura de pantalla, consulta nuestro artículo de Solución de problemas de datos de mapas de calor.
Haz clic en el problema de la captura de pantalla que más se ajuste a lo que estás viendo:
Mi captura de pantalla no tiene estilos ni CSS aplicados, con imágenes e iconos más grandes de lo esperado
Artículos mencionados en el video: IPs de Hotjar y Cómo volver a tomar una captura de pantalla de mapa de calor
La falta de CSS o imágenes e iconos SVG más grandes de lo esperado generalmente significa que el servidor de tu sitio está bloqueando el acceso de Hotjar a los archivos CSS.
Las razones por las que tu sitio puede estar bloqueando el acceso de Hotjar al CSS incluyen:
- El acceso está limitado a direcciones IP específicas
- El bloqueo se produce en función del dominio/referente
- El acceso está restringido en función de la geolocalización (es decir, no es posible acceder a los activos desde Irlanda)
- El bloqueo se basa en la falta de cookie/sessionStorage
- El bloqueo se basa en la protección con contraseña, lo que impide el acceso directo a los activos a través de su URL o bloquea las solicitudes a puntos finales específicos
Solución:
En la mayoría de los casos, realizar las siguientes configuraciones puede solucionar los problemas relacionados con el bloqueo de dominio/referencia y de IP. Después de realizar estos cambios, actualizar tu captura de pantalla debería resolver el problema.
-
Permite el dominio/referencia https://insights.hotjar.com
Sugerimos permitir los dominios *.hotjar.com, especialmente para aplicar CSS a los mapas de calor.
-
Permite 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 tráfico de salida, las cuales puedes permitir si es necesario en tu extremo.
18.203.61.76 18.203.176.135 52.17.197.221Las IPs mencionadas anteriormente 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 los mapas de calor.
Si utilizas una Red de Entrega de Contenidos (CDN), un Cortafuegos de Aplicaciones Web (WAF) u otro servicio que se encuentre entre tu servidor y el resto de la web, es posible que también necesites realizar los cambios en esos servicios, además del servidor.
-
Permite los User-Agents de Hotjar
Algunas CDNs o WAFs no te permiten permitir el acceso según la dirección IP, pero pueden permitirte permitir el acceso según el 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' )
Mi captura de pantalla está cortada en la parte inferior, tiene el tamaño incorrecto o está distorsionada
Cuando tu captura de pantalla está cortada, el tamaño es incorrecto o aparece distorsionada, esto puede ocurrir cuando la funcionalidad estándar de desplazamiento de la página se personaliza en el código de tu sitio.
A continuación se presentan algunas posibles causas y soluciones para este problema:
-
La página tiene una altura mayor a 15,000 píxeles
Cuando tomamos una captura de pantalla de una página, Hotjar la renderiza con una altura máxima de 15,000 píxeles. Las páginas más largas que esto se recortarán hasta este punto.
Sin embargo, utilizando la opción de tomar una nueva captura de pantalla de esta página tú mismo, podrás capturar la página completa en la mayoría de los casos.
Consulta nuestro artículo de Limitaciones de los mapas de calor para ver una lista de lo que los mapas de calor no pueden capturar.
-
El desplazamiento de la página no ocurre en el elemento del documento
Si tu 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 captura de pantalla completa de la página y puede aparecer recortada. Esto se debe a que nuestro proceso de captura de pantalla necesita determinar la longitud del documento. Si ves una captura de pantalla recortada, puede ser porque el desplazamiento de tu página ocurre en un contenedor <div>, que nuestra herramienta de mapas de calor no admite.
Consulta nuestro artículo de Limitaciones de los mapas de calor para ver una lista de lo que los mapas de calor no pueden capturar.
-
El ancho de la página se establece con JavaScript
Hotjar captura una captura de pantalla en los siguientes anchos de dispositivo:
- Escritorio: 1500px
- Tableta: 800px
- Teléfono: 380px
Las capturas de pantalla pueden verse afectadas si se utiliza JavaScript para establecer un ancho fijo cuando cambia el tamaño del navegador. Si un usuario visita una página de tu sitio con un ancho de navegador fijo aplicado, la captura de pantalla de esa página puede no aparecer correctamente, ya que no será el ancho requerido que utiliza la herramienta de captura de pantalla de Hotjar.
Solución posible:
En algunos casos, puedes solucionarlo actualizando la captura de pantalla. Consulta nuestro artículo de 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
Tu página puede tener algunos elementos que ocupan el 100% de la altura del navegador, establecidos mediante JavaScript. Hotjar toma capturas de pantalla de página en una sola ventana grande, y estos tipos de elementos pueden seguir aumentando de tamaño, lo que resulta en una captura de pantalla inesperada.
Solución posible:
Una solución puede requerir la ayuda de tu equipo de desarrollo. A veces se puede resolver estableciendo un valor máximo para el cálculo de la altura. Este puede ser un valor de tu elección, de hasta 1200.
viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight; // - o - // if (viewportHeight > 1200) { viewportHeight = 1200; } -
Se utilizan unidades VH para el tamaño del texto en la página
Cuando las imágenes y el texto en una captura de pantalla están distorsionados, esto puede deberse al uso de una unidad vh para el tamaño del texto dentro del estilo CSS del elemento. Las capturas de pantalla de los mapas de calor actualmente no admiten este método de uso de vh.
Solución posible:
En algunos casos, puedes solucionarlo actualizando la captura de pantalla. Consulta nuestro artículo de 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 tiene elementos faltantes o se muestra completamente en blanco/negro
Esto suele ocurrir cuando el contenido dinámico de la página se carga en eventos como desplazamiento, pasar el cursor o hacer clic. También puede ocurrir cuando las imágenes de tu página se configuran para cargarse con retraso, como para aumentar la velocidad de carga de tu sitio.
Solución posible:
En algunos casos, este problema se puede solucionar tomando una nueva captura de pantalla utilizando nuestra herramienta de actualización de capturas de pantalla. Con esta herramienta, tienes la oportunidad de cargar tu sitio en una nueva ventana, permitir que se cargue cualquier contenido dinámico y luego capturar una nueva captura de pantalla. Consulta 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 hacer esto.
La captura de pantalla en el escritorio muestra elementos de un dispositivo móvil
Puede que te encuentres con un problema en el que las capturas de pantalla de tu sitio de escritorio tienen elementos del sitio móvil, como el menú de navegación. Esto también puede ocurrir al revés, con elementos de escritorio en la captura de pantalla móvil.
Esto puede ocurrir debido a las reglas CSS en tu página donde el sitio de escritorio no está configurado para mostrarse a partir de 1280px. También puede suceder cuando los elementos se ocultan/muestran utilizando min-device-width y max-device-width.
Solución posible:
No todos los navegadores web reconocen min-device-width y max-device-width, lo cual se puede solucionar reemplazándolos por min-width y max-width. Encontrarás más detalles sobre las diferencias entre ellos en una publicación de Menucool llamada max-device-width vs max-width? ¿Cuál debo usar?