Heatmaps com Hotjar e Microsoft Clarity

Heatmaps (mapas de calor) mostram visualmente onde os visitantes clicam, até onde rolam a página e por onde o cursor passa — o "porquê" do comportamento que relatórios de tráfego, como sessões e taxa de rejeição, não explicam. Hotjar e Microsoft Clarity são as duas ferramentas mais usadas para isso, e dá para começar sem gastar nada.

Um relatório de analytics diz quantas pessoas chegaram e quantas saíram, mas não diz o motivo. Elas clicaram nos links certos? Rolaram até o conteúdo importante? Ficaram presas em um campo do formulário? É essa camada visual e qualitativa que os heatmaps preenchem, e usá-los é um ciclo de otimização com etapas bem definidas:

Como um heatmap funciona

Você instala um pequeno script de rastreamento no site. A partir daí, a ferramenta registra as interações de cada visita — cliques, rolagem, movimento do cursor — e as agrega em uma imagem sobreposta à sua própria página. O resultado é o mapa de calor: uma escala de cores em que o vermelho e o laranja marcam as áreas de maior atividade e o azul, as de menor. Em vez de ler tabelas, você "vê" o comportamento desenhado sobre o layout real.

O heatmap é uma síntese de muitas visitas. Por isso ele responde bem a perguntas de padrão ("a maioria ignora este botão?") e mal a perguntas de indivíduo ("por que aquela pessoa saiu?"). Para a segunda, existem as gravações de sessão. As duas ferramentas — Hotjar e Clarity — combinam os dois recursos, e é dessa dupla que sai o insight acionável.

Os tipos de heatmap

Cada tipo responde a uma pergunta diferente sobre a página:

O mapa de clique é o mais direto: se muita gente clica em uma imagem ou num texto que não é link, há uma expectativa frustrada — vale transformar aquilo em um link de verdade ou deixar claro que não é clicável. Se o seu CTA aparece em azul, ele está invisível ou pouco atraente.

O mapa de rolagem revela a "linha de dobra real" — o ponto a partir do qual a audiência despenca. Colocar uma chamada importante depois desse ponto é o mesmo que escondê-la. A leitura prática é simples: o que precisa ser visto tem de estar acima da região onde o mapa esfria.

O mapa de movimento (disponível no Hotjar) rastreia o cursor. Ele é o mais frágil dos três, porque nem todo mundo move o mouse para onde olha — mas, agregado, ajuda a perceber quais blocos da dobra chamam atenção.

Gravações de sessão: o complemento do heatmap

Enquanto o heatmap resume, a gravação de sessão mostra o filme. São vídeos anônimos de navegações reais, nos quais você acompanha o cursor, a rolagem, os cliques e o preenchimento de formulários de uma visita específica. É onde o atrito aparece de forma inequívoca: a pessoa tenta clicar em algo que não responde, hesita num campo de formulário, rola para cima e para baixo procurando uma informação que não encontra.

O fluxo mais produtivo é usar os dois juntos. As gravações levantam hipóteses ("parece que o campo de telefone trava as pessoas"); o heatmap agregado confirma se aquilo é um padrão ou um caso isolado. Tanto o Clarity quanto o Hotjar entregam gravações — no Clarity elas fazem parte do pacote gratuito.

Hotjar × Microsoft Clarity: qual escolher?

As duas ferramentas cobrem o essencial (heatmaps e gravações), mas têm perfis diferentes. Como preços de SaaS e cotas de plano mudam com frequência, a comparação abaixo é qualitativa — confirme os valores e limites atuais no site de cada ferramenta antes de decidir.

Na prática, o caminho mais comum é começar pelo Microsoft Clarity: ele é gratuito, cobre heatmaps de clique e rolagem e entrega gravações sem custo, o que resolve a maior parte das dúvidas de comportamento. Se, mais adiante, você sentir falta de pesquisas de feedback, mapa de movimento ou análise detalhada de formulários, a migração — ou o uso conjunto — do Hotjar faz sentido. A integração nativa do Clarity com o Google Analytics ainda facilita cruzar o "quanto" do analytics com o "porquê" do heatmap.

Como instalar

O princípio é o mesmo nas duas ferramentas: você cria uma conta, gera um trecho de código JavaScript e o insere no <head> de todas as páginas do site. Em poucos minutos, os primeiros dados começam a aparecer no painel.

Em um site WordPress, há dois caminhos. O mais simples é usar o plugin oficial da ferramenta (o Microsoft Clarity, por exemplo, mantém um plugin próprio no repositório do WordPress): você instala, ativa e cola o identificador do projeto nas configurações. O caminho manual é colar o script diretamente no template do tema — de preferência em um child theme, para não perder a alteração na próxima atualização — ou usar um plugin genérico de inserção de código no cabeçalho.

Depois de instalar, faça uma visita ao próprio site e confira no painel se a sessão foi registrada. Se aparecer, o rastreamento está no ar.

De dados para ação: como ler e agir

Coletar dados é a parte fácil; o valor está em traduzir o mapa em decisão. Alguns padrões recorrentes e o que fazer com cada um:

