This guide explains the different types of heatmap analytics for your website. It covers how to set one up, whether Google Analytics can do it, how to read the results with care, and what a heatmap can't tell you.

What website heatmap analytics shows

A website heatmap is a picture of how visitors use one page.

You install a script on your website, which records a range of visitor interactions. Clicks are the most obvious interaction, but there’s also scrolling and mouse movements. Your heatmap tool then collates this information and displays it over an image of the page, so you can see which areas of the page get the most attention. By looking at activity across multiple visits, marketers can spot patterns they might miss by watching visitors individually.

Colors make those patterns easier to see. Warmer shades like red and orange indicate more activity than elsewhere on the same page, while cooler blues indicate fewer interactions. Each heatmap covers one page at a time, and the colors are relative to activity on that page.

Website heatmap analysis works alongside conventional web analytics. Your regular reports show how many people visit your website and the pages they browse. You should also be able to see the source of that traffic. Website metrics give you an overview of traffic across the site, but heatmaps let you look more closely at individual pages to see where visitors click and how far they scroll.

Types of website heatmaps

Different types of website heatmaps answer different questions. Choose the one that measures the behavior you want to investigate.

Click heatmaps

A click heatmap shows where visitors click or tap on a web page. It adds up clicks across multiple visits, using colors to indicate which areas attract the most activity. You can use a website click heatmap to see whether visitors interact with the elements you want them to.

You can use this information to drive user experience changes. For example, if lots of visitors click on a plan name on your pricing page, even though it isn't a link, they may be expecting more information about what's included in that plan. You could make the plan name clickable, taking visitors to a page with more detail. Alternatively, add the missing information to your pricing page.

Scroll heatmaps

Scroll heatmaps, also called scroll maps, show how far visitors travel down a page before they stop scrolling. A scroll map of your website can help you understand whether the information you want your visitors to see is positioned where they’re likely to see it.

For example, you have a long landing page promoting a software demo, but your scroll heatmap shows that most visitors stop well before reaching the demo button at the bottom. You could move the button higher up the page so more people see it, or shorten the content above it so visitors don't have to scroll as far to reach the call to action.

Before you move anything, check whether the visitors who stopped early still converted. A short scroll isn't a problem if the top of the page already answers their question. Moving the button isn't the only fix either: you can repeat it further up, or add links that let visitors jump to the section they want. On our own blog, readers use the table of contents far more often than they open chat, which shows how much people prefer jumping to scrolling.

Move heatmaps

Move heatmaps, also called hover or movement maps, show where visitors move their mouse around a page. Mouse movement can give you clues about what people are looking at, although the connection is far from exact. Because phones have no mouse cursor, these maps only cover desktop visits.

This type of heatmap could help, for example, if visitors leave their cursor over the security section of your demo page. That can hint that visitors want reassurance before they share their details. Check a few recordings before you act: a resting cursor is often just a resting hand. Of all the heatmap types, move maps are the weakest evidence.

Attention heatmaps

Attention heatmaps show how long different sections of a page remain on visitors' screens. If visitors spend longer on the case study section of your landing page while scrolling quickly past the feature list above it, it might suggest the case study deserves a more prominent position.

Long attention isn't always interest. A section people look at without clicking can be one they don't understand. Compare it with the click heatmap: attention plus clicks suggests interest, and attention with no clicks suggests confusion.

Area and conversion maps

Microsoft Clarity also offers area maps and conversion maps.

Area maps count clicks on elements within a selected area. On a pricing page, you could compare clicks across different plans and make popular options easier to explore. Conversion maps show which clicks are associated with ecommerce purchases and purchase values. They're built for online stores. If your site generates leads or trials rather than sales, area maps will tell you more. A B2B supplier could use this type of heatmap to see which product-page elements are associated with purchases, then adjust their placement.

Why use heatmaps

Heatmaps help you see how visitors use your website and where you might improve their experience. You may think your most important links are easy to find, but a heatmap could reveal that visitors consistently overlook them. You can also spot clicks on images or other page elements that aren't interactive, suggesting that visitors expect something to happen when they click. Heatmaps also help you assess the placement of calls to action. If visitors rarely scroll far enough to reach an important button, you might want to move it higher up the page.

