A agenda da HOTSAUCE está no ar! Junte-se a nós em Nova York de 2 a 3/11. Ingressos com 50% de desconto usando o código 2HOT

Aprender / Blog / Artigo

Voltar ao blog

Aprenda a configurar um mapa de calor gratuito baseado nos dados do Google Analytics

Se você veio até aqui para saber mais sobre os mapas de calor do Google Analytics, temos uma boa e uma má notícia para você.

A má notícia 😥: O Google descontinuou o seu plug-in gratuito de mapas de calor em 2017. Avaliações recentes do produto confirmam que ele não funciona mais, além de não ser compatível com o GA4.

A boa notícia 🤗: Existe um outro jeito de criar um mapa de calor gratuito, que consiste em combinar os dados do Google Analytics com a Hotjar—e nós podemos garantir que esse procedimento irá funcionar!

Última atualização

23 jan. 2024

Tempo de leitura

6 min.

Compartilhar

Este artigo explica em detalhes o que são os mapas de calor do GA, por que eles são úteis, e como configurá-los em cinco simples etapas.

Configure um mapa de calor hoje mesmo 🔥

Inscreva-se para fazer um teste gratuito da Hotjar, e use os mapas de calor para descobrir como os seus usuários se movem, onde clicam e como rolam a tela pelas páginas do seu site.

What is a Google Analytics heat map?

#A Google Analytics heatmap in action—the orange tags show click percentages
A Google Analytics heatmap in action—the orange tags show click percentages

A Google Analytics heat map is a visual representation of where visitors click on your website. It’s powered by data GA collects through its tracking snippet. Prior to 2019, GA users could generate a free heatmap using Google's heat map extension, Page Analytics (by Google).

Unfortunately, Page Analytics (by Google) was deprecated in 2017 and hasn’t been updated since 2019. There’s no support for GA4, and many users (including us!) struggle to get it to work, leading to several one-star reviews on the Chrome web store.

#Terrible reviews of the Google Analytics heatmap Chrome extension
Terrible reviews of the Google Analytics heatmap Chrome extension

Even if you do get it to work (good luck! 😮‍💨), GA heatmaps have limited functionality—you’d only get a basic click map with percentages, not the colorful data visualization you might be expecting.

#The difference between a dry Google Analytics heat map (L) and a colorful Hotjar move map (R)
The difference between a dry Google Analytics heat map (L) and a colorful Hotjar move map (R)

Why do GA users want to view heatmaps, anyway?

#Uma reunião de negócios importante para analisar um heatmap da Hotjar
Uma reunião de negócios importante para analisar um heatmap da Hotjar

Aside from being fun to look at, heatmaps give you a shareable and easy-to-understand visual overview of any website page’s performance. However you create them, heatmaps help you

  1. 👩‍💻 Quickly visualize user behavior

  2. 🖱 See what users click on (and ignore)

  3. 📈 Identify page areas with high engagement

  4. ⬇️ View how far users scroll down the page

  5. 🐞 Find and fix bugs and broken page elements

  6. 🤝 Get stakeholder buy-in for website optimizations

  7. 📊 Showcase results to managers and clients

  8. 💡 Generate ideas for conversion rate optimization (CRO)

  9. 🔎 Analyze A/B testing results and iterate improvements

Luckily, the end of Google Analytics heat maps doesn’t mean you have to miss out on these brilliant heatmap benefits. Hotjar Heatmaps is one of the world’s best-loved heatmap tools—and we let you generate as many heatmaps as you want. Read on to find out how. 👇

How to set up a free website heatmap in Hotjar

#A Hotjar scroll map (L) and click map (R)
A Hotjar scroll map (L) and click map (R)

Hotjar (that’s us, 👋 hello!) is a best-in-class product experience insights platform used on over 1 million websites. Aside from our advanced plans for growing businesses, Hotjar also offers a free-forever plan with unlimited heatmaps. You read that right: unlimited heatmaps.

By using Hotjar Heatmaps instead of Google’s old heat map tool, you’ll be able to do the following:

  • Automatically generate multiple types of heatmap at once. These include

    • Click maps: visualize the number of clicks on any element

    • Scroll maps: see how far down the page visitors scroll

    • Move maps: see how users move and hover their mouse as they browse

    • Rage click maps: quickly find broken or confusing elements

    • Engagement Zones maps: combined click, scroll, and move maps to show elements that attract the most attention and interaction

E como a Hotjar se integra ao Google Analytics (disponível no plano Business ou superior), você também pode segmentar os mapas de calor por eventos do GA.

Colocamos a Hotjar em todas as nossas páginas. Caso nossa taxa de conversão caia após uma alteração, nossos mapas de calor nos ajudarão a identificar e resolver o problema. A Hotjar ajudou a definir a estratégia do nosso site e a tornar a experiência ainda melhor para os nossos clientes.

Anna Grunanger
Head de Aquisição, Vimcar

Pronto para começar? Veja como configurar um mapa de calor da Hotjar em cinco simples etapas.

Etapa 1: Crie uma conta na Hotjar

Registre-se utilizando a sua conta do Google ou um endereço de e-mail. A Hotjar oferece um plano gratuito vitalício e avaliações gratuitas dos planos premium. Verifique se há um código de confirmação no seu e-mail para verificar o seu endereço, em seguida, defina uma senha segura e responda às perguntas de configuração da sua conta. Digite a URL do seu site (por exemplo, meuwebsite.com) e clique em 'Comece a usar a Hotjar'.

Etapa 2: adicione o código de rastreamento da Hotjar ao seu site e integre-o ao GA

