Este artículo identifica y ofrece algunas soluciones para resultados inesperados, en blanco, rotos y recortados en las capturas de pantalla del mapa de calor. Si buscas ayuda para solucionar los datos de calor colocados encima de la captura de pantalla, consulta nuestro artículo de Solución de problemas de datos de calor.
Haz clic en el problema de captura de pantalla que mejor describa 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 Hotjary Cómo volver a tomar una captura de pantalla del 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 a Hotjar de acceder a los archivos CSS.
Las razones por las que tu sitio puede estar bloqueando a Hotjar de acceder 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)
- Bloqueo basado en la falta de cookies/sessionStorage
- Bloqueo basado en la protección con contraseña, evitando que los activos se accedan directamente a través de su URL, o bloqueando las solicitudes a puntos finales específicos
Solución:
En la mayoría de los casos, hacer las concesiones enumeradas a continuación puede solucionar problemas relacionados con el bloqueo de dominios/referentes y direcciones IP. Después de realizar estos cambios, actualizar tu 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 los mapas de calor.
-
Permitir las direcciones IP de Hotjar
Todos nuestros servidores están alojados en Amazon AWS eu-west-1 en Irlanda y acceden a 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, el cual 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, entonces es posible que necesites realizar los cambios dentro de esos servicios además del servidor.
-
Permitir los User-Agents de Hotjar
Algunas CDNs o WAFs no te permiten autorizar el acceso basado en la dirección IP, pero pueden permitirte autorizar el acceso basado en 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 un tamaño incorrecto o está distorsionada
Cuando tu captura de pantalla está cortada, el tamaño es incorrecto o parece 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 inicialmente una captura de pantalla de una página, Hotjar la renderiza con un máximo de 15,000 píxeles de altura. 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, en la mayoría de los casos podrás capturar la página completa.
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 recorrer la página, Hotjar no podrá capturar una captura de 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 ves una captura de pantalla cortada, podría 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 está estableciendo 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 en tu sitio con un ancho de navegador fijo aplicado, es posible que la captura de pantalla de esa página no aparezca 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 solucionar esto 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 con JavaScript. Hotjar toma capturas de página en una sola ventana grande, y estos tipos de elementos pueden seguir aumentando, lo que resulta en una captura de pantalla inesperada.
Solución posible:
Una solución puede requerir 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 a que se está utilizando una unidad vh para el tamaño del texto dentro del estilo CSS del elemento. Las capturas de pantalla de Mapas de Calor actualmente no admiten este método de uso de vh.
Solución posible:
En algunos casos, puedes solucionar esto 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 aparece toda blanca/negra
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 surgir cuando las imágenes de tu página están configuradas para cargarse con retraso, por ejemplo, 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. 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 hacerlo.
Mi captura de pantalla en escritorio 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 escritorio tienen elementos del sitio móvil, como el menú de navegación. Esto también puede ocurrir en sentido contrario, con elementos de escritorio en la captura de pantalla móvil.
Esto puede ocurrir debido a 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 estos en una publicación en Menucool llamada ¿max-device-width vs max-width? ¿Cuál debo usar?