O que é um heatmap? Mapas de clique e rolagem de sites explicados | We.Inc
O que é um mapa de calor de site, como mapas de clique, rolagem e atenção são coletados, o que fazer sobre privacidade e consentimento, e uma demo ao vivo que desenha um mapa de calor com os seus próprios cliques.
Um mapa de calor de site é uma imagem da sua página com cores por cima para mostrar onde os visitantes clicaram, até onde rolaram ou onde passaram tempo. Cores quentes significam muitos visitantes, cores frias significam poucos. Um pequeno script na página registra as interações, e a ferramenta as soma ao longo de muitas visitas.
Tipos comuns de mapa de calor
Tipo
O que mostra
Pergunta que responde
Mapa de cliques
Onde as pessoas clicaram ou tocaram
Alguém está clicando no meu botão principal?
Mapa de rolagem
A parcela de visitantes que chegou a cada profundidade da página
As pessoas chegam a ver meus preços?
Mapa de área
Total de cliques dentro de uma área que você seleciona
Quanto o menu inteiro é usado?
Mapa de atenção
Tempo gasto em cada parte da página
Qual seção prende as pessoas?
Mapa de movimento
Por onde o ponteiro do mouse passou, oferecido por algumas ferramentas
O que atrai os visitantes no desktop?
O analytics diz quantas pessoas visitaram uma página. Um mapa de calor mostra o que elas fizeram lá dentro. Para o site de um pequeno negócio, isso costuma resolver o mistério em um olhar: o botão em que ninguém clica, a foto que todo mundo toca esperando um link, a oferta abaixo do ponto em que a maioria para de rolar. Teste a demo para ver como um mapa é montado.
Escolha uma ferramenta de mapa de calor e crie um projeto para o seu site.
Adicione o script de rastreamento da ferramenta em todas as páginas ou instale o plugin dela no seu criador de sites.
Configure o consentimento se tiver visitantes de regiões que o exigem e escolha quanto texto da página a ferramenta pode registrar.
Espere algumas centenas de visitas na página que interessa antes de tirar conclusões.
Abra o mapa de calor dessa página, confira celular e desktop separadamente e anote uma mudança para testar.
Analise celulares e computadores separadamente. A mesma página tem layout diferente, então mapas misturados ficam borrados.
Cliques em coisas que não são links, como fotos ou texto em negrito, significam que as pessoas esperam que elas façam algo.
Se a maioria dos visitantes para de rolar antes da sua chamada para ação, suba-a em vez de aumentá-la.
Rage clicks, quando alguém toca o mesmo ponto várias vezes, costumam indicar um elemento quebrado ou lento.
Trate o mapa de calor como fonte de ideias e depois confirme a mudança com um teste A/B ou dados de conversão.
Perguntas frequentes
Existem ferramentas de mapa de calor grátis?
Sim. A documentação da Microsoft descreve o Clarity como um serviço grátis para sempre, com mapas de clique, rolagem, área, conversão e atenção, além de gravações de sessão. Outras ferramentas, como o Hotjar, também oferecem mapas de calor; confira os planos atuais nos sites delas.
Quantos visitantes preciso para um mapa de calor útil?
Não existe um número oficial. Algumas ferramentas desenham um mapa com pouquíssimo tráfego, mas um punhado de visitas mostra sobretudo hábitos individuais. Espere até o padrão parar de mudar conforme chegam mais visitas antes de redesenhar qualquer coisa.
Mapas de calor precisam de consentimento de cookies?
Depende da ferramenta e da lei de onde estão seus visitantes. O Clarity, por exemplo, passou a exigir sinais de consentimento para visitas do EEE, do Reino Unido e da Suíça em 31 de outubro de 2025. Isto não é aconselhamento jurídico; confira as regras que se aplicam a você.
As ferramentas de mapa de calor registram o que as pessoas digitam?
As boas escondem. A documentação do Clarity diz que o conteúdo de campos de entrada e listas suspensas é mascarado em todos os modos, e o modo padrão Balanced também mascara números e endereços de e-mail.
Qual a diferença entre um mapa de calor e uma gravação de sessão?
Um mapa de calor soma muitas visitas em uma única imagem de uma página. Uma gravação de sessão reproduz o percurso de um visitante pelas páginas. Mapas de calor mostram padrões; gravações ajudam a explicar um caso estranho.
Como os dados são coletados
Um script na sua página escuta cliques, toques e rolagem e envia pequenos registros à ferramenta: qual elemento foi clicado, a largura da página, até onde o visitante chegou. A ferramenta então agrupa os registros por página e dispositivo e colore a página.
As melhores ferramentas ligam os cliques a elementos da página em vez de posições brutas na tela. A documentação do Clarity diz que seus mapas de clique usam elementos e não a posição absoluta do mouse, então os mapas continuam precisos em diferentes tamanhos de tela e layouts responsivos.
Configurações de privacidade para escolher no primeiro dia
Decida quanto texto da página a ferramenta pode guardar. O Clarity oferece Strict, que mascara todo o conteúdo, Balanced, que mascara conteúdo sensível como números e endereços de e-mail, e Relaxed, que mascara só campos de formulário e listas suspensas.
Você também pode marcar partes específicas de uma página como privadas. No Clarity isso é o atributo data-clarity-mask, mostrado no código abaixo. O Clarity também diz que não deve ser usado em sites voltados a usuários com menos de 18 anos.
Código que você pode precisar
Dois snippets curtos para sites que usam o Clarity. Ambos seguem a API publicada pela Microsoft; os valores aqui são exemplos.
Esconder uma parte da página das gravações
Adicionar data-clarity-mask com o valor True mascara aquele elemento e tudo dentro dele, seja qual for a configuração geral do site.
Avisar ao Clarity que o visitante aceitou
Chame isto a partir do seu banner de cookies depois que o visitante aceitar. Se ele recusar, o Clarity roda sem cookies, então nenhuma chamada é necessária.
Como a demo desenha o calor
Cada clique vira um círculo suave feito com createRadialGradient. Círculos sobrepostos se acumulam, então os pontos mais movimentados ficam mais escuros.
Crie um mapa de calor com os seus próprios cliques
Clique ou toque em qualquer lugar da página de exemplo abaixo. Cada clique adiciona calor. Nada é enviado para lugar nenhum: os cliques ficam nesta aba do navegador.
Página de exemplo. Clique para adicionar calor naquele ponto.
Cliques registrados: {n}
Limpar cliques
Mostrar a página sob o calor
Cardápio
Pedir
Visitar
Pão de fermentação natural, assado às 5h
Peça até as 10 da noite para retirar na manhã seguinte.