It's also useful to compare how visitors behave on different devices. Mobile and desktop layouts can vary considerably, and a page that works well on a large screen may be harder to use on a phone. Reviewing the heatmaps separately can help you identify where visitors run into problems.

On B2B pages with modest traffic, they're often the quickest evidence you'll get. An A/B test on a pricing page can take months to reach a clear result. A heatmap shows you within weeks where visitors get stuck.

If you work at an agency, you can show clients how visitors interact with a page before recommending changes, so the change is based on what visitors did, not on opinion.

Heatmaps and session recordings

Heatmaps and session recordings give you different views of how people use your website. A heatmap collects activity from many visits and shows it in one picture, making it easier to spot patterns. A session recording lets you replay an individual visit and watch what happened as someone moved through a page. If a heatmap shows lots of clicks on an unexpected part of your pricing page, a recording might help you understand what visitors were trying to do. You can see what happened before and after the click, giving you more context about their behavior.

Use them together when you're investigating a problem on an important page. Start with the heatmap to find where visitors are behaving unexpectedly, then watch a handful of recordings from that page. Watching recordings takes time, so knowing which interactions to investigate saves you sitting through hours of footage. Because a recording replays one person's visit, what it captures matters for privacy; the consent section below covers that. Recordings of ecommerce checkouts are a subject of their own and deserve separate treatment.

Does Google Analytics have a heatmap?

No. Google Analytics 4 (GA4) doesn't have a page heatmap. That's confirmed by Google's own help documentation, checked on October 27, 2026. However, if you've been looking for a Google Analytics heatmap, you may have come across a feature with a confusingly similar name.

In a GA4 Free-form exploration, the table's Cell type setting lets you "Display metric values as plain text, bar charts, or heat maps." These heat maps simply shade the cells of a report table according to their values. For example, you could create a table showing page views by device, with darker cells representing higher numbers. There's no visual representation of the actual web page, so you won't see where visitors click or how far they scroll.

What you do get from google analytics 4 is information about how many people viewed a page, where they came from, and which events they triggered. A website heatmap adds the detail of where those interactions happened on the page. You can use both together to investigate how a page performs. Microsoft Clarity also has a Google Analytics integration, allowing you to connect the tools.

How to set up a heatmap on your website

1. Choose two or three pages

Start with pages that matter to your business and receive enough traffic to give you useful results. On a B2B website, that might mean your pricing page, demo or contact page, and a popular landing page.

If you're with an agency, agree which pages to examine with your client before installing anything. It's easier to start with a small selection of pages and a clear question about visitor behavior.

2. Choose a tool

Microsoft Clarity is one free example. Microsoft describes it as "a free service forever. You never encounter traffic limits or are compelled to upgrade to a paid version." It records up to 100,000 sessions per project per day and keeps recordings for 30 days, although favorites and a random sample can remain available for up to nine months. Heatmaps are available for up to nine months. Microsoft says Clarity shouldn't be used on sites aimed at users under 18.

Other options exist, which we'll cover in our website analytics tools guide.

3. Add the script to your site

Your chosen tool will give you a short script. Add this to your website's code or install it through Google Tag Manager. Include the script on the pages you want to analyze. You can install it across your whole site, even if you only plan to examine a few pages initially.

4. Connect it to your cookie banner

If you have visitors from the EU, the UK or Switzerland, the script should load only after a visitor accepts cookies. Ask whoever manages your cookie banner to connect the heatmap script to it before the script starts recording visits. The consent section below explains what this does to your data.

5. Wait, then open the heatmap

Once visitors have started using your pages, open the heatmap for the page you want to examine. Choose a date range with enough visits, and read it with the checks below. Look at mobile and desktop activity separately, since their layouts differ.

Heatmaps, recordings and EU consent

Heatmap and session recording scripts record how each visitor uses your page, and they usually set cookies. Microsoft's own FAQ for Clarity says that in the EEA, the UK and Switzerland, "explicit user consent is required before placing cookies on their devices." So set the script to run only after a visitor accepts, through your site's consent banner.

Next, check the tool's masking settings. Form fields, email addresses and anything typed into the page shouldn't end up in a recording. Check what your tool masks by default before you go live.

