Hotjar Heatmap Landing Page Guide: What to Track and Fix
Hotjar Heatmap Landing Page Guide: What to Track and How to Act
Running a Hotjar heatmap on your landing page is easy. Knowing what to do with the data is where most founders get stuck.
Quick answer: A Hotjar heatmap landing page report shows where visitors click, how far they scroll, and where their mouse hovers. Click maps reveal misleading elements and ignored CTAs. Scroll maps show where interest drops off. Move maps hint at where attention lingers. Act by removing dead clicks, raising key content above the drop-off line, and rewriting sections users skip.
What does a Hotjar heatmap actually show you?
Hotjar records three visual overlays on your page:
- Click maps. Every tap and click, aggregated into hot and cold zones.
- Scroll maps. The percentage of visitors who reach each vertical point on the page.
- Move maps. Where cursors move on desktop. Weak signal, but sometimes useful.
According to Hotjar's own documentation, heatmaps need at least a few hundred sessions before patterns become reliable. On low-traffic pages, one weird visitor can distort the whole view.
You get one heatmap per URL per device type. So the desktop and mobile versions of your landing page are separate reports. Look at both. They almost never tell the same story.
How do you set up a heatmap on a landing page?
- Install the Hotjar tracking script in your site's
<head>. Most builders (Webflow, Framer, Carrd) have a dedicated slot for this. - In Hotjar, create a new Heatmap. Pick "Page URL" and paste the exact landing page URL.
- Choose a sample size. Larger is better, but 1,000+ pageviews per device gives you enough signal for most decisions.
- Wait. Do not touch the page during collection. If you redesign mid-sample, the data becomes useless.
- Once collection finishes, review desktop and mobile separately.
If you're on a tight budget, check free or cheaper Hotjar alternatives before committing.
How do you read a click map?
Look for three patterns:
Dead clicks on non-clickable elements. If visitors are clicking your hero image, an underlined header, or a stat callout, they think it's a link. Either make it clickable or restyle it so it stops looking like one. Dead clicks are frustration signals.
Ignored CTAs. If your primary button gets fewer clicks than a secondary nav link, your CTA is losing the attention war. This usually means the button copy is generic ("Learn more", "Submit") or the visual hierarchy is off. See CTA examples that fix landing page drop-off for rewrites that work.
Clicks on the logo. A high logo click rate means people are trying to leave. Your page didn't hold them.
How do you read a scroll map?
Scroll maps show you the drop-off curve. Every landing page has one. The question is where the cliff is.
Typical patterns to look for:
- Sharp drop above the fold. If 40% of visitors leave before scrolling once, your hero section failed. Fix the headline or the visual before touching anything below. Related reading: above-the-fold problems killing your first impression.
- Steady decline. Normal. Expect roughly half your visitors to reach the middle of a long page.
- Sudden drop at a specific section. Something in that block killed momentum. A confusing feature grid, a wall of text, a video that autoplays and annoys people. Investigate that exact block.
Mark the "50% viewed" line on your page. Anything critical (pricing, CTA, social proof) needs to sit above it.
How do you turn heatmap data into actual changes?
Heatmaps show what happens. They don't tell you why. That's the gap most people miss. Combine every heatmap finding with one other data source before you change anything:
| Heatmap finding | Pair it with | What to change |
|---|---|---|
| Dead clicks on image | Session recording | Make it clickable or restyle |
| Low CTA clicks | A/B test | Rewrite copy, change color, or reposition |
| Sharp scroll drop | Recording + exit survey | Rewrite the block or cut it |
| High logo clicks | GA4 exit data | Fix the hero, not the nav |
| Mobile clicks near edges | Device testing | Fix tap targets and spacing |
For the A/B testing step, see our guide on running a landing page A/B test without wasting traffic.
What common mistakes ruin heatmap data?
Sampling too early. Fewer than 300 sessions on a mid-traffic page means outliers dominate. Wait.
Ignoring device splits. Desktop and mobile behave completely differently. A CTA that gets clicks on desktop can be invisible on mobile because it falls below a huge hero image.
Treating heatmaps as truth. They're a visualization of clicks, not intent. A cold zone might mean "boring" or it might mean "already convinced, scrolled past to convert". Session recordings clarify.
Averaging across audiences. A heatmap that mixes paid Google traffic with organic blog referrers is noise. If you can, filter by traffic source using URL parameters. Our guide on GA4 landing page query string tracking covers the parameter side.
How does Hotjar compare to other heatmap tools?
Hotjar is the default choice, but not the only option. If you're deciding, our Hotjar alternatives review and Crazy Egg vs Hotjar comparison go deep on tradeoffs. Short version: Hotjar is broad and easy, Crazy Egg is stronger on click segmentation, and cheaper tools work fine for single-page sites.
Check Hotjar's pricing page for current plans, because they change often.
Frequently asked questions
How many sessions do I need before a Hotjar heatmap is reliable?
Hotjar suggests waiting for at least a few hundred sessions per device. For meaningful CRO decisions, aim for 1,000+ pageviews on each device type. Low-traffic pages need weeks of collection before patterns are trustworthy.
Does Hotjar slow down landing pages?
Slightly. The tracking script adds weight and executes async, so it usually doesn't block rendering. But if page speed matters (paid traffic, mobile-heavy), test with and without the script in a tool like WebPageTest before deciding to leave it running full-time.
Can I run a Hotjar heatmap on a page behind a login?
Yes. As long as the tracking script loads on the authenticated page and the URL is stable, Hotjar will record it. You may need to add the URL manually rather than picking it from a suggestion list.
Should I use click maps or session recordings?
Both, but for different jobs. Click maps show aggregate patterns across hundreds of visitors. Recordings show why individual visitors behaved a certain way. Start with heatmaps, then watch 10 to 15 recordings of the sessions that match the pattern you spotted.
Why does my mobile heatmap look completely different from desktop?
Because mobile users see a different layout, scroll faster, and tap instead of click. Your desktop hero might be a beautiful two-column split. On mobile it becomes a stacked scroll that pushes your CTA below the first swipe. Always analyze them separately.
Do heatmaps work on single-page apps and Framer/Webflow sites?
Yes. Hotjar supports SPAs through virtual pageview tracking. On Framer and Webflow, install the script in the site-wide head tag and it works out of the box. Verify by opening the page and checking the Hotjar dashboard for the "site connected" indicator.
How often should I re-run heatmaps on the same landing page?
After any meaningful change (new hero, new CTA, new pricing block), start a fresh heatmap. Old data reflects the old page. For pages you haven't changed, re-run every 3 to 6 months to catch drift from changing traffic sources.
Want faster insights than heatmaps alone? PagePulse audits your landing page against 40+ conversion patterns and points you at the exact fixes, no waiting for a 1,000-session sample. Run a free audit at pagepulse.page.