google analytics heatmap

How to set up a free Google Analytics heat map

February 12, 2021 by the Hotjar team

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

The bad news: Google stopped supporting its heatmap add-on in 2017, and recent reviews confirm that it doesn’t work anymore for a lot of users.

The good news: there's another way for you to get a free heatmap using Hotjar, and we guarantee it will work.

What is a Google Analytics heat map?

google analytics heatmap in action

Google offers an official heatmap Chrome browser extension called Page Analytics (by Google). Once installed, it shows you where visitors click on your web pages.

The main benefits of Google’s official heatmap extension are:

  1. It works retroactively and uses your existing Google Analytics data
  2. It works on any page with GA tracking code installed and doesn’t limit pageviews
  3. You can segment visitors and view heatmaps using real-time traffic

But you might run into some issues; as we mentioned, recent reviews tell us the GA heatmap extension stopped working for some users. You may be one of the lucky ones… but we wouldn’t bet on it.

💡 You should know…

page analytics by google reviews

Google’s heat map Chrome extension was deprecated in 2017 and no longer receives updates. There’s no support, and many users (including us!) struggle to get it to work, leading to a lot of 1-star reviews on the Chrome web store.

If you do get it to run (installation instructions below), you’ll only see a basic click map with percentages—not the colorful heatmap visualization you might be expecting.

google vs hotjar heatmap
The difference between a Google Analytics heatmap (L) and a Hotjar click heatmap (R)

How to set up a free Google Analytics heat map in Chrome

The Page Analytics Chrome Extension still works for some users in 2021, but there are no guarantees that it will continue to work as it hasn’t been updated or supported by Google since 2017.

See if it works for you: here’s how to view your free GA heatmap in three steps.

Step 1: install the Page Analytics Chrome extension

google analytics heat map chrome extension

While on Chrome, visit the official Page Analytics (by Google) page and click “Add to Chrome” to install the extension to your browser.

Step 2: log into your GA account

google analytics logged in chrome

Log into your Google Analytics account and click the Page Analytics icon in the Chrome toolbar. You’ll see a green tick if you’re logged in correctly.

Step 3: browse your website to view click data

activate google analytics heatmap

Go to your website's homepage, and you should see a Google Analytics overlay detailing the pageviews, bounce rate, and other analytics metrics.

Click the “show bubble” icon, and you’ll see ‘bubbles’ indicating the percentage of users who clicked there. Click the color icon to turn bubble colors on and off.

Click on any ‘bubble’ on the page, and a box will display the number of clicks to that element.

Navigate to any page on your site to view click metrics for the specific page. You can change the timeframe by clicking the dropdown date area in the overlay bar.

And that’s it: you can now view a free basic click map on your website.

If it works, well done!

If not, there’s no customer support and, aside from logging out and in again multiple times, there’s not a lot you can do about it (hence those 1-star reviews).

If you’d rather save yourself some time and create shareable visual heatmaps that show actual clicks, taps, and scrolling on both desktop and mobile, we think Hotjar does a much better job. (Keep reading.)

How to set up a free website heatmap in Hotjar

what is a heatmap
A Hotjar scroll map (L) and click map (R)

Hotjar is a popular web analytics tool, currently used on over 900,000 websites. You can create up to three snapshot heatmaps on the basic plan (free forever).

By using Hotjar heatmaps instead of Google’s heat map tool, you’ll be able to:

1) Automatically generate three types of heatmap at once:

  • Scroll maps: see how far down the page users scroll, and the average fold position
  • Click maps: see where visitors click and tap the page
  • Move maps: see how users move their mouse as they browse

2) View heatmaps segmented by desktop or mobile traffic

3) Share a link to any heatmap with teams and customers

4) Download and export heatmap data as an image or .csv file for further analysis

Here’s how to set up a Hotjar heatmap in under five minutes.

Step 1: sign up for Hotjar

sign up for hotjar

Sign up with your Google account or email address. 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 code to your website