Consent also changes your data. On EU sites, a heatmap only shows the visitors who said yes, which makes small samples smaller (more on that in the checks below). If your consent settings change partway through a date range, the people in your heatmap change with them. This article is for informational purposes only and does not constitute legal advice. For guidance specific to your organisation, consult a qualified legal professional.

For a different approach to measuring visits when people decline cookies, see our guide to cookieless website analytics.

Checks before you act on a heatmap

Before you start making changes to your website after reading a heatmap, check that the results give you enough evidence to work with.

1. Colors are relative

A warm area on a heatmap shows more activity than elsewhere on that page. It doesn't necessarily mean visitors are having a good experience. You also can't compare colors across different pages, as each heatmap uses its own scale.

So read the numbers behind the colors. Most heatmap tools show a count when you select an element. Divide it by the number of sessions in the same view and you have a rate, for example 12 clicks per 100 desktop visits. You can compare a rate with last month, with the mobile view or with the next version of the page. You can't do that with a color.

2. Check the number of sessions first

This is especially important for B2B websites. Your pricing and demo pages may receive far fewer visits than your blog posts, and visitors who decline cookies on your banner reduce the number of visits recorded further.

If only a handful of visitors contributed to your heatmap, their behavior may tell you very little about wider patterns. Extend the date range or collect more visits before redesigning anything. There's no universal minimum number of sessions. It depends on the page you're examining and how substantial a change you're considering.

One way to tell a pattern from noise is to split your date range in half and open the heatmap for each half. If the same areas run hot in both, you're looking at behavior. If the hot spots move, you're looking at a handful of people.

3. Split by device

Desktop and mobile versions of a page often have different layouts. If you mix their results, clicks may appear over the wrong elements, giving you a misleading picture of visitor behavior. Look at each device type separately.

Then split by traffic source, if your tool allows it. Visitors from a paid campaign, from search and from an email arrive with different questions. When we looked at our own homepage data, many visits had no clicks at all, and paid visitors headed to pricing fast. Mix them with everyone else and you'd see neither pattern.

4. Watch for parts of the page that change

Pop-ups, menus, tabs, and carousels can change what's displayed on a page. Personalized content can cause similar problems. A heatmap may place a click over an element that wasn't there when the visitor clicked. Check how the page appeared during the recorded visits before drawing conclusions.

The same applies to changes made during your date range. If you released a new version of the page, changed your consent banner or launched a large campaign partway through, you're looking at two groups of visitors on top of each other. Start the date range on the day of the change, not the week.

5. Confirm what the heatmap suggests

Use the heatmap as a starting point for further investigation. Watch a few session recordings and compare what you find with Google Analytics 4. For example, a high google analytics bounce rate shows that visitors left without engaging in the way GA4 defines an engaged session. A scroll heatmap can show how far they got down the page.

When a heatmap shows a click worth acting on, start counting it. Set it up as an event through Google Tag Manager so GA4 counts it every day. The heatmap shows you where to look, and the event gives you a number to watch before and after you change the page.

If you identify a possible improvement, test the change before committing to it.

What heatmaps can’t tell you

Heatmaps can show where visitors click or how far they scroll, but they can't explain why someone behaved that way. If visitors repeatedly click on an image that isn't a link, you can see the problem, but you'll need to investigate what they expected to happen. Watching individual session recordings can offer clues. Short on-page surveys and conversations with customers can help you understand what visitors were looking for.

A heatmap won't tell you why, but most patterns come back to a short list of reasons:

You'll also need other sources to find out what happened after someone interacted with a page. A heatmap covers one page at a time, so it can't follow the visitor's entire journey. Your web analytics can show which pages they visited next and whether they submitted a form. Your CRM can help you follow what happened after that, including any sales conversations.

There's also the question of which companies those visits came from. A heatmap shows where visitors click, but it can't identify the companies behind those visits. Company level identification matches a visit's IP address to the organization behind it, identifying organizations rather than individual people. Leadfeeder's Web Visitors can help you identify website visitors by company, showing company names, visit times, and pages viewed. You can then select a company that visited the page you're analyzing and check which other pages it viewed.