Mapa de calor: como usar Microsoft Clarity e Hotjar para entender o comportamento no site e aumentar a conversão

O Google Analytics conta quantas pessoas entraram em uma página, quanto tempo ficaram e quantas converteram. O que ele não conta é o que elas fizeram enquanto estavam lá: onde clicaram, até onde rolaram, em que ponto hesitaram e por que foram embora. O mapa de calor preenche essa lacuna ao transformar o comportamento de milhares de visitantes em uma imagem que qualquer pessoa da equipe consegue interpretar.

Ferramentas como Microsoft Clarity (gratuita) e Hotjar popularizaram esse tipo de análise e a tornaram acessível a empresas de qualquer porte. O desafio deixou de ser ter os dados e passou a ser saber lê-los e transformá-los em decisões: mudar a posição de um botão, cortar uma seção que ninguém vê, reescrever um título que gera cliques em elementos não clicáveis.

Neste artigo você vai entender os tipos de mapa de calor, como instalar e configurar as principais ferramentas, como combinar os dados com o GA4, como analisar gravações de sessão sem se perder e como usar tudo isso em um processo de otimização de conversão.

O que é um mapa de calor e o que ele mostra

Mapa de calor é uma representação visual da interação dos usuários com uma página, em que as áreas de maior atividade aparecem em cores quentes (vermelho, laranja) e as de menor atividade em cores frias (azul, verde). Ele agrega o comportamento de muitos visitantes em uma única imagem sobreposta à página.

O valor está na agregação. Um visitante clicando em uma imagem que não é link pode ser acaso; quinhentos fazendo isso indicam que a imagem parece clicável e a página está frustrando uma expectativa. Da mesma forma, descobrir que 70% das pessoas nunca passam da metade da página muda completamente a decisão sobre onde colocar a chamada para ação.

Os principais tipos de mapa de calor

Mapa de cliques (click map). Mostra onde os usuários clicam ou tocam. Revela botões ignorados, elementos não clicáveis que recebem cliques e links competindo entre si.

Mapa de rolagem (scroll map). Mostra até que ponto da página os visitantes chegam, em percentual. Identifica a "linha da dobra" real em cada dispositivo e seções que quase ninguém vê.

Mapa de movimento (move map). Rastreia o movimento do mouse em desktop, que tem correlação parcial com a atenção visual. Útil para identificar áreas de leitura e hesitação.

Mapa de atenção ou engajamento. Algumas ferramentas calculam o tempo que cada trecho da página fica visível na tela, combinando rolagem e permanência.

Mapa de área (zone map). Agrupa cliques por elemento em vez de por pixel, facilitando a comparação entre botões e links.

Além dos mapas, as ferramentas oferecem gravações de sessão, que reproduzem a navegação individual de um visitante, e indicadores de frustração, como cliques repetidos no mesmo ponto (rage clicks), cliques em elementos sem resposta (dead clicks) e rolagem rápida de volta ao topo.

Microsoft Clarity: como instalar e o que oferece

O Microsoft Clarity é gratuito, sem limite de tráfego, e oferece mapas de calor, gravações, painel de indicadores de frustração e integração com o GA4. É a porta de entrada mais acessível para a maioria das empresas.

Para instalar:

1. Crie uma conta e um projeto com o domínio do site.

2. Copie o código de rastreamento e instale via Google Tag Manager (tag HTML personalizada, acionador em todas as páginas) ou pelo recurso de código personalizado da plataforma do site. Em Wix Studio, o Clarity também pode ser conectado pelo painel de integrações.

3. Configure o mascaramento de dados para ocultar textos sensíveis e campos de formulário, o que é padrão na ferramenta.

4. Vincule ao GA4 para cruzar segmentos de público com gravações.

5. Aguarde algumas horas e verifique se as sessões começam a aparecer.

O Clarity também oferece filtros por origem de tráfego, dispositivo, país, página de entrada e eventos de frustração, além de resumos de sessões gerados por IA.

Hotjar: quando faz sentido pagar

O Hotjar tem plano gratuito com limite de sessões e planos pagos que ampliam a cobertura e adicionam funcionalidades de voz do cliente: pesquisas na página, enquetes de saída, widget de feedback e recrutamento de usuários para entrevistas.

A instalação segue a mesma lógica (código via GTM ou plataforma). A escolha entre as ferramentas depende do que você precisa: para mapas e gravações, o Clarity costuma bastar; quando a análise comportamental precisa ser combinada com perguntas diretas ao usuário ("o que impediu você de concluir?"), o Hotjar ou ferramentas similares entregam mais.

Em qualquer caso, informe o uso dessas ferramentas na política de privacidade e configure o banner de consentimento conforme a LGPD. O mascaramento de dados pessoais deve estar ativo por padrão.

Como ler um mapa de calor sem tirar conclusões erradas

Mapas de calor são fáceis de olhar e fáceis de interpretar mal. Algumas regras:

• Olhe por dispositivo. O comportamento em celular e em desktop é diferente; mapas agregados escondem isso. Com a maior parte do tráfego vindo de dispositivos móveis, comece por eles.

• Exija volume mínimo. Um mapa com 50 sessões mostra ruído. Espere algumas centenas de visualizações por página e por dispositivo antes de decidir.

