Seus dados dizem que 173 visitantes chegam ao site, 98.8% saem sem fazer nada. Mas Google Analytics não mostra o “por quê”. Visitantes clicam em links? Rolam a página? Ficam presos em um campo de formulário? Heatmaps respondem essas perguntas mostrando visualmente como pessoas interagem com seu site. Um heatmap é um mapa de calor que mostra quais áreas do site recebem mais cliques (vermelho = muito clique, azul = pouco clique). Combinado com sessões gravadas (vídeos de como visitantes navegam), você obtém insights que transformam otimização de conversão em ciência, não adivinham.
Este guia cobre as duas melhores ferramentas: Hotjar (mais completo, pago) e Microsoft Clarity (grátis, da Microsoft). Você aprenderá como instalá-las, interpretar dados e usar insights para aumentar conversão. Com heatmaps, é comum descobrir que 40%+ dos cliques vão para elementos que não são clicáveis (frustração), ou que visitantes nem veem seu CTA button (está muito abaixo). Essas descobertas simples geram 5-20% aumento em conversão.
- Heatmap de Clique: Mostra onde visitantes clicam na página. Verde/vermelho indica concentração. Usa para otimizar CTA placement, descobrir clicks “inúteis”.
- Heatmap de Scroll: Mostra onde visitantes pararam de rolar. Vermelho = todo mundo vê. Azul = poucos veem. Guia onde colocar CTA (não coloque no fim se ninguém rola).
- Session Recordings: Vídeo de como visitante real navegou. Mostra frustração, confusão, hesitação. Invaluável para UX.
- Ferramentas: Hotjar (R$ 0-99/mês, completo), Microsoft Clarity (Grátis!), Crazy Egg (R$ 99+/mês, premium).
- Impacto Esperado: Típico: 5-15% aumento em conversão por mudanças baseadas em heatmaps. ROI: imediato.
Hotjar vs Microsoft Clarity: Qual Escolher?
| Feature | Hotjar | Microsoft Clarity | Vencedor |
|---|---|---|---|
| Preço | R$ 99-500/mês (ou grátis limitado) | Grátis para sempre | Clarity |
| Heatmaps (click, scroll, movement) | Sim, todos | Sim, click e scroll | Hotjar |
| Session Recordings | Sim (5000+ por mês com plano pago) | Sim (ilimitado) | Clarity |
| Surveys (feedback) | Sim (muito bom) | Não | Hotjar |
| Integração Google Analytics | Sim (com setup) | Sim (nativa) | Clarity |
| Interface/UX | Intuitiva, profissional | Simples, um pouco genérica | Hotjar |
| Ideal Para | Agências, análise profunda | Pequenas empresas, startups | – |
Recomendação para Atraca: Comece com Microsoft Clarity (grátis, sem risco). Se precisa de surveys ou análise muito profunda, migre para Hotjar depois.
Setup: Microsoft Clarity (Grátis)
Criar Conta e Gerar Código
- Acesse clarity.microsoft.com
- Clique “Sign up for free”
- Conecte com conta Microsoft ou Google
- Clique “New project”
- Nome: “Atraca Main Website”
- URL do site: atraca.com.br
- Clique “Create project”
- Copie o código JavaScript gerado
Instalar em WordPress
Opção 1: Plugin (Mais Fácil)
- WordPress → Plugins → Add New
- Pesquise “Microsoft Clarity”
- Instale plugin oficial da Microsoft
- Ative
- Vá para Settings → Microsoft Clarity
- Cole seu Project ID (você encontra em Clarity dashboard)
- Salve
Opção 2: Instalação Manual (Se não quer plugin)
- Theme → Theme Code Editor (ou functions.php child theme)
- Vá para header.php
- Cole o código dentro de `<head>`
- Salve
Verificar Setup
Volte para clarity.microsoft.com → seu projeto. Você deve ver “Recording” ativo em tempo real. Visite seu site e veja se uma gravação é capturada.
Interpretar Heatmaps de Clique
O Que Você Vê
Um mapa com cores: vermelho/laranja = muitos cliques; azul = poucos cliques. Útil para:
- Descobrir confusão: Se 30% clicam em elemento que não é clicável, há confusão. Mude para deixar claro que é/não é clicável.
- Validar placements: Se CTA button em verde (esperado, muitos cliques), design está bom. Se em azul, mova ou redesenhe.
- Encontrar oportunidades: Se visitantes clicam em área “vazia” (esperando link), crie link lá.
Interpretação Prática para Atraca
Veja seu heatmap de clique. Procure por:
- Seu CTA button (ex: “Download Guia”): Deve estar em vermelho/laranja. Se azul, é invisível ou pouco atrativo.
- Links internos: “Leia sobre Mautic” deve estar em cor quente. Se não está, considere destacar mais ou mover.
- Cliques em imagens: Se muitos clicam em imagem de um produto/guia, considere torná-la clicável.
- Footer cliques: Se muitos clicam no footer (newsletter subscribe, social links), indica que querem se conectar.
Interpretar Heatmaps de Scroll
O Que Você Vê
Um heatmap mostrando percentual de visitantes que viram cada parte da página. Vermelho no topo = todo mundo vê. Azul no fim = poucos veem.
Exemplo típico de blog (173 visitantes/mês, 98.8% bounce):
Topo (H1, primeiros 2 parágrafos): Vermelho (100% veem)
↓
Meio (conteúdo principal): Laranja (60-70% veem)
↓
Próximo à seção "FAQ": Amarelo (30-40%)
↓
Footer: Azul (5-10% veem)
Interpretação: Seu CTA nunca deve estar no footer. Se tem CTA importante, coloque antes de “FAQ” (80% veem) ou no topo (100%).
Usar Scroll Depth para Otimizar Layout
- 0-25% (Primeira dobra): Headline deve ser irresistível. Proposição de valor clara. CTA de “preview” (ex: “Baixar Guia Grátis”).
- 25-50%: Conteúdo principal. Prove seus pontos com evidência (citações, números).
- 50-75%: Aprofunde. Histórias, estudos de caso, comparações. Segundo CTA (ex: “Ler Case Study Completo”).
- 75-100%: Conclusão, próximos passos. Terceiro CTA (ex: “Agendar Consultoria”). FAQ. Links internos para posts relacionados.
Session Recordings: O Vídeo Mágico
O Que São
Vídeos anônimos de como visitantes reais navegam seu site. Você pode ver:
- Onde clicam
- Quanto tempo passam em cada seção
- Onde ficam “travados” (tentam clicar, não conseguem)
- Onde deixam a página (frustração, desinteresse?)
Como Assistir Recordings em Clarity
- Em clarity.microsoft.com, clique “Recordings”
- Veja lista de sessões gravadas
- Clique em uma para assistir
- A gravação mostra: mouse movement, cliques, scroll, formulários preenchidos
- Tome notas das observações interessantes
Padrões Comuns a Buscar
- Visitante adora conteúdo: Rola tudo, demora 5+ min na página. Quer aprofundar? Mude CTA para “Leia artigo completo” em vez de “Newsletter”.
- Visitante rápido, sai: Demora <10s, bounce direto. Headline ou proposta não ressoou. Teste nova headline.
- Tenta preencher form, desiste: Há campo com problema (label confuso, validação rejeitando). Simplifique form.
- Clica em elemento que não funciona: Seu site tem bug ou elemento confuso. Teste para garantir funciona.
Setup: Hotjar (Pago, Mais Poderoso)
Se resolver usar Hotjar (R$ 99-500/mês):
Criar Conta e Instalar
- hotjar.com → Sign Up
- Choose plan (Starter: R$ 99/mês com 1000 daily recordings)
- Install tracking code (similar a Clarity)
- Aguarde 30 min para primeiros dados
Recursos Extra de Hotjar
- Surveys (Feedback): Mostrar pergunta para visitante. Ex: “Por que você saiu?” com opções. Insights valiosos.
- Heatmap de Movimento: Além de clique/scroll, mostra movimento do mouse (onde pessoas olham).
- Form Analytics: Quais campos do formulário causam abandono? Quanto tempo leva preencher?
Casos de Uso Prático: De Dados para Ação
Caso 1: CTA Button Invisível
Descoberta Heatmap: Heatmap de clique mostra que “Download Guia” button está em azul (poucos cliques). Heatmap de scroll mostra que 70% veem tudo, mas button está em amarelo (30% veem).
Ação:
- Mova button para seção que 90%+ veem (redimensione ou coloque na dobra “hero section”)
- Aumente tamanho do button (40px de altura em vez de 20px)
- Mude cor para contraste (ex: se fundo é branco/cinza, use vermelho brilhante para button)
- Teste em 1 semana; espere aumento 20-30% em cliques
Caso 2: Form Abandonment
Descoberta Recording: 3 visitantes preenchem form. No campo “Telefone”, todos param e saem.
Ação:
- Campo de telefone estava com validação rigorosa (rejeita “11 99999-8888”, quer “+55 11 99999-8888”)
- Mude validação para aceitar múltiplos formatos
- Adicione placeholder mostrando formato esperado
- Teste; abandono deve cair 30-50%
Caso 3: Confusão no Layout
Descoberta Heatmap: 25% dos cliques vão para imagem de logo (topo), mas logo não é clicável.
Ação:
- Visitantes esperam que logo leve para homepage. Torne logo clicável.
- Ou, redesenhe para deixar claro que não é clicável (remova efeito “hover”)
Métricas para Monitorar
- Average Scroll Depth: Quanto da página visitantes veem. Meta: 60%+ (significa engajamento)
- Average Session Duration: Quanto tempo passa no site. Meta: 2+ minutos (indica interesse)
- Click-Through Rate (CTR): % que clica em CTA. Meta: 5%+ é bom. 10%+ é excelente.
- Bounce Rate (de recording): % que sai sem interagir. Deve estar <60%.
Perguntas Frequentes (FAQ)
Heatmaps rastreiam dados pessoais?
Tanto Hotjar quanto Clarity não rastreiam dados sensíveis (senhas, cartões de crédito) — eles automaticamente mascarar esses campos. Sessões são anônimas por padrão. LGPD-compliant se você ter política de privacidade clara.
Quantas sessões gravadas preciso analisar?
30-50 sessões já mostram padrões. Com 100+ sessões, padrões ficam muito claros. Como você tem 173 visitantes/mês, isso é atingível em 1-2 semanas.
Qual é o impacto típico de otimizações baseadas em heatmaps?
Média: 8-15% aumento em conversão. Alguns casos chegam a 30-40%, outros apenas 2-3%. Depende do problema descoberto e da mudança feita.
Hotjar vale os R$ 99/mês extra em relação a Clarity grátis?
Se você quer surveys, análise de form detalhado, e-commerce tracking avançado — sim. Se quer básico (cliques + scrolls + recordings) — Clarity é suficiente. Comece com Clarity, upgrade para Hotjar se necessário.
Devo mostrar heatmaps publicamente?
Não. Heatmaps são ferramentas internas de otimização. Mostrar publicamente pode parecer invasivo para visitantes. Mantém privado; use insights internamente.