• CTA em azul (poucos cliques): o botão está invisível ou mal posicionado. Cruze com o mapa de rolagem — se ele estiver abaixo da linha em que a maioria para de rolar, o problema é posição. Suba o botão para uma região mais vista, aumente o contraste de cor e o tamanho, e compare o antes e o depois.
• Cliques em elementos que não são links: se muita gente clica no logo esperando voltar à página inicial, torne o logo clicável. Se clicam numa imagem, avalie transformá-la em link. O heatmap aqui está apontando uma expectativa que o layout não atende.
• Abandono em um campo de formulário: as gravações mostram a pessoa parando sempre no mesmo campo — muitas vezes é uma validação rígida demais (que rejeita um telefone bem formatado, por exemplo) ou um rótulo confuso. Afrouxe a validação, aceite mais formatos e adicione um placeholder com o formato esperado.
• Rolagem que morre no meio: se o mapa de rolagem esfria antes do conteúdo decisivo, reorganize a página para levar o argumento principal — e o CTA — para cima.

Repare que nenhuma dessas leituras é um número mágico de aumento de conversão: o heatmap aponta a hipótese, e é o teste posterior que confirma se a mudança melhorou o resultado. Tratar cada ajuste como um experimento, medindo o efeito, é o que separa otimização de achismo. Para o CTA, vale casar a análise de comportamento com um entendimento claro de onde a página se encaixa no funil de vendas.

Heatmaps e privacidade (LGPD)

Ferramentas de heatmap não precisam — nem devem — capturar dados pessoais. Tanto o Hotjar quanto o Clarity mascaram automaticamente campos sensíveis, como senhas e números de cartão, e tratam as sessões de forma anônima por padrão. Ainda assim, do ponto de vista da LGPD, o site está usando uma ferramenta que observa comportamento, então a recomendação é: manter uma política de privacidade clara informando o uso dessas ferramentas de análise, e alinhar o consentimento à sua realidade. Se você já integra a captura de leads a uma plataforma como o Mautic, vale garantir que a comunicação sobre privacidade cubra também a análise de comportamento.

Por fim, heatmaps são ferramenta interna de otimização — não há motivo para expô-los publicamente. Use os insights internamente para melhorar a experiência de quem visita.

Perguntas frequentes sobre heatmaps

Heatmaps rastreiam dados pessoais dos visitantes?

Tanto o Hotjar quanto o Microsoft Clarity mascaram automaticamente campos sensíveis, como senhas e números de cartão, e as sessões são anônimas por padrão. Para respeitar a LGPD, mantenha uma política de privacidade clara informando que o site usa ferramentas de análise de comportamento, e ofereça a opção de recusar quando aplicável ao seu caso.

O Microsoft Clarity é realmente gratuito?

Sim. Atualmente a Microsoft oferece o Clarity gratuitamente, com heatmaps e gravações de sessão, sem um limite de tráfego declarado publicamente. Ainda assim, planos e condições de ferramentas mudam com o tempo, então confirme os termos atuais antes de decidir a estratégia.

Qual é a diferença entre Hotjar e Microsoft Clarity?

O Clarity é gratuito e concentra o essencial: heatmaps e gravações de sessão. O Hotjar tem um plano gratuito com cotas e planos pagos, e acrescenta recursos como pesquisas de feedback, mapa de movimento do cursor e análise de formulários. Muita gente começa no Clarity e migra para o Hotjar quando precisa de pesquisas ou de uma análise mais profunda.

Quantos dados preciso para tirar conclusões de um heatmap?

Heatmaps ficam confiáveis quando há tráfego suficiente na página; páginas de pouca visita levam mais tempo para formar um padrão claro. Uma boa prática é assistir a algumas gravações de sessão para levantar hipóteses de atrito e depois usar os heatmaps agregados para confirmar se aquele comportamento se repete.

Heatmaps funcionam em site pequeno ou de pouco tráfego?

Funcionam, mas exigem paciência: com pouco tráfego, o heatmap demora mais para acumular dados representativos e evita conclusões precipitadas. Nesses casos, as gravações de sessão costumam ser mais úteis no começo, porque cada visita individual já revela pontos de confusão ou travamento.

Conclusão

Heatmaps transformam a otimização de conversão de palpite em observação. Em vez de discutir se o botão está bem posicionado, você vê onde as pessoas clicam; em vez de supor que o conteúdo é lido até o fim, você mede até onde elas rolam. A combinação de mapa de clique, mapa de rolagem e gravações de sessão cobre a maior parte das perguntas de comportamento de um site.

O caminho de menor risco é claro: comece pelo Microsoft Clarity, que é gratuito, colete dados por algumas semanas, assista a gravações para levantar hipóteses e trate cada mudança como um experimento a ser medido. Se surgir a necessidade de pesquisas de feedback ou análise mais fina, avalie o Hotjar. Para conhecer os recursos em detalhe, consulte o site oficial do Microsoft Clarity. E, para mais conteúdos sobre dados e comportamento no site, visite a seção de Marketing Digital no atraca.com.br.