Heatmap Analysis

Heatmap Analysis

Esta skill capacita o Claude a atuar como um analista de Heatmap especialista, capaz de interpretar dados visuais de comportamento do usuário para identificar gargalos, otimizar interfaces e impulsionar métricas de negócios, integrando insights com o Google Analytics 4.

Keywords

Click Maps, Scroll Maps, Move Maps, Rage Clicks, Dead Clicks, Heatmap Tools, Hotjar, Microsoft Clarity, Smartlook, Fullstory, UX Optimization, Conversion Rate Optimization (CRO), Google Analytics 4 (GA4), User Behavior, Page Experience, Form Analytics, Session Recording, A/B Testing, User Journey, Content Engagement, Above the Fold.

Quick Start

1. Instalar Ferramenta: Selecionar e integrar o código de rastreamento de uma ferramenta de heatmap (ex: Hotjar, Microsoft Clarity) no Google Tag Manager (GTM) para todas as páginas do domínio www.seusite.com.br.
2. Priorizar Páginas: Identificar URLs com alta taxa de rejeição ou baixa conversão no GA4 (ex: /carrinho, /checkout, /landing-page-oferta-x).
3. Coletar Dados: Aguardar no mínimo 7 dias para coletar volume suficiente de sessões (idealmente >1000) nas páginas prioritárias.
4. Analisar Scroll Maps: Avaliar a porcentagem de rolagem para identificar onde os usuários param de interagir ou perdem interesse, focando em páginas de conteúdo longo ou landing pages.
5. Analisar Click Maps: Identificar elementos não clicáveis recebendo cliques (dead clicks) e áreas de baixo engajamento em botões de Call-to-Action (CTAs).

Core Workflows

Workflow 1: Otimização de Landing Pages com Heatmaps de Cliques e Scroll para CRO

