New: flexible, templated dashboards for more control. Meet Dashboards

Learn / Blog / Article

Back to blog

How to set up a free Google Analytics heat map

If you’ve come here to learn more about Google Analytics heat maps, we have good and bad news for you.

The bad news 😥: Google deprecated its free heatmap add-on in 2017. Recent reviews confirm it no longer works and is not compatible with GA4. 

The good news 🤗: there's another way for you to generate a free heatmap by combining Google Analytics data with Hotjar—and we guarantee this one will work.

Last updated

23 Jan 2024

Reading time

5 min

Share

This article takes you through what GA heatmaps are, why they’re useful, and how to set one up in five simple steps.

Set up a heatmap today 🔥

Sign up for a free Hotjar trial and use heatmaps to find out how users move, click, and scroll through your pages.

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?

#A very important business meeting centered around a Hotjar heatmap
A very important business meeting centered around a Hotjar heatmap

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

  • View heatmaps segmented by visitor data like country, device, and traffic source

  • Share a link to any heatmap with your colleagues, stakeholders, and clients

  • Download and export heatmap data as an image or .jpg file for further data analysis

  • Click through to view session recordings of individual user browsing journeys

And since Hotjar integrates with Google Analytics (Business plan and higher), you can also segment heatmaps by GA events.

We put Hotjar on all our pages. If our conversion rate drops after a change, our heatmaps help us identify and solve the issue. Hotjar has helped define our website strategy and make the experience even better for our customers.

Anna Grunanger
Head of Acquisition, Vimcar

Ready to get started? Here’s how to set up a Hotjar heatmap in five steps.

Step 1: sign up for Hotjar

Sign up with your Google account or email address. Hotjar offers a free-forever plan and free trials for premium plans. Check your email for a confirmation code to verify your address, then set a secure password and answer the setup questions. Enter your site URL (e.g. mywebsite.com) and click ‘Start Using Hotjar’.

Step 2: add Hotjar’s tracking code to your website and integrate it with GA

Hotjar tracks your website visitors in a similar way to Google Analytics. You can install Hotjar’s tracking code in several ways, including via Google Tag Manager and WordPress plugin, or by manually copy/pasting the JavaScript snippet into the <head> of every website page you want to track.

At this point, you can also set up the Google Analytics integration (Business plan and higher) to segment heatmaps by Google Analytics events (more on this in Step 5 👇).

Step 3: open the Heatmaps tool

Once you’ve given the tracking code time to track some visitors, click on the Heatmaps tool in the left-hand navigation menu.

Get started with heatmaps

Use the search bar at the top of the Heatmaps page to view a heatmap for any page on your site by entering the URL or selecting from the suggested popular pages.

Continuous heatmaps

Step 5: toggle between different heatmap types and filter by Google Analytics events

Click the map type icons to toggle between each heatmap type. 

Since Hotjar tracks a lot of the same data as Google Analytics, you can filter your heatmaps by multiple metrics, including date range, device, and exit page on any plan.

And if you’ve integrated GA4 with Hotjar, you can also filter heatmaps by any Google Analytics event.

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

Which pages should I generate a heatmap for?

#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

This is where GA comes in handy when used alongside Hotjar: log into your Google Analytics account and look for areas of low performance—for example, pages with a high bounce rate or exit rate and low conversion rates. In Hotjar, generate heatmaps on these pages to see what confuses users and causes them to leave: are they rage-clicking on broken elements? Not scrolling far enough to see calls to action (CTAs)?

On the flip side, a heatmap on your best-converting web pages shows you which elements attract attention, so you can do more of what works. 

You can also use the official Google Analytics and Hotjar integration to pass GA events directly to Hotjar and filter by metrics like ‘add_to_cart’ or ‘begin_checkout’ to quickly view heatmaps of users who do and don’t convert.

Add qualitative insights to your heatmaps and GA website data

Using heatmaps alongside Google Analytics data won’t improve user experience (UX) on your site overnight, but it will point you toward the key changes you can make to get there. 

However, quantitative web analytics data alone won’t help you understand what really motivates your customers to choose you, stay loyal, and recommend your products. 

Get the full picture by combining GA and heatmaps with other Hotjar tools like session recordings, surveys, and user interviews—all available within the Hotjar platform. It’s your first step to making data-driven business decisions to optimize your site and increase revenue by delivering better experiences than your competitors.

Set up a heatmap today 🔥

Sign up for a free Hotjar trial and use heatmaps to find out how users move, click, and scroll through your pages.

FAQs about Google Analytics heat maps