Loading tutorials…
Loading tutorials…
Heatmaps are the most-misread feature in Hotjar. The same map answers a different question depending on whether you set it up for click, move, scroll, or rage-click — and most teams pick the wrong one.
Who this is forMarketers or owners with Hotjar installed who need to understand where users click, scroll, and rage-click on a specific landing page or product page. If you're spending $1K+/month driving traffic to a page and your conversion rate is flat, heatmap data is the cheapest way to find the friction.
What you'll need
Step 1
Hotjar offers Click, Move, Scroll, and (Business+) Rage-click + Engagement Zones. Each answers a different question — picking the wrong one wastes the sample.
Click heatmap: where users tap or click. Best for: "is the CTA where users expect it?", "are users trying to click non-link elements?", "which nav item gets the most attention?"
Move heatmap (desktop only): where the mouse hovers. Best for: tracking attention before commitment. Useful for hero sections and decision-heavy pages. Caveat — mouse position correlates with eye position only ~65% of the time. Treat as a hint, not gospel.
Scroll heatmap: how far down the page users scroll. Best for: "does anyone reach the testimonials?", "where does drop-off happen on a long landing page?"
Rage-click heatmap (Business plan and above): where users click repeatedly in frustration. Best for: finding broken links, unresponsive buttons, and confusing UI. This is the highest-signal heatmap when available — every rage-click is an actionable bug or UX gap.
Engagement Zones (Business plan): aggregates click + move + scroll into one overlay with red/yellow/green attention scoring. Useful for execs who want one image, less useful for diagnostic work.
Decision rule: start with Click + Scroll for any new page. Add Move and Rage-click once Click reveals a specific question (e.g., "why is no one clicking the CTA?").
Step 2
Heatmaps → New heatmap. Pick the page URL pattern carefully — too narrow misses sessions, too broad merges different pages.
In the left sidebar, click Heatmaps → New heatmap (top-right button).
Name the heatmap clearly: "Pricing page — click — desktop — May 2026". Future-you will thank present-you. Default names ("Untitled heatmap 3") are how heatmaps get orphaned in 60 days.
Page targeting: pick "Specific URL" for a single page (e.g., acme.com/pricing). Pick "URL contains" for a pattern (e.g., URL contains /products/ to capture all product pages). Pick "URL matches" for regex (advanced).
Avoid "All URLs" except for diagnostic work. Merging clicks across heterogenous pages produces a map that looks heatmapped but is statistically meaningless.
For dynamic URLs (e.g., /products/[id]) where the layout is identical but the URL changes per product, use "URL contains /products/" — Hotjar will overlay clicks on whichever product page renders the map preview, which is what you want.
Step 3
Choose Continuous (keeps collecting until paused) or fixed-session (stops at N). Always segment by device — desktop and mobile heatmaps must be separate.
Continuous heatmaps keep collecting until you pause them. Useful for evergreen pages where you want to compare quarter-over-quarter.
Fixed-session heatmaps stop at N (e.g., 1,000). Useful for A/B test snapshots: "collect 1,000 sessions on the new pricing page, then freeze."
Minimum statistical sample: 100 sessions for directional patterns, 500-1,000 for confident decisions. Below 100, you're reading noise.
Device targeting is non-negotiable: create separate heatmaps for desktop, tablet, and mobile. The layouts differ, click positions differ, and merging them produces a heatmap of a layout that doesn't exist on any real device.
Browser/country segmentation: optional. Useful for diagnosing region-specific issues (e.g., "is the EU GDPR banner blocking the CTA?") but adds complexity. Skip on first heatmap; add on follow-ups.
Step 4
Open the heatmap. The session counter should tick up. If it stays at 0 for 24 hours, the URL pattern or device filter is wrong.
After creating the heatmap, visit the target page in a clean incognito browser. Click around for 30 seconds.
Go to Heatmaps → click your map → check the session counter at the top. It should show 1+ session within 5-10 minutes.
If it stays at 0 after 24 hours: (a) URL pattern doesn't match the live URL (check trailing slashes, query params, case sensitivity); (b) device filter excludes your test device; (c) recording capture rules in Site Settings exclude this URL — check Privacy & Security → URL exclusions.
On Free Basic, the heatmap shares the 35-sessions/day pool with recordings. If you've set up 10 heatmaps on different pages, each gets ~3-5 sessions/day — not enough for any of them. Reduce to 2-3 critical heatmaps until you upgrade.
For high-traffic pages, heatmaps populate in hours. For long-tail pages (<10 visits/day), expect 7-30 days to collect a usable sample.
Step 5
Look for what surprises you, not what confirms you. Clicks on non-link elements, scroll drop-offs before the offer, rage clicks on broken UI — these are the real findings.
Open the heatmap. Scan for the brightest clusters. Ask: "is this where I wanted attention?" If yes — your UI is doing its job, no change needed. If no — you have a finding.
Look for clicks on non-link elements: product images that aren't clickable, FAQ headers that look expandable but aren't, decorative icons that look like buttons. Each is a "make this clickable" backlog item.
Look for clicks on links that shouldn't be clicked: company logo on a checkout page (sends users back to home and abandons cart), nav menu on a landing page (defeats the whole landing-page conversion goal).
For scroll heatmaps: find the 50% line. If your hero converts above the 50% line, the long body is dead weight — consider trimming. If your offer is below the 50% line, only 50% of users see it — move it up or shorten the page.
For rage clicks: every cluster is a bug. Inspect each one in DevTools — usually a broken JS handler, a misaligned hit target, or a button that's slow to respond. Fix each one and re-map.
Resist the urge to redesign the page based on one heatmap. Run the heatmap → form a hypothesis → validate with a recording sample → ship the fix → re-map. The loop matters more than any single map.
Step 6
When you ship a UI change, freeze the pre-change heatmap and start a fresh one. Side-by-side comparison is how you prove a change worked.
Before shipping a UI change, freeze the existing heatmap: open it → Pause data collection. This becomes your "before" baseline.
After shipping, create a new heatmap with the same URL + device targeting. Name it "Pricing page — click — desktop — POST-redesign — May 2026".
After 1-2 weeks (or 1,000 sessions, whichever comes first), open both heatmaps side by side in two browser tabs.
Look for: did clicks move toward the new CTA? Did rage clicks on the old broken element disappear? Did scroll depth improve?
If yes, ship the next iteration. If no, the change didn't work as intended — and now you have a recording sample (next tutorial) to figure out why.
Archive heatmaps older than 6 months. Stale heatmaps clutter the dashboard and tempt you to read data from a layout that no longer exists.
Step 7
Business+ plans support automated alerts when heatmap traffic spikes or drops. Use them on conversion-critical pages.
On Business and above, open Heatmaps → click a heatmap → Alerts tab.
Configure: "notify me when sessions in the last 7 days drop by 50% or more" — catches a tracking break or a sudden traffic loss before it costs you a week of bad data.
Configure: "notify me when rage clicks spike on this page" — catches a JS error or broken CTA in production within 24 hours of deploy.
Alerts route to email or Slack (Settings → Integrations → Slack). Use Slack — alerts in email get buried.
Don't over-alert. 2-3 alerts on your top conversion pages is the right scope. 30 alerts across every page is noise.
Common mistakes
Reading a heatmap with fewer than 100 sessions
What goes wrong: Heatmaps look smooth even at 20 sessions, which tricks teams into shipping changes based on noise. A team redesigns a hero based on a 30-session heatmap, sees no conversion-rate change, and concludes "heatmaps don't work." Wasted ~2 weeks of design time and $3,000-8,000 of dev cost.
How to avoid: Set a 100-session minimum for directional decisions, 500-1,000 for confident ones. Below 100, treat the heatmap as a curiosity, not evidence.
Merging desktop and mobile into one heatmap
What goes wrong: You ship a 'click the CTA more' fix based on a merged heatmap. Desktop conversion rises 3%, mobile drops 7%. Net: -2% across all traffic. The merged map hid the device-specific reality. On $50K/mo of ad spend, this is $12K of lost revenue over 90 days.
How to avoid: Always split by device. One heatmap per device per question. The 5 minutes of extra setup prevents months of wrong-direction fixes.
Heatmapping logged-in account pages instead of acquisition pages
What goes wrong: Quota is consumed mapping /dashboard and /settings — pages where no purchase decision happens. Meanwhile your $5K/mo paid landing page has zero data. You're mapping the wrong half of the funnel.
How to avoid: Heatmap acquisition pages: homepage, top 3 landing pages, top 3 product pages, checkout. Skip logged-in app pages unless you have a specific retention CRO question.
Treating a click heatmap as a final answer instead of a question
What goes wrong: A heatmap shows 40% of clicks on a non-link product image. The team adds a link to the image. Conversion rate doesn't change because the underlying question was 'why do users want to click here?' — usually 'they expect a zoom or larger view' — and a generic link doesn't solve it. Wasted ~$2,000-6,000 in design + dev cycles on a fix aimed at the wrong question.
How to avoid: For every heatmap finding, ask "why?" before "what?". Validate with 3-5 session recordings of users in that cluster. Ship the fix that addresses the why.
Never archiving stale heatmaps
What goes wrong: Dashboard fills up with 50+ heatmaps from old layouts. Team mistakenly reads a 6-month-old map of a page that's since been redesigned. Decisions are made on a layout that no longer exists. Typical cost: 1-2 wrong-direction CRO experiments per quarter = $3,000-8,000 in dev cycles aimed at a layout nobody sees.
How to avoid: Archive heatmaps older than 6 months or post-redesign. Keep only active or recent baseline maps visible.
Skipping rage-click heatmaps on Business plan
What goes wrong: Rage clicks are the highest-signal heatmap — every cluster is a bug. Teams on Business plan often don't enable them and miss broken UI for months. A single broken "Apply discount" button can cost a Shopify store $500-2,000/mo in abandoned carts.
How to avoid: On Business+, always enable rage-click heatmaps on the top 5 acquisition pages and the checkout. Fix each cluster within 48 hours.
Recap
Done — what's next
How to set up Hotjar Session Recordings the right way
Read the next tutorial
Hand it off
Most teams spend $30-80/mo on Hotjar and pull 1-2 insights from it per quarter. A specialist running heatmap analysis as a recurring practice typically pulls 3-5 actionable findings per week, ships 1-2 of them, and pays for themselves inside 60 days. Match with a vetted conversion specialist from $14-16/hr.
See specialist rates
100 sessions for directional patterns, 500-1,000 for confident decisions. Below 100, the visual smoothness is misleading — clicks cluster around random outliers and patterns look real that aren't. Wait for the sample before drawing conclusions.
Hotjar normalizes click coordinates against the page rendered at capture time. If the page layout shifts (responsive design, A/B test variant swap, late-loading content), historical clicks may overlay outside current bounds. Re-map after major layout changes.
Yes, on Plus and above. Open the heatmap → top-right Export → Image (PNG). Useful for sharing with execs or pasting into PRDs. Export the segmented version (desktop OR mobile, not both) for clean storytelling.
Mobile users have shorter sessions, different click positions (thumb zones, not mouse-cursor zones), and different scroll depths. The behavioral pattern genuinely differs. This is why merging the two destroys both maps. Treat them as different audiences with different layouts.
Yes. Hotjar detects route changes via the History API automatically. Each route gets its own heatmap if the URL is unique. For client-rendered modals (URL doesn't change), set up the heatmap with a trigger event instead of a URL match.
Clarity is free with unlimited sessions and includes click + scroll + area heatmaps. Hotjar is paid above the basic tier but includes move heatmaps, rage-click overlay, engagement zones, and tighter integration with surveys and funnels. Clarity wins on volume; Hotjar wins on workflow. See the Hotjar vs Clarity vs FullStory decision guide.
Hotjar
Hotjar's recordings are the most powerful feature in the tool — and the most-wasted. The difference is filter discipline. This is the setup that turns 1,000 recordings/week into 5 useful insights, not 1,000 hours of "someday I'll watch these."
Hotjar
GA4 tells you 60% of users abandoned at checkout step 2. Hotjar Funnels tells you which 60% — and lets you click straight into 5 recordings of the people who dropped off. That's the workflow.
Hotjar
Clarity is free. Hotjar costs $0-400+/mo. FullStory costs $300-$1,500+/mo. Each claims to do the same thing. This is the honest comparison — where each tool actually wins, and which one fits your stack.
Hotjar
DIY Hotjar is a great idea — until it isn't. This is the honest framework: when the cost of unwatched recordings and unanalyzed surveys exceeds the cost of hiring help, and how to tell which side you're on.