A Hotjar rastreia os visitantes do seu site de forma semelhante ao Google Analytics. Você pode instalar o código de rastreamento da Hotjar de várias maneiras, inclusive por meio do Google Tag Manager e plug-in do WordPress ou copiando e colando manualmente o snippet JavaScript no <head> de cada página do site que você deseja rastrear.

A partir deste ponto, você também pode configurar a integração do Google Analytics (plano Business ou superior) para segmentar os mapas de calor por eventos do Google Analytics (mais sobre isso na Etapa 5 👇).

Etapa 3: abra a ferramenta Heatmaps

Depois que você tiver dado um tempo suficiente ao código de rastreamento para começar a rastrear alguns visitantes, clique na guia Heatmaps no menu de navegação à esquerda.

Get started with heatmaps

Etapa 4: insira a URL do seu mapa de calor, ou selecione-o na lista de páginas populares

Use a barra de pesquisa na parte superior da página Heatmaps para visualizar um mapa de calor para qualquer página do seu site, inserindo a URL ou selecionando uma das páginas populares sugeridas.

Continuous heatmaps

Etapa 5: alterne entre diferentes tipos de mapa de calor e filtre por eventos do Google Analytics

Clique nos ícones de tipo de mapa para alternar entre os diversos tipos de mapas de calor.

Como a Hotjar rastreia muitos dos mesmos dados que o Google Analytics, você pode filtrar os seus mapas de calor por várias métricas, incluindo intervalo de datas, dispositivo utilizado e página de saída, em qualquer plano.

E se você tiver integrado o GA4 com a Hotjar, também poderá filtrar os mapas de calor por qualquer evento do Google Analytics.

For more on interpreting heat map data, see our guide on how to analyze a heatmap

Para quais páginas devo gerar um mapa de calor?

#An ecommerce purchase report in Google Analytics showing a product with high unique page views but no purchases
An ecommerce purchase report in Google Analytics showing a product with high unique page views but no purchases

É aqui que o GA se torna muito útil ao ser combinado com a Hotjar: faça o login na sua conta do Google Analytics e procure por áreas de baixo desempenho—por exemplo, páginas com uma alta taxa de rejeição ou de saída, e baixas taxas de conversão. Dentro da Hotjar, gere mapas de calor nessas páginas para ver o que confunde os usuários e faz com que eles saiam: eles estão clicando com raiva em elementos quebrados? Não estão rolando a tela o suficiente para ver chamadas para ação (CTAs)?

Por outro lado, um mapa de calor nas suas páginas que apresentam maior conversão mostra quais elementos chamam mais a atenção do usuário, para que você possa fazer mais do que está funcionando bem.

Você também pode usar a integração oficial do Google Analytics com a Hotjar para transferir os eventos do GA diretamente para a Hotjar e filtrar por métricas como "adicionar_ao_carrinho" ou "iniciar_checkout" para visualizar rapidamente os mapas de calor dos usuários que convertem e os dos que não convertem.

Adicione insights qualitativos aos seus mapas de calor e aos dados do site no GA

O uso de mapas de calor juntamente com os dados do Google Analytics não melhorará a experiência do usuário (UX) em seu site da noite para o dia, mas irá indicar as principais mudanças que você pode fazer para chegar lá.

No entanto, os dados quantitativos de Web analytics, por si só, não o ajudarão a entender o que realmente motiva os seus clientes a escolherem você, a permanecerem fiéis e a recomendarem os seus produtos.

Obtenha uma visão completa ao combinar o GA e os mapas de calor com outras ferramentas da Hotjar como as gravações de sessões, pesquisas e entrevistas com usuários—todas disponíveis na plataforma Hotjar. Esse é o primeiro passo para tomar decisões de negócios orientadas por dados, para otimizar seu site e aumentar a sua receita, oferecendo experiências melhores do que as de seus concorrentes.

Configure um mapa de calor hoje mesmo 🔥

Inscreva-se para fazer um teste gratuito da Hotjar, e use os mapas de calor para descobrir como os seus usuários se movem, onde clicam e como rolam a tela pelas páginas do seu site.

Perguntas frequentes sobre os mapas de calor do Google Analytics

Related articles

Análise de comportamento

How to use the Hotjar-AB Tasty integration: 3 powerful use cases

Figuring out exactly what your users need involves two things: getting to know them and some old-fashioned trial and error.

With the Hotjar-AB Tasty integration, we’ve got you covered on both counts. Hotjar helps you understand user behavior, and AB Tasty lets you create experiments and personalizations on your site. Learn how these tools work together to create a digital experience that’s enjoyable for your users and excellent for your conversions.

Análise de comportamento

A melhor maneira de rastrear a profundidade de rolagem (Spoiler: não é o Google Analytics 4!)

Saber quais partes de uma página do site deixam seus visitantes entediados, e quais partes estimulam o seu engajamento e persuadem os visitantes do seu site pode ser um superpoder para profissionais de marketing digital, UX designers, equipes de produto e gerentes de E-commerce.

O rastreamento da profundidade de rolagem lhe dá esse poder, fornecendo insights acionáveis para melhorar a UX, revelando o comportamento de rolagem de tela dos visitantes do seu site.

Ayush Sood

Análise de comportamento

10 ways to improve your data analytics processes using Hotjar

As your team's data partner, you empower colleagues to make predictions and decisions by seeking out valuable insights into your users, products, or services. But who—or what—empowers you? What data analytics tools do you rely on to accomplish your day-to-day work? 

If you still need to find your go-to solution, try Hotjar.

Shadz Loresco