• Segmente por origem. Visitantes de anúncios se comportam diferente de visitantes orgânicos. Um mapa só de tráfego pago mostra se a página entrega o que o anúncio prometeu.

• Compare quem converteu com quem não converteu. A maioria das ferramentas permite filtrar sessões por evento. A diferença entre os dois grupos indica o que importa.

• Não confunda atenção com interesse. Muitos cliques em um elemento podem significar confusão, não engajamento. Cruze com gravações.

• Considere o contexto da página. Em uma página de preços, 40% de rolagem até o fim pode ser bom; em um artigo longo, pode ser ruim.

Gravações de sessão: como analisar sem perder horas

Gravações são a parte mais rica e a mais demorada. Para extrair valor sem assistir centenas de vídeos:

1. Comece pelos filtros de frustração. Sessões com rage clicks, dead clicks, erros de JavaScript e rolagem excessiva concentram os problemas.

2. Filtre por abandono em páginas críticas. Quem chegou ao formulário ou ao checkout e saiu sem concluir.

3. Assista a 10 a 20 sessões por hipótese, não mais. Anote padrões, não casos isolados.

4. Use os resumos automáticos. O Clarity gera descrições em texto de grupos de sessões, o que acelera a triagem.

5. Documente cada padrão com uma gravação de exemplo, a hipótese de causa e a mudança proposta.

O objetivo é sair de cada rodada com duas ou três hipóteses concretas para testar, não com uma lista de 40 observações.

Como combinar mapa de calor com GA4 e Search Console

O mapa de calor responde "por quê"; o GA4 responde "quanto". Juntos, eles priorizam. Um fluxo que funciona: no GA4, identifique páginas com muito tráfego e baixa conversão, ou com alta taxa de saída em etapas-chave; no mapa de calor dessas páginas, procure a causa (CTA fora da área vista, elemento confuso, formulário longo); nas gravações, confirme a hipótese com casos reais; e no Search Console, verifique se a intenção de busca que traz o visitante é compatível com o que a página entrega.

Problemas de velocidade do site também aparecem nas gravações, na forma de visitantes que rolam antes de o conteúdo carregar ou clicam em elementos que ainda não respondem.

Os problemas mais comuns que o mapa de calor revela

Com alguma prática, certos padrões aparecem em quase todo site:

• Chamada para ação abaixo da linha de rolagem da maioria dos visitantes em celular.

• Imagens e títulos que parecem links e recebem cliques sem resposta.

• Menus e banners que disputam atenção com a ação principal.

• Seções longas de texto que ninguém lê, com queda abrupta na rolagem.

• Formulários com campos que geram desistência, visíveis nas gravações pelo ponto de abandono.

• Elementos quebrados em determinados dispositivos ou navegadores, identificados por rage clicks concentrados.

• Vídeos e carrosséis ignorados, apesar de ocuparem o espaço mais nobre da página.

Cada um desses achados vira uma hipótese de melhoria com impacto estimado, e as de maior impacto e menor esforço entram primeiro na fila.

Do insight ao teste: o processo de otimização

Mapa de calor sem processo gera opiniões; com processo, gera resultado. O ciclo recomendado:

1. Priorize páginas por volume e por valor (páginas de serviço, landing pages, checkout, contato).

2. Colete dados por pelo menos duas semanas, com volume suficiente por dispositivo.

3. Formule hipóteses no formato "se mudarmos X, esperamos Y porque observamos Z".

4. Implemente mudanças de baixo risco diretamente (corrigir elemento quebrado, mover um botão) e teste as de maior impacto com teste A/B.

5. Meça no GA4 e confirme no mapa de calor se o comportamento mudou.

6. Documente e repita.

Esse é o núcleo de um processo de otimização de conversão, e as ferramentas de comportamento são a sua principal fonte de hipóteses qualificadas.

Mapa de calor na criação e no redesign de sites

Além de otimizar páginas existentes, os dados de comportamento são insumo valioso antes de um redesign. Saber quais seções são vistas, quais elementos recebem cliques e onde os visitantes desistem evita repetir erros no site novo e permite priorizar o que funciona.

Na Redstack, projetos de criação de site em Wix Studio partem da análise do comportamento no site atual, quando ele existe, e já entregam o novo site com Clarity, GA4 e GTM configurados, para que a otimização comece desde o lançamento. É a lógica de tratar o site como produto que evolui com dados, e não como peça que se entrega e esquece, conforme detalhamos no artigo sobre desenvolvimento de sites modernos.

Ver o que o visitante vê

A diferença entre um site que converte e um que apenas existe está em detalhes que só aparecem quando você observa pessoas reais usando as páginas. O mapa de calor e as gravações de sessão são a forma mais barata e rápida de fazer isso em escala, e combinados ao GA4 criam um ciclo contínuo de melhoria.

Se o seu site recebe tráfego e converte pouco, e ninguém na equipe sabe explicar por quê, esse é o ponto de partida. A Redstack configura as ferramentas de análise, conduz a leitura dos dados e implementa as melhorias dentro de uma estratégia de Full Stack Marketing que conecta site, mídia e CRM. Fale com a nossa equipe e vamos descobrir o que os seus visitantes estão tentando dizer.