Este artigo identifica e oferece algumas soluções para resultados inesperados, em branco, quebrados e cortados da captura de tela do mapa de calor. Se você está procurando ajuda para solucionar os dados de calor colocados sobre a captura de tela, consulte nosso Artigo de Solução de Problemas dos Dados de Calor.
Clique no problema da captura de tela abaixo que mais se assemelha ao que você está vendo:
Minha captura de tela não possui estilos ou CSS aplicados, com imagens e ícones maiores do que o esperado
Artigos mencionados no vídeo: Endereços IP do Hotjare Como Tirar Novamente uma Captura de Tela do Mapa de Calor
A ausência de CSS ou imagens e ícones SVG maiores do que o esperado geralmente significa que o servidor do seu site está bloqueando o Hotjar de acessar os arquivos CSS.
Motivos pelos quais seu site pode estar bloqueando o Hotjar de acessar o CSS incluem:
- O acesso é limitado a endereços IP específicos
- O bloqueio está ocorrendo com base no domínio/referenciador
- O acesso é restrito com base na geolocalização (ou seja, acessar recursos da Irlanda não é possível)
- Bloqueio com base na falta de cookie/sessionStorage
- Bloqueio com base em proteção por senha, impedindo que os recursos sejam acessados diretamente por meio de sua URL, ou bloqueando solicitações para pontos finais específicos
Solução:
Na maioria dos casos, fazer as permissões listadas abaixo pode corrigir problemas envolvendo bloqueio de domínio/referenciador e Endereço IP. Após fazer essas alterações, atualizar sua captura de tela deve resolver o problema.
-
Permitir o domínio/referenciador https://insights.hotjar.com
Sugerimos permitir os domínios *.hotjar.com, especialmente para aplicar CSS aos mapas de calor.
-
Permitir os Endereços IP do Hotjar
Todos os nossos servidores estão hospedados na Amazon AWS eu-west-1 na Irlanda e acessam folhas de estilo via HTTPS. Abaixo está uma lista dos IPs que o Hotjar usa para enviar tráfego de saída, do qual você pode permitir, se necessário, em seu servidor.
18.203.61.76 18.203.176.135 52.17.197.221Os IPs listados acima não cobrem o domínio real
O domínio real é https://insights.hotjar.com. Isso ocorre porque ele é servido por nosso provedor de CDN. Sugerimos permitir os domínios *.hotjar.com, especialmente para aplicar CSS aos mapas de calor.
Se você usa uma Rede de Entrega de Conteúdo (CDN), Firewall de Aplicação Web (WAF) ou qualquer outro serviço que fique entre seu servidor e o restante da web, então pode ser necessário fazer as alterações dentro desses serviços, bem como no servidor.
-
Permitir os User-Agents do Hotjar
Alguns CDNs ou WAFs não permitem que você conceda acesso com base no Endereço IP, mas podem permitir que você conceda acesso com base no 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' )
Minha captura de tela está cortada na parte inferior, tem o tamanho errado ou está distorcida
Quando sua captura de tela está cortada, o dimensionamento está errado ou parece distorcida, isso pode ocorrer quando a funcionalidade padrão de rolagem da página é personalizada no código do seu site.
Abaixo estão algumas possíveis causas e soluções para esse problema:
-
A página tem uma altura maior que 15.000 pixels
Quando tiramos inicialmente uma captura de tela de uma página, o Hotjar a renderiza com um máximo de 15.000 pixels de altura. Páginas mais longas do que isso serão cortadas até esse ponto.
No entanto, usando a opção de Tirar uma nova captura de tela desta página você mesmo, a opção de refazer permitirá que você capture a página inteira na maioria dos casos.
Consulte nosso artigo sobre Limitações dos mapas de calor para ver uma lista do que os mapas de calor não podem capturar.
-
A rolagem da página não ocorre no elemento do documento
Se sua página não rolar no elemento do documento ou usar um bloqueio de rolagem para rolar a página, o Hotjar não conseguirá capturar uma captura de tela completa da página, e ela pode parecer cortada. Isso ocorre porque nosso processo de captura de tela precisa determinar o quão longo é o documento. Se você ver uma captura de tela cortada, pode ser porque a rolagem da sua página ocorre em um contêiner <div>, o que nossa ferramenta de mapas de calor não suporta.
Consulte nosso artigo sobre Limitações dos mapas de calor para ver uma lista do que os mapas de calor não podem capturar.
-
A largura da página está sendo definida com JavaScript
O Hotjar captura uma captura de tela nas seguintes larguras de dispositivo:
- Desktop: 1500px
- Tablet: 800px
- Celular: 380px
As capturas de tela podem ser afetadas se o JavaScript for usado para definir uma largura fixa quando o tamanho do navegador muda. Se um usuário visitar uma página em seu site com uma largura de navegador fixa aplicada, a captura de tela para essa página pode não aparecer corretamente, pois não será a largura necessária que a ferramenta de captura de tela do Hotjar usa.
Solução Possível:
Em alguns casos, você pode corrigir isso atualizando a captura de tela. Consulte nosso artigo sobre Como Atualizar uma Captura de Tela de Mapa de Calor para um guia passo a passo sobre como fazer isso.
-
A altura da página foi definida com JavaScript
Sua página pode ter alguns elementos que ocupam 100% da altura do navegador, definidos usando JavaScript. O Hotjar faz capturas de tela em uma única janela grande, e esses tipos de elementos podem continuar aumentando, resultando em uma captura de tela inesperada.
Solução Possível:
Uma solução pode exigir ajuda de sua equipe de desenvolvimento. Às vezes, pode ser resolvido definindo um valor máximo para o cálculo de altura. Isso pode ser um valor de sua escolha, até 1200.
viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight; // - ou - // if (viewportHeight > 1200) { viewportHeight = 1200; } -
Unidades VH são usadas para o tamanho do texto na página
Quando imagens e texto em uma captura de tela estão distorcidos, isso pode ser devido a uma unidade vh sendo usada para o tamanho do texto dentro do estilo CSS do elemento. As capturas de tela de mapas de calor atualmente não suportam esse método de uso de vh.
Solução Possível:
Em alguns casos, você pode corrigir isso atualizando a captura de tela. Consulte nosso artigo sobre Como Atualizar uma Captura de Tela de Mapa de Calor para um guia passo a passo sobre como fazer isso.
Minha captura de tela está com elementos faltando ou aparece toda branca/preta
Isso geralmente ocorre quando o conteúdo dinâmico na página é carregado em eventos como rolagem, passagem do mouse ou clique. Também pode surgir quando as imagens em sua página são configuradas para carregar com atraso, como forma de aumentar a velocidade de carregamento do seu site.
Solução Possível:
Em alguns casos, esse problema pode ser resolvido tirando uma nova captura de tela usando nossa ferramenta de atualização de captura de tela. Com essa ferramenta, você tem a oportunidade de carregar seu site em uma nova janela, permitir que todo o conteúdo dinâmico seja carregado e, em seguida, capturar uma nova captura de tela. Consulte nosso Artigo Como Atualizar uma Captura de Tela de Mapa de Calor para um guia passo a passo sobre como fazer isso.
Minha captura de tela no desktop está mostrando elementos de um dispositivo móvel
Você pode encontrar um problema em que as capturas de tela do seu site para desktop exibem elementos do site móvel, como o menu de navegação. Isso também pode ocorrer de forma inversa, com elementos do desktop na captura de tela do dispositivo móvel.
Isso pode ocorrer devido a regras de CSS em sua página, onde o site para desktop não está configurado para ser exibido a partir de 1280px. Também pode acontecer quando os elementos são ocultados/exibidos usando min-device-width e max-device-width.
Solução Possível:
Nem todos os navegadores da web reconhecem min-device-width e max-device-width, o que pode ser corrigido substituindo-os por min-width e max-width. Você encontrará mais detalhes sobre as diferenças entre eles em um post no Menucool chamado max-device-width vs max-width? Qual devo usar?