install hotjar tracking code

You can install Hotjar’s code in several ways, including via Google Tag Manager, WordPress plugin, or manually copy/pasting the javascript snippet into the <head> of every website page you want to track.

Step 3: Create a new heatmap

create new heatmap

From the main Hotjar dashboard, select “Heatmaps” from the left menu, then click the “New Heatmap” button.

hotjar heatmap format

Give your heatmap a descriptive name (e.g. “homepage heatmap”), then select a heatmap format (manual or continuous). As a basic (free) customer, you can get a manual snapshot of up to 1,000 pageviews based on a sample of your page’s traffic.

enter heatmap page

Enter the URL of the page you wish to analyze, and click the “Create Heatmap” button to finish.

create heatmap

You’ll need to wait for some website traffic before Hotjar starts recording interactions, but your new heatmap will be visible from the first recorded pageview.

click map dashboard
The Hotjar heatmap dashboard. Click to watch a live demo!

💡 Which pages should I put a heatmap on?

GA bounce rate

This is where GA can help: pairing Google Analytics with Hotjar heatmaps will let you see both what visitors are doing on your website and how they are doing it.

For example, pages with a high bounce rate and exit rate are a great place to put heatmaps so you can find out what’s causing visitors to leave. On the flip side, a heatmap on your best-converting pages can show you which calls to action (CTA) drive success.

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

The benefits of using website heatmaps

benefits of using heatmaps

Aside from looking sleek, website heatmaps give you a shareable and easy-to-understand visual overview of how any page on your website is performing.

Heatmaps can help you:

  • Quickly visualize user behavior
  • See what users click on (and ignore)
  • View how far users scroll down the page
  • Get stakeholder buy-in for website optimization
  • Showcase results to managers and clients
  • Dig into A/B testing results (use the Hotjar and Google Optimize integration to make this even easier)
  • Generate ideas for and monitor A/B tests
  • Find and fix broken page elements

There are many potential use cases—but, in short, heatmaps are a diagnosis tool: installing a heatmap won’t suddenly improve user experience on your site, but it will point you toward the key changes you can make to get there.

By using real website data from your users, you can make data-driven business decisions to optimize your site, improve the user experience (UX), and, ultimately, drive revenue growth.

Heat mapping in action:

heatmap example

Plant-based ecommerce site Wyldsson used heatmaps and session recordings to optimize and troubleshoot their newly re-designed website, which resulted in a 30% increase in sales.

By identifying website bugs that frustrated users and made them leave before completing the checkout process, Wyldsson fixed the issues, improved UX, and achieved impressive revenue growth.

If you want to see some of the real heat maps we’ve used on this very website, have a look at these three heatmap examples.

FAQs about Google Analytics heat maps

Heatmaps (or heat maps) are visualizations of website user data, usually depicted by color from hot (red) to cold (blue). A website heatmap displays visitor interaction on any page, including clicks, taps, and scrolling.

You cannot view a heatmap directly in Google Analytics (not even in the latest version from late 2020, GA4). However, a free Chrome analytics extension called Page Analytics (by Google) will generate click maps from your Google Analytics data.

The Google Analytics heatmap extension was deprecated in 2017 and isn’t guaranteed to work. Try reading Google’s archived support page for troubleshooting, or use an updated and supported free heatmap tool like Hotjar Heatmaps.

The most popular free heatmap tool is Hotjar, which offers a basic, free forever plan, and is used on over 900,000 websites in 180+ countries. The free plan is limited to 3 heatmaps and 2,000 pageviews/day.

The free Page Analytics (by Google) Chrome extension will turn your Google Analytics data into a heatmap, but it hasn’t been updated since 2017, and many users struggle to get it to work.

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!

using heat maps to improve your website ux
Screen Shot 2018-03-27 at 16.30.26
the Hotjar team

Almost 150 Hotjarians in 24 countries with 1 goal: to give you and your team the insights you need to create experiences your users love.