Learn / Blog / Article
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 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.
Last updated22 Mar 2022
This article will explain the benefits of website and product heatmaps, compare Google and Hotjar heatmaps—showing you how to use Google’s free Chrome extension to view them and a better way to create free heatmaps with Hotjar!
The benefits of using website and product heatmaps
Aside from looking sleek, website and product 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
Generate ideas for and monitor A/B tests
Find and fix bugs and broken page elements
What is a Google Analytics heat map?
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:
It works retroactively and uses your existing Google Analytics data
It works on any page with GA tracking code installed and doesn’t limit page views
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…
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.
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
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
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
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 to find out how Hotjar uses qualitative and quantitative data insights to help you create heatmaps of aggregate user behavior on your website.
How to set up a free website heatmap in Hotjar
Hotjar is a popular product experience (PX) insights tool currently used on over 900,000 websites. You can create up to three types of 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:
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 .jpg 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 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
Step 3: enable 'session capture'
Continuous heatmaps are generated from sessions. When 'session capture' is enabled, heatmaps are available automatically and they start collecting user behavior data. So, you first need to verify that 'session capture' is enabled.
You can verify this by visiting Heatmaps in your Hotjar Account and checking the traffic coverage widget in the top-right corner of the page.
If you hover over this widget, you will see more information about your daily 'session capture' settings, which will apply to both Hotjar Recordings and Continuous Heatmaps.
If session capture is not enabled, you will see an orange 'Session Capture Disabled' button at the top of the page, which takes you to the session capture configuration page.
Step 4: get started with continuous heatmaps
Click on Heatmaps in the left-hand navigation menu:
Step 5: enter the URL of your heatmap or select from the popular pages list
Using the search bar at the top of your Continuous Heatmaps page, you can view a heatmap for any page you've tracked by entering the URL here.
To learn more you can check out our article on URL filtering for continuous heatmaps.
You can also select a page from the ‘popular pages’ list. This list shows the pages across your site that have collected the highest amount of session data over the past 30 days.
Step 6: click view heatmap
Your heatmap should appear within 90 seconds or less.
To quickly view this page URL again in continuous heatmaps, use the ‘pin page’ feature by clicking on the small pin icon to the right of the URL:
And that’s it!
If you had trouble following the steps above to create a heatmap, our team has also made a video tutorial for its users, so you can see the process in action!
Which pages should I generate a heatmap for?
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’re doing it.
For example, pages with a high bounce rate and exit rate are great pages to create heatmaps for so you can find out what’s causing customer churn. 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.
Heat mapping in action: increase sales with Hotjar insights
By identifying website bugs that frustrated users and made them drop off before completing the checkout process, Wyldsson fixed its product problems, 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.
Use heatmaps to make product changes that improve UX
Installing a heatmap won’t suddenly improve user experience (UX) on your site, but it will point you toward the key changes you can make to get there.
By using qualitative and quantitative insights from your users, you can make data-driven business decisions to optimize your site, improve the user experience, and, ultimately, increase revenue.
FAQs about Google Analytics heat maps
9 user-driven tools and methods for ecommerce website analysis
When you think of analyzing your ecommerce site, you probably think about ecommerce tracking data like bounce and exit rates, average order value, checkout flow, and conversion rates, and maybe running an SEO audit and/or checking your site against competitors.
Hotjar vs Crazy Egg: which one is the best for your needs?
If you’re hoping to see a stand-off with Hotjar versus Crazy Egg, we must ask that you stand down right now. The Crazy Egg team has done a great job creating a product that businesses use for heatmaps, user session recordings, and A/B testing.
10+ web analysis tools to help you understand your users [including 5 Google Analytics alternatives]
If you want your visitors to keep returning to your website—to increase traffic, improve conversion rates, and ultimately grow revenue—you need to understand what’s happening when they reach your site.