Contexto: Uma landing page de um SaaS (https://www.meusite.com.br/lp-demo-gratis) possui uma taxa de conversão de cliques no botão "Solicitar Demo" de 2.5%, enquanto a média do setor é 5%. O objetivo é identificar barreiras de engajamento e otimizar a conversão.

Ferramentas: Hotjar (ou Microsoft Clarity) para heatmaps, Google Analytics 4 para métricas de funil e segmentação.

Passos Detalhados:

1. Configuração e Coleta de Dados:
   • Verificar se o código de rastreamento do Hotjar está ativo para https://www.meusite.com.br/lp-demo-gratis.
   • Assegurar que dados foram coletados por pelo menos 10 dias, com um volume mínimo de 1500 sessões.
2. Análise de Click Map:
   • Acessar o relatório de Click Map para a URL https://www.meusite.com.br/lp-demo-gratis.
   • Exemplo Concreto: Observar que 40% dos cliques na parte superior da página (acima da dobra) estão em uma imagem decorativa do produto que não é clicável (dead click), e apenas 15% dos cliques ocorrem no botão "Solicitar Demo" que está visível. Outra observação: um pequeno ícone de "saiba mais" abaixo do título recebe 8% dos cliques, desviando a atenção do CTA principal.
   • Insight: Usuários estão procurando interatividade em elementos não interativos e estão sendo distraídos por elementos secundários.
3. Análise de Scroll Map:
   • Acessar o relatório de Scroll Map para a mesma URL.
   • Exemplo Concreto: O mapa mostra que 70% dos usuários rolam apenas até 50% da página, e apenas 30% chegam ao formulário de contato, que está posicionado a 1200px da parte superior. A dobra média para desktop é de 650px e para mobile é de 400px.
   • Insight: Conteúdo crítico e o formulário de conversão estão abaixo da dobra para a maioria dos usuários, resultando em baixa visibilidade.
4. Correlação com GA4:
   • No GA4, navegar até Relatórios > Engajamento > Páginas e telas. Filtrar pela URL /lp-demo-gratis.
   • Verificar a Taxa de rejeição (alta, ex: 65%) e o Tempo médio de engajamento (baixo, ex: 45 segundos).
   • Segmentar por dispositivo (Relatórios > Tecnologia > Detalhes tecnológicos) e comparar scroll maps para desktop e mobile, buscando discrepâncias visuais ou de engajamento.
5. Identificação de Oportunidades e Hipóteses:
   • Problema 1 (Click Map): Distração por elementos não clicáveis e baixo engajamento no CTA principal.
     • Hipótese: Remover interatividade falsa na imagem do produto e aumentar o destaque visual do botão "Solicitar Demo" aumentará os cliques no CTA.
   • Problema 2 (Scroll Map): Conteúdo e formulário crítico abaixo da dobra.
     • Hipótese: Reposicionar o formulário de contato acima da dobra (ou em uma seção mais visível) e resumir o conteúdo inicial aumentará a visibilidade e a interação com o formulário.
6. Recomendação e Próximos Passos:
   • Criar duas variantes para um teste A/B:
     • Variante A: Otimização do Click Map (imagem não clicável, destaque do CTA).
     • Variante B: Otimização do Scroll Map (formulário acima da dobra).
   • Rodar testes A/B usando Google Optimize ou ferramenta similar, monitorando a taxa de cliques no CTA e a taxa de submissão do formulário como métricas primárias no GA4.

Workflow 2: Análise de Funil de Checkout com Gravações de Sessão e Heatmaps para Redução de Abandono

Contexto: Um e-commerce (www.minhaloja.com.br) tem uma taxa de abandono de 30% no estágio de "Informações de Pagamento" do checkout, conforme funil configurado no GA4. O objetivo é identificar pontos de atrito específicos.

Ferramentas: Smartlook (ou Fullstory) para gravações de sessão e heatmaps, Google Analytics 4 para métricas de funil e eventos.

Passos Detalhados:

1. Definição do Funil no GA4:
   • Confirmar o funil de eventos no GA4: add_to_cart > begin_checkout > add_shipping_info > add_payment_info > purchase.
   • Identificar que o evento add_payment_info para purchase tem a maior queda.
2. Configuração de Gravação e Heatmaps:
   • Assegurar que o Smartlook está configurado para gravar sessões e gerar heatmaps para as URLs do checkout, especialmente https://www.minhaloja.com.br/checkout/pagamento.
   • Garantir a coleta de dados por 14 dias, com foco em sessões que chegam ao estágio de add_payment_info.
3. Análise de Gravações de Sessão Segmentadas:
   • No Smartlook, filtrar sessões de usuários que visitaram https://www.minhaloja.com.br/checkout/pagamento mas não concluíram a compra (evento purchase).
   • Exemplo Concreto: Assistir a 20-30 gravações de sessões de abandono. Observar usuários tentando repetidamente inserir o número do cartão de crédito, clicando no botão "Finalizar Pedido" sem sucesso, ou rolando a página rapidamente após um erro de validação. Identificar "rage clicks" no botão "Finalizar Pedido" ou "u-turns" (voltar à página anterior).
   • Insight: Existem problemas na validação do formulário ou na comunicação de erros, causando frustração e abandono.
4. Análise de Click Map e Form Analytics:
   • Acessar o Click Map para https://www.minhaloja.com.br/checkout/pagamento.
   • Exemplo Concreto: O Click Map mostra muitos cliques em "dead areas" próximas aos campos de cartão de crédito, sugerindo que usuários estão tentando interagir com algo que não é um campo. O Form Analytics (se disponível no Smartlook) revela que o campo "Número do Cartão" tem uma taxa de abandono de campo de 18% e o campo "CVV" tem 12%.
   • Insight: A interface do formulário de pagamento pode ser confusa, e os usuários podem ter dificuldades em entender onde e como inserir as informações.
5. Análise de Scroll Map:
   • Acessar o Scroll Map para a mesma URL.
   • Exemplo Concreto: O mapa indica que a seção de "Termos e Condições" e o link para a "Política de Privacidade" (que são obrigatórios para finalizar a compra) estão abaixo da dobra para 60% dos usuários, com uma queda acentuada de visibilidade após 800px.
   • Insight: Informações cruciais ou elementos de confiança que poderiam reduzir a ansiedade do usuário estão sendo ignorados.
6. Identificação de Oportunidades e Hipóteses:
   • Problema 1 (Gravações/Click Map/Form Analytics): Frustração no preenchimento do formulário de pagamento e erros de validação.
     • Hipótese: Melhorar a validação em tempo real dos campos de cartão, fornecer mensagens de erro mais claras e otimizar o layout do formulário (ex: agrupar campos) reduzirá a taxa de abandono.
   • Problema 2 (Scroll Map): Baixa visibilidade de termos e links de privacidade.
     • Hipótese: Reposicionar os links de "Termos e Condições" e "Política de Privacidade" para uma área mais visível (acima da dobra ou próximo ao botão de finalizar pedido) aumentará a confiança e reduzirá o abandono.
7. Recomendação e Monitoramento:
   • Implementar as melhorias no formulário e no posicionamento dos links.
   • Monitorar a taxa de abandono do estágio 'add_payment_info' no GA4 e a taxa de conversão de compra pós-implementação. Comparar métricas de engajamento na página de pagamento no GA4.

Templates

Relatório de Análise de Heatmap e Recomendações

**Relatório de Análise de Heatmap - [Nome do Projeto]**

**Data da Análise:** 2024-07-25
**Analista:** Claude AI
**Ferramenta Utilizada:** Hotjar, Google Analytics 4

---

**1. URL Analisada:** https://www.meusite.com.br/lp-oferta-especial-julho
**Período de Dados:** 2024-07-01 a 2024-07-24 (24 dias)
**Volume de Sessões:** 3.870

**2. Problemas Identificados (Heatmap + GA4):**

*   **Tipo de Heatmap:** Click Map
    *   **Evidência:** 35% dos cliques na dobra superior ocorrem em uma imagem do produto que não é clicável. O CTA principal "Baixar Ebook Grátis" recebe apenas 10% dos cliques nessa área.
    *   **Correlação GA4:** Baixa taxa de cliques no evento `generate_lead` (1.2%) e alta taxa de rejeição (58%) para esta página.
*   **Tipo de Heatmap:** Scroll Map
    *   **Evidência:** 68% dos usuários rolam apenas até 60% da página, e o formulário de download do ebook está posicionado a 1100px (abaixo da dobra para a maioria dos dispositivos).
    *   **Correlação GA4:** Tempo médio de engajamento de 55 segundos, indicando que muitos usuários não interagem com o conteúdo completo.
*   **Tipo de Heatmap:** Move Map (opcional)
    *   **Evidência:** Movimento intenso do mouse sobre um bloco de texto com bullet points que lista benefícios, mas sem interatividade clara.
    *   **Correlação GA4:** Não há evento de clique configurado para este bloco, impossibilitando medição direta no GA4.

**3. Recomendações e Hipóteses:**

*   **Recomendação 1 (Click Map):** Remover o link falso da imagem do produto ou torná-la clicável para uma página de detalhes. Aumentar o contraste e o tamanho do botão "Baixar Ebook Grátis".
    *   **Hipótese:** Otimizar a clareza do CTA principal e remover distrações não interativas aumentará a taxa de cliques no CTA em 20%.
*   **Recomendação 2 (Scroll Map):** Reposicionar o formulário de download do ebook para a metade superior da página (entre 500px e 700px) e resumir o conteúdo introdutório para priorizar a conversão.
    *   **Hipótese:** Aumentar a visibilidade do formulário de conversão resultará em um aumento de 15% na taxa de preenchimento.
*   **Recomendação 3 (Move Map):** Transformar os bullet points de benefícios em um acordeão ou seção expansível para engajar mais usuários ou adicionar um CTA secundário.
    *   **Hipótese:** Adicionar interatividade aos benefícios pode aumentar o tempo de engajamento na página em 10 segundos.

**4. Prioridade das Ações:**

1.  Otimização do CTA principal e remoção de "dead clicks" (Alta)
2.  Reposicionamento do formulário (Alta)
3.  Adição de interatividade nos benefícios (Média)

**5. Próximos Passos:**

*   Criar variantes A/B para as recomendações 1 e 2.
*   Configurar testes A/B no Google Optimize.
*   Monitorar eventos de `form_submit` e `generate_lead` no GA4.

---

Briefing para Teste A/B Baseado em Heatmap

**Briefing de Teste A/B - Otimização de Página de Produto**

**Data:** 2024-07-25
**Responsável:** Equipe de CRO

---

**1. URL Alvo do Teste:** https://www.minhaloja.com.br/produto/tenis-corrida-x
**Período do Teste:** 3 semanas

**2. Problema Identificado (Evidência Heatmap + GA4):**

*   **Heatmap (Click Map):** O botão "Adicionar ao Carrinho" (CTA principal) tem uma taxa de cliques de 18%, enquanto a imagem de "Avaliações de Clientes" (elemento secundário) recebe 12% dos cliques e desvia a atenção. Há também "rage clicks" no botão de seleção de tamanho, indicando dificuldade de uso.
*   **Heatmap (Scroll Map):** A seção de "Produtos Relacionados" e "FAQ" estão abaixo da dobra para 75% dos usuários, mas o scroll map mostra que o engajamento cai drasticamente após a visualização da descrição do produto (queda de 50% de usuários entre 800px e 1200px).
*   **GA4:** Taxa de conversão de "Adicionar ao Carrinho" de 8.5%, abaixo da média de 12% para produtos similares. Taxa de saída de 25% na página do produto.

**3. Hipótese do Teste:**

*   **Hipótese Central:** Aumentar o destaque e a usabilidade do CTA principal "Adicionar ao Carrinho" e melhorar a experiência de seleção de tamanho, combinado com um posicionamento estratégico de informações complementares, aumentará a taxa de "Adicionar ao Carrinho" e reduzirá a taxa de saída.

**4. Variantes Propostas:**

*   **Variante Original (Controle):** Layout atual da página de produto.
*   **Variante A (Otimização CTA e Usabilidade):**
    *   Aumentar o tamanho e contraste do botão "Adicionar ao Carrinho".
    *   Remover destaque visual da imagem de "Avaliações de Clientes" (ou movê-la).
    *   Redesenhar o seletor de tamanho para ser mais intuitivo (ex: botões maiores, feedback visual).
*   **Variante B (Otimização de Conteúdo e Scroll):**
    *   Implementar todas as mudanças da Variante A.
    *   Mover a seção "FAQ" para acima da dobra, próxima à descrição do produto.
    *   Reduzir o número de "Produtos Relacionados" visíveis inicialmente para evitar sobrecarga.

**5. Métricas Primárias de Sucesso (Monitoradas no GA4):**

*   Taxa de Conversão do evento `add_to_cart`.
*   Taxa de saída da página `/produto/tenis-corrida-x`.

**6. Métricas Secundárias:**

*   Taxa de engajamento (eventos de clique no seletor de tamanho).
*   Tempo médio de engajamento na página.
*   Scroll Depth (porcentagem de rolagem).

---

Checklist

• O código de rastreamento da ferramenta de heatmap (ex: Hotjar, Clarity) está instalado corretamente via GTM em todas as páginas-chave.
• Volume de tráfego suficiente (mínimo 1000 sessões, idealmente >2500) coletado para garantir significância estatística.
• Análise de Click Maps realizada para identificar "dead clicks", "rage clicks" e áreas de alto/baixo engajamento.
• Análise de Scroll Maps para avaliar a profundidade de rolagem e a visibilidade de conteúdo, CTAs e formulários críticos.
• Análise de Move Maps (se disponível) para entender o padrão de atenção e movimento do mouse na página.
• Correlação dos insights do heatmap com métricas de engajamento do GA4 (ex: taxa de rejeição, tempo médio na página, eventos de interação).
• Segmentação dos heatmaps por tipo de dispositivo (desktop, mobile, tablet) e/ou fonte de tráfego para identificar padrões específicos.
• Gravação de sessões (se disponível) para contextualizar padrões de heatmap, observar frustrações e pontos de atrito em tempo real.
• Geração de hipóteses claras e testáveis para otimização (ex: teste A/B) baseadas nos dados do heatmap.
• Documentação das descobertas, insights e recomendações em um relatório estruturado.
• Plano de ação definido para implementar as otimizações e monitorar os resultados no GA4.
• Avaliação da conformidade com privacidade de dados (GDPR/LGPD) na coleta de dados de heatmap e gravação de sessões.

Métricas de Referência

Erros Comuns

1. Analisar Heatmaps com Baixo Volume de Dados: Conclusões baseadas em poucos dados (ex: <500 sessões por URL) são estatisticamente irrelevantes e podem levar a otimizações ineficazes.
   • Como evitar: Garanta um período de coleta de dados de pelo menos 7 a 14 dias para cada URL analisada, visando um mínimo de 1000 sessões. Utilize o GA4 para monitorar o volume de tráfego antes de iniciar a análise de heatmap.
2. Não Segmentar a Análise por Dispositivo: O comportamento do usuário e o layout visual variam drasticamente entre desktop, tablet e mobile. Um heatmap para desktop não reflete a experiência mobile.
   • Como evitar: Sempre segmente os heatmaps por tipo de dispositivo. Ferramentas como Hotjar e Clarity permitem essa segmentação. Considere que a dobra e a forma de interação são diferentes para cada plataforma.
3. Focar Apenas em Cliques e Ignorar Scrolls/Movimentos: Apenas analisar onde os usuários clicam é insuficiente. A profundidade de rolagem (scroll) e o movimento do mouse (move maps) fornecem insights cruciais sobre atenção e engajamento com o conteúdo.
   • Como evitar: Combine a análise de Click Maps com Scroll Maps para entender o que é visto e ignorado. Use Move Maps para inferir áreas de atenção e gravação de sessões para contextualizar movimentos e frustrações.
4. Não Correlacionar com Métricas Quantitativas do GA4: Heatmaps mostram o "onde" e "como", mas não o "quantos" ou "porquê" em escala. Sem o GA4, é difícil quantificar o impacto de um problema de UX em métricas de negócio.
   • Como evitar: Sempre relacione os insights visuais do heatmap com métricas de engajamento (taxa de rejeição, tempo na página), eventos (cliques em CTAs, preenchimento de formulários) e conversões no GA4 para validar a magnitude do problema e o impacto potencial da solução.

Dicas Avançadas

1. Segmentação de Heatmaps por Eventos ou Dimensões Personalizadas do GA4: Use as funcionalidades de integração da sua ferramenta de heatmap para filtrar mapas por eventos específicos (ex: usuários que adicionaram um item ao carrinho mas não compraram) ou dimensões personalizadas do GA4 (ex: usuários logados, clientes recorrentes, usuários que vieram de uma campanha específica). Isso revela padrões de comportamento muito específicos para públicos-alvo relevantes.
   • Exemplo Prático: No Hotjar, crie um filtro para sessões onde o evento add_to_cart foi acionado, mas o evento purchase não foi, e então analise o click map da página de checkout para identificar onde esses usuários frustrados clicam.
2. Análise de "Rage Clicks" e "Dead Clicks" em Gravações de Sessão: Ferramentas avançadas de heatmap com gravação de sessão (ex: Fullstory, Smartlook) identificam automaticamente "rage clicks" (cliques repetidos e rápidos na mesma área) e "dead clicks" (cliques em elementos não interativos). Analisar as gravações de sessões com esses marcadores contextualiza a frustração do usuário e aponta diretamente para problemas de usabilidade ou bugs.
   • Exemplo Prático: Filtrar gravações de sessão no Smartlook para "rage clicks" na página de produto https://www.minhaloja.com.br/produto/camiseta-x. Observar que usuários clicam repetidamente na imagem principal do produto, esperando uma galeria de imagens que não existe ou não é óbvia.
3. Heatmaps de Formulário (Form Analytics): Para formulários complexos (checkouts, cadastros), vá além dos heatmaps de clique/scroll e utilize as funcionalidades de Form Analytics da sua ferramenta. Analise métricas como tempo gasto por campo, abandono de campo, campos com maior erro e reenvios. Isso revela exatamente onde os usuários enfrentam dificuldades no preenchimento.
   • Exemplo Prático: No Hotjar Form Analytics para o formulário de checkout, identificar que o campo "CEP" tem uma taxa de abandono de 25% e um tempo médio de preenchimento de 15 segundos, sugerindo um problema de validação ou falta de auto-preenchimento.
4. Teste A/B com Comparação de Heatmaps: Ao rodar testes A/B baseados em insights de heatmap, utilize ferramentas que permitam comparar os heatmaps das diferentes variantes (controle vs. variante A). Isso oferece uma poderosa visualização de como as mudanças implementadas alteram o comportamento de clique e rolagem, complementando as métricas de conversão do GA4.
   • Exemplo Prático: Após um teste