# Heatmap Analysis > Heatmap Analysis — Skill especializada para análise de mapas de calor, otimizando a experiência do usuário e conversões através da visualização do comportamento no site. - Skill: `kursku/heatmap-analysis` (Agent Skill) - Install (CLI): `npx skillmds@latest add kursku/heatmap-analysis` - Raw SKILL.md: https://api.skillmd.com/api/skills/kursku/heatmap-analysis/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Data & Analytics - License: MIT - Author: kursku (https://skillmd.com/u/kursku) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/kursku/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 - [x] O código de rastreamento da ferramenta de heatmap (ex: Hotjar, Clarity) está instalado corretamente via GTM em todas as páginas-chave. - [x] Volume de tráfego suficiente (mínimo 1000 sessões, idealmente >2500) coletado para garantir significância estatística. - [x] Análise de Click Maps realizada para identificar "dead clicks", "rage clicks" e áreas de alto/baixo engajamento. - [x] Análise de Scroll Maps para avaliar a profundidade de rolagem e a visibilidade de conteúdo, CTAs e formulários críticos. - [x] Análise de Move Maps (se disponível) para entender o padrão de atenção e movimento do mouse na página. - [x] 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). - [x] Segmentação dos heatmaps por tipo de dispositivo (desktop, mobile, tablet) e/ou fonte de tráfego para identificar padrões específicos. - [x] Gravação de sessões (se disponível) para contextualizar padrões de heatmap, observar frustrações e pontos de atrito em tempo real. - [x] Geração de hipóteses claras e testáveis para otimização (ex: teste A/B) baseadas nos dados do heatmap. - [x] Documentação das descobertas, insights e recomendações em um relatório estruturado. - [x] Plano de ação definido para implementar as otimizações e monitorar os resultados no GA4. - [x] 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 | Métrica | Benchmark (Exemplo E-commerce) | Meta (Exemplo E-commerce) | |:--------------------------------|:-------------------------------|:------------------------------| | Taxa de Cliques em CTA Principal | 10-15% | >20% | | Porcentagem de Rolagem (75%) | >50% | >65% | | Taxa de Abandono de Formulário | 20-30% | <15% | | Rage Clicks por Sessão | <0.5 cliques | 0 cliques | | Taxa de Conversão (Página) | 2-5% | >6% | | Tempo Médio na Página | 90-120 segundos | >150 segundos | --- ## 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