Website heatmaps are visual overlays that show where users click, scroll and focus on a page. They are the fastest way to spot UX friction without writing a single line of custom analytics code. Here is the short version of what to do: Start free: Microsoft Clarity gives you unlimited recordings and heatmaps at no cost, with 30-day replay retention. It covers click maps, scroll maps and session replays out of the box. Add paid features when you need them: Hotjar (now part of Contentsquare) adds move/attention maps, on-site surveys and up to 365 days of data retention on paid tiers. Contentsquare itself suits enterprise teams needing revenue attribution and managed onboarding. Immediate next step: install a free recorder, point it at your highest-traffic landing page, and watch 5-10 session replays behind the hotspots before drawing any conclusions. ***
What are website heatmaps and which types matter?
Heatmaps are visual representations of user interactions, colour-coded from cool blues (low activity) to hot reds (high activity). Three types do the bulk of the work:
Beyond those three, most tools offer rage-click maps (repeated frustrated clicks in one spot), dead-click maps (clicks on elements that do nothing) and area maps that aggregate engagement across defined page zones. These variants are genuinely useful rather than marketing extras.
One important caveat: move maps only work on desktop. Mobile users do not move a cursor, so scroll and tap maps carry all the weight there. If your audience is predominantly mobile, weight your analysis accordingly.
Pro Tip: *Never act on a hotspot alone. A cluster of clicks on a non-linked image might look like interest; it usually means confusion. Always pull up 5-10 session replays behind any hotspot before changing the page.*
***
- 01Click/tap maps show exactly where users click on desktop and tap on mobile. They answer "are people clicking what I want them to click?" and quickly expose dead links, ignored CTAs and accidental taps on non-interactive elements.
- 02Scroll maps show how far down a page users scroll before leaving. If many visitors never reach your pricing section, that is a layout problem, not a messaging problem.
- 03Move/attention maps track where the mouse cursor travels on desktop. Research suggests mouse position correlates strongly with gaze most of the time on content-heavy pages, which makes move maps a reasonable proxy for eye tracking without the lab setup.
How heatmaps collect data and what affects accuracy
Every heatmap tool works by injecting a small JavaScript snippet into your page. That snippet listens for browser events: clicks, touches, scroll depth and mouse movement. It sends those events to the vendor's servers, where they are aggregated into the colour overlay you see in the dashboard.
Session replays work the same way but capture a fuller picture: DOM snapshots, input interactions and navigation events are stitched together into a video-like playback. The snippet size varies by vendor but is typically a few kilobytes, loaded asynchronously so it does not block page rendering.
What affects data quality:
Data retention is worth understanding before you commit to a tool. Microsoft Clarity stores individual session replays for 30 days, though aggregated heatmap data persists longer. Hotjar's paid tiers extend replay retention up to 365 days. For seasonal businesses, that gap matters: 30-day replay retention makes year-on-year comparisons impossible unless you export data or upgrade.
***
- 01Sampling vs full capture. Some tools record every session; others sample at a percentage once traffic exceeds a threshold. Sampling is fine for high-traffic pages but can distort results on lower-traffic ones.
- 02Single-page applications (SPAs). React, Vue and Angular sites change the DOM without a full page reload. Many heatmap tools need additional configuration to track virtual page views correctly, otherwise all interactions collapse onto one overlay.
- 03Dynamic content and personalisation. A/B tests, personalised banners and lazy-loaded elements can shift page layout after the snippet fires, causing clicks to map to the wrong element.
- 04Bot traffic. Automated crawlers inflate session counts and distort click patterns. Most tools offer bot-filtering settings; check they are enabled.
- 05Cross-device differences. A scroll map built on mixed desktop and mobile data is almost meaningless. Always segment by device type before drawing conclusions.
When do heatmaps actually help, and when do they mislead?
Heatmaps earn their keep on specific page types. They are less useful elsewhere.
Use them on:
They are the wrong tool when:
The most common misread is treating a hotspot as proof of interest. Relying solely on heatmaps can mislead; session replays are essential to validate the context behind hotspots. A rage-click cluster on your hero image might mean users think it is a button. A dead zone on your pricing table might mean the copy is clear enough that no one needs to hover. Context changes everything.
Pro Tip: *For quick wins, target pages that already sit inside a conversion funnel in GA4 and have at least a few thousand pageviews per month. You will see meaningful patterns within days rather than weeks.*
***
- 01High-traffic landing pages where even a 1% conversion lift has measurable revenue impact.
- 02Checkout and booking flows where drop-off is costing you money right now.
- 03Long-form content pages where you need to know whether readers reach the CTA at the bottom.
- 04Navigation redesigns, where click maps reveal which menu items users actually use versus which you assume they use.
- 05Traffic is below a few hundred sessions per week. The colour gradients become statistically meaningless with thin data.
- 06You are testing ephemeral variations in a rapid A/B cycle. Heatmaps need time to accumulate enough sessions to be reliable.
- 07You need to understand *why* users behave a certain way. Heatmaps are a quantitative visual aid; session replays and on-site surveys convert visual signals into testable hypotheses.
Which heatmap tools should you consider for a UK website?
Tool choice should prioritise alignment with business needs, particularly data retention and GA4 integration, rather than raw feature count. The three tools below cover the realistic range for UK buyers.
Dimension Microsoft Clarity Hotjar Contentsquare Best for SMBs, free core analytics SMBs to mid-market needing surveys Enterprise, long-retention reporting Heatmap types Click, scroll, area Click, scroll, move/attention Click, scroll, move, zone-based Session replay Yes, with filtering Yes, with filtering and funnels Yes, with advanced segmentation Integrations GA4, GTM, Shopify, WordPress GA4, GTM, Segment, Optimizely GA4, GTM, CDP integrations Data retention 30-day replays; aggregates longer Up to 365 days on paid tiers Custom, enterprise SLA Pricing model Free, unlimited sessions Free tier; session-based paid plans Custom enterprise pricing GDPR / privacy Auto-masking, DPA available, EU data residency options Auto-masking, DPA, GDPR controls DPA, privacy centre, enterprise controls Ease of setup Snippet or GTM, minutes Snippet or GTM, minutes Managed onboarding Support Self-serve docs, community Self-serve docs, email, chat Dedicated CSM
Short verdicts:
For many small UK businesses, starting with a free tool that offers unlimited recordings is the pragmatic default; upgrade when you need surveys, export APIs or longer retention.
***
- 01Microsoft Clarity - is the default starting point for most UK sites. Free, unlimited, and it integrates with GA4 in a few clicks. The limited replay window is the main constraint.
- 02Hotjar makes sense when you need move maps, on-site surveys or longer data retention. Hotjar provides move maps and qualitative feedback widgets, including surveys and incoming feedback, with paid plans offering retention up to 365 days. The paid tier is justified once you are running structured UX research alongside quantitative tracking.
- 03Contentsquare - (which now includes Hotjar as part of its group) suits teams with dedicated analytics resource, enterprise compliance requirements or a need to tie interactions directly to revenue. Some vendors expose element-level revenue attribution features that link behaviour directly to conversion impact, which is where Contentsquare's enterprise tier earns its cost.
How to add a heatmap to your UK website
Setup is typically fast: most vendors provide a short snippet or quick integration via tag managers and CMS plugins. Here is the full checklist:
Pro Tip: *Tag sessions with UTM parameters or logged-in user IDs before you start collecting. Filtering heatmaps by traffic source or user segment turns a general overview into a genuinely diagnostic tool.*
***
- 01Capture your first 1,000 sessions - On a busy site this takes hours; on a quieter one, give it a week. Do not interpret heatmaps on fewer sessions than this.
UK GDPR checklist for heatmaps on your website
Session recordings capture user behaviour in real time, which means they can capture personal data. Under UK GDPR, that creates obligations before you install anything.
Required checks:
Questions to ask your vendor before signing up:
The future of data regulation continues to tighten around behavioural tracking, so treating these questions as a one-time checklist is not enough. Review your vendor's privacy centre annually.
Data retention windows matter beyond compliance. Microsoft Clarity retains individual session replays for 30 days, which is sufficient for ongoing monitoring but prevents year-on-year seasonal comparisons. If your business has distinct seasonal peaks, a tool with longer retention or a data export workflow is worth the cost.
***
- 01Lawful basis. Most organisations rely on consent for non-essential tracking cookies. Legitimate interest is possible but requires a documented balancing test; it is not a shortcut.
- 02Cookie consent banner. Your consent management platform must cover the heatmap vendor's cookies and pixels. Heatmap scripts must not fire until consent is granted.
- 03Auto-masking of PII. Vendors offer auto-masking and auto-redaction features to help compliance where recordings capture personal data. Verify this is enabled and covers form fields, payment inputs and any dynamically loaded personal content.
- 04Data Processing Agreement (DPA). You must have a signed DPA with your vendor before going live. Microsoft Clarity, Hotjar and Contentsquare all provide these; request and countersign before installation.
- 05Data transfer and residency. Check where the vendor stores data. EU/UK data residency options exist across the main tools but may require a specific plan or configuration.
- 06Privacy policy and cookie notice disclosure. Your privacy policy must describe session recording and heatmap analytics. Your cookie banner must list the vendor and purpose.
- 07What is the maximum replay retention period on your plan?
- 08Is aggregated behavioural data used to train or improve your product? Can you opt out?
- 09Do you sell or share anonymised data with third parties?
- 10Do you provide an export API and a deletion API for data subject requests?
Free vs paid: how to pick the right pricing model
The four common pricing models each carry different trade-offs:
Quick picks by use case:
Total cost of ownership is rarely just the subscription. Factor in engineering time to configure SPA tracking, analyst time to interpret findings, and the cost of design or development changes that act on those findings. A free tool that nobody acts on costs more than a paid tool that drives one meaningful conversion improvement per quarter.
***
- 01Free (unlimited sessions): - Microsoft Clarity. No cost, no session cap, but limited to 30-day replay retention and no qualitative feedback tools.
- 02Tiered / enterprise: - Fixed monthly fee for a feature bundle. Hotjar's paid plans work this way; Contentsquare operates on custom enterprise contracts.
Concrete use cases and what you can realistically expect
Three scenarios where heatmaps consistently deliver:
In each case, the heatmap identifies *where* the friction is. Session replays confirm *why*. An A/B test or a before/after comparison in your website analytics dashboard measures whether the fix worked. That three-step loop, spot, validate, measure, is what separates teams that act on data from teams that just collect it.
***
- 01Dead-click detection on checkout - Users repeatedly clicking a greyed-out "Proceed" button that requires a checkbox to be ticked first. The fix is a visual cue or an inline error message; the heatmap surfaces the problem in minutes, not weeks of support tickets.
Key takeaways
Website heatmaps are most valuable when paired with session replays and GA4 conversion data; the visual overlay alone rarely justifies a change.
Point Details Start with a free tool Microsoft Clarity offers unlimited sessions and heatmaps at no cost, with 30-day replay retention. Validate hotspots with replays High-click zones can indicate confusion; always watch session replays before acting on a heatmap. Check retention before committing Seasonal businesses need more than 30-day replay windows; Hotjar paid tiers extend this to 365 days. Complete your UK GDPR checklist Obtain a signed DPA, enable auto-masking, and disclose session recording in your privacy policy and cookie banner. Project-pixel for managed delivery Project-pixel installs tracking, interprets heatmaps and implements design changes as part of a fixed-price package.
***
The gap between what heatmaps promise and what they actually deliver
Most teams install a heatmap tool, look at the pretty colours for a week, and then do nothing. The red zones feel like insight. They are not. They are a hypothesis waiting to be tested.
The tools themselves are not the problem. Microsoft Clarity is genuinely excellent for a free product, and Hotjar's survey integration is one of the few features in this category that produces qualitative data you can act on directly. The problem is the workflow that surrounds them.
A heatmap without a session replay is like a crime scene photo without a witness statement. You can see something happened; you cannot tell why. And a session replay without a conversion metric attached to it is just an interesting video. The teams that get real value from heatmap analytics are the ones who close the loop: heatmap identifies a friction point, replay confirms the behaviour, an A/B test or a tracked design change measures the outcome in GA4.
The other thing most guides skip: heatmaps are a poor tool for low-traffic pages. If a page gets 200 visits a month, the overlay will look almost blank, and any pattern you think you see is noise. Prioritise pages that already have conversion goals in your analytics setup, and let the data accumulate before you draw conclusions.
***
What Project-pixel does when you need more than a tool
Heatmap tools are straightforward to install. Acting on what they show is where most teams stall. Project-pixel handles the full loop: snippet installation, heatmap interpretation, session replay analysis, A/B test design and the design or copy changes that follow, all within a fixed-price package with a clear delivery timeline.
If you are comfortable running the analysis yourself, the free tools covered here will serve you well. If you need someone to own the process end to end, including integrating findings into a redesigned page or a new site build, Project-pixel's web design packages include analytics setup as standard. No retainer, no open-ended scope. You get a site that is tracked, tested and ready to improve. See the full range of industry-specific packages to find the one that fits your sector.
***
Useful sources and vendor documentation
***
- 01Microsoft Clarity - free heatmaps and session recordings
- 02Microsoft Clarity documentation and FAQ
- 03Hotjar vs Microsoft Clarity - Hotjar's own comparison
- 04Heatmaps: complete guide to user insights - Mouseflow
- 05What are heatmaps? - Contentsquare blog
- 06Microsoft Clarity vs Hotjar comparison - ClarityInsights
- 07Hotjar vs Clarity feature breakdown - UXHeat
- 08The future of data regulation - Whitebunnywabbit
FAQ
What are heatmaps on a website?
Website heatmaps are colour-coded overlays that show where users click, scroll and focus on a page, with warmer colours indicating higher activity. They are used to identify UX friction, ignored CTAs and scroll drop-off points without custom analytics code.
Can ChatGPT create heatmaps?
No. ChatGPT is a language model and cannot observe or record live user behaviour on a website. Heatmaps require a tracking snippet installed on your site that captures real user interactions; tools like Microsoft Clarity and Hotjar do this.
How do you view the heatmap of a website?
Install a heatmap tool's JavaScript snippet via your CMS or Google Tag Manager, then log into the tool's dashboard once sessions have been recorded. Most tools display click, scroll and move overlays directly on a visual replica of your page.
How do I add a heatmap to my website?
Create a free account with a tool such as Microsoft Clarity, copy the tracking snippet from the dashboard, and paste it into your site's <head> tag or add it as a tag in Google Tag Manager. Verify it is firing using the tool's built-in debugger, then wait for sessions to accumulate before reading the overlay.