Este artigo identifica e oferece algumas soluções para resultados inesperados, em branco, quebrados e cortados nas capturas de tela do Heatmap. 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 do Heatmap.
Clique na captura de tela abaixo que mais se aproxima do problema que você está enfrentando:
Minha captura de tela não possui estilo ou CSS aplicado, com imagens e ícones maiores do que o esperado
Artigos mencionados no vídeo: Hotjar IPs e Como tirar uma captura de tela de um mapa de calor novamente
A ausência de CSS, imagens e ícones SVG maiores do que o esperado geralmente significa que o servidor do seu site está bloqueando o acesso do Hotjar aos arquivos CSS.
Razões pelas quais o 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, não é possível acessar os recursos da Irlanda)
- O bloqueio é baseado na falta de cookie/sessionStorage
- O bloqueio é baseado na proteção por senha, impedindo que os recursos sejam acessados diretamente por meio de sua URL ou bloqueando solicitações para endpoints específicos
Solução:
Na maioria dos casos, fazer as alterações listadas abaixo pode resolver problemas relacionados ao bloqueio de domínio/referenciador e IP. Após fazer essas alterações, atualizar sua captura de tela deve resolver o problema.
-
Permita o domínio/referenciador https://insights.hotjar.com
Sugerimos permitir os domínios *.hotjar.com, especialmente para aplicar CSS aos mapas de calor.
-
Permita 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 por HTTPS. Abaixo está uma lista dos IPs que o Hotjar usa para enviar tráfego de saída, dos quais 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 é fornecido 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 Distribuição 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, talvez seja necessário fazer as alterações também nesses serviços, além do servidor.
-
Permita os User-Agents do Hotjar
Algumas CDNs ou WAFs não permitem que você permita o acesso com base no endereço IP, mas podem permitir 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 é cortada, o dimensionamento está errado ou aparece 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 este problema:
-
A página tem uma altura maior que 15.000 pixels
Quando tiramos uma captura de tela inicial 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, você poderá capturar a página inteira na maioria dos casos.
Consulte nosso artigo sobre Limitações do Mapa 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 poderá 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 tamanho do documento. Se você vir uma captura de tela cortada, pode ser porque a rolagem da sua página ocorre em um contêiner <div>, que nossa ferramenta de Mapas de Calor não suporta.
Consulte nosso artigo sobre Limitações do Mapa 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: 1280px
- Tablet: 800px
- Telefone: 380px
As capturas de tela podem ser afetadas se o JavaScript for usado para definir uma largura fixa quando o tamanho do navegador é alterado. Se um usuário visitar uma página em seu site com uma largura fixa do navegador 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 do Mapa de Calor para obter 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 têm 100% da altura do navegador, definidos usando JavaScript. O Hotjar tira 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 da sua equipe de desenvolvimento. Às vezes, pode ser resolvido definindo um valor máximo para o cálculo da 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 ao uso de uma unidade vh para o tamanho do texto no estilo CSS do elemento. As capturas de tela do Mapa 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 do Mapa de Calor para obter 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 da página é carregado em eventos como rolagem, passagem do mouse ou clique. Também pode acontecer quando as imagens da 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 qualquer 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 obter um guia passo a passo sobre como fazer isso.
Minha captura de tela no desktop está mostrando elementos para um dispositivo móvel
Você pode encontrar um problema em que as capturas de tela do seu site para desktop têm elementos do site para dispositivos móveis, como o menu de navegação. Isso também pode ocorrer ao contrário, com elementos do desktop na captura de tela para dispositivos móveis.
Isso pode ocorrer devido a regras CSS em sua página em que o site para desktop não está configurado para ser exibido a partir de 1280px. Também pode acontecer quando 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?