Heatmaps

Os Heatmaps mostram onde os visitantes clicam, onde o cursor permanece e até que ponto os visitantes rolam suas páginas. Os dados são coletados em todas as páginas onde o widget é executado, então não há nada a configurar antecipadamente — quando você quiser um mapa, ele já estará lá.

Não há nada para criar

Ao contrário de ferramentas antigas de heatmap, você não cria um mapa para uma página e depois espera que ele se preencha. A coleta começa assim que o widget é instalado, em todo o seu site. Abra Heatmaps no painel e você verá todas as páginas que têm dados, com contagens de cliques, movimentos e visualizações.

Os Heatmaps estão disponíveis no Unlimited plan e podem ser desativados por projeto em Settings › Widget › Heatmaps.

Encontrando uma página

• Filtrar por página — digite qualquer parte de um caminho, por exemplo pric, para restringir a lista
• Ordenar qualquer coluna — por cliques, movimentos, visualizações ou última atividade
• Escolher um período — últimos 7, 30 ou 90 dias

  Clique numa página para abrir seu mapa. As páginas são agrupadas por caminho, então \/pricing, \/pricing\/ e \/pricing?utm_source=x são todas o mesmo mapa.

  Os três tipos de mapa

  • Cliques — exatamente onde as pessoas clicaram ou tocaram. Pontos quentes são vermelhos, áreas mais frias são azuis
  • Movimentos — por onde o cursor se moveu e pausou. Um bom indicador de onde a atenção vai no desktop, já que as pessoas frequentemente posicionam o cursor sobre o que estão lendo
  • Rolagem — até que ponto os visitantes desceram na página, mostrado como faixas com a porcentagem que atingiu cada profundidade. O ponto em que a cor diminui é sua dobra na prática

    Mapas de movimentos são só para desktop: dispositivos touch não têm cursor para seguir, então os mapas móveis mostram cliques e profundidade de rolagem.

    O dispositivo importa

    Mapas para desktop, tablet e mobile são mantidos separadamente, porque a mesma página pode ter um layout completamente diferente em cada um. Alterne entre eles com as abas de dispositivo — um botão que está acima da dobra no desktop costuma ficar três rolagens abaixo num telefone, e o mapa de rolagem mostrará isso imediatamente.

    A página por trás do mapa

    O plano de fundo não é uma captura de tela — é a sua página real, reconstruída a partir de uma gravação de sessão que começou nela. Isso significa que o calor cai em botões e textos reais, e permanece nítido em qualquer tamanho.

    Se você vê um plano de fundo substituto em vez da sua página, isso significa que nenhuma gravação concluída começou nessa página para aquele dispositivo ainda. Habilite Session Recording para o projeto e a próxima visita gravada que começar na página tornará-se o plano de fundo.

    Elementos mais clicados

    Ao lado do mapa, uma lista ranqueada mostra quais elementos recebem mais cliques, identificados pela sua tag e classe em vez da posição. Como é baseada em elementos, a classificação permanece significativa mesmo quando seu layout muda entre tamanhos de tela — e ela captura cliques em coisas que não são clicáveis, o que frequentemente é a descoberta mais interessante.

    Privacidade

    Os Heatmaps são deliberadamente anônimos:

    • Apenas coordenadas, profundidade de rolagem e nomes de elementos são coletados — nenhum conteúdo da página e nenhuma tecla pressionada
    • Os pontos não são vinculados à identidade ou ao perfil do visitante
    • Os nomes dos elementos são limpos antes de serem armazenados, então ids e classes contendo coisas como números de conta ou e-mails nunca nos alcançam
    • Os dados são excluídos automaticamente quando seu período de retenção expira

      Como ler um heatmap corretamente

      • Dê volume. Um punhado de visitas não diz nada. Espere algumas centenas de visualizações em uma página antes de tirar conclusões
      • Compare dispositivos antes de redesenhar qualquer coisa — um problema frequentemente existe em apenas um
      • Observe cliques em coisas não clicáveis. Cliques repetidos em uma imagem ou um título geralmente significam que as pessoas esperam que aquilo faça algo
      • Use o mapa de rolagem para posicionar seu CTA, depois confirme a alteração com um A\/B experiment em vez de presumir que ajudou