Loading tutorials…
Loading tutorials…
VWO's heatmaps sit inside the Insights module — alongside recordings and form analytics. They're the qualitative complement to A/B test data: heatmaps tell you what hypothesis to test next.
Who this is forTeams running VWO who want to source A/B test hypotheses from real user behavior. If you're testing 'gut feel' changes and most tests fail to reach significance, heatmap-sourced hypotheses win 2-3x more often than guess-sourced ones.
What you'll need
Step 1
Heatmaps live under VWO Insights. Available on Growth and above. Starter plan doesn't include heatmaps natively — but the testing module is unaffected.
Open VWO → check the left sidebar. If you see Insights as a top-level item with Heatmaps, Recordings, and Form Analytics underneath, you have access.
Settings → Plan & Billing shows your tier. Growth starts around $429/mo annual and includes Insights with 50K monthly tracked users. Pro and Enterprise scale up from there.
If you're on Starter without Insights: evaluate honestly. Do you want behavior analytics alongside testing? If yes, upgrade to Growth. If you only need behavior analytics (no testing), Hotjar or Microsoft Clarity are cheaper standalone options. See the linked tutorials.
Cheaper alternative if you can't justify Growth: Microsoft Clarity is free with unlimited heatmaps + recordings. Use Clarity for behavior analytics and VWO Starter for tests. Many teams run this stack. See the Clarity setup tutorial.
Step 2
VWO offers Click, Scroll, and Hover (Confetti + Element-level) heatmaps. Each answers a different question — picking the wrong one wastes the sample.
Click heatmap: aggregated click density on the page. Best for: 'is the CTA where users expect it?', 'are users clicking non-link elements?', 'which nav item gets the most attention?'
Scroll heatmap: shows how far down the page users scroll, with a percentage at each fold line. Best for: 'does anyone reach the testimonials below the fold?', 'where does drop-off happen on a long landing page?'
Hover heatmap (Confetti view): individual click dots colored by segment or referrer. Best for: 'do paid traffic users behave differently than organic on this page?' Useful diagnostic but more visual noise than aggregated views.
Element-level heatmap: aggregated clicks per DOM element with explicit counts. Best for: precise comparison ('this button got 247 clicks; that one got 18'). VWO uniquely shows this as a side panel alongside the visual heatmap.
Decision rule: start with Click + Scroll for any new page. Add Confetti and Element-level when Click reveals a specific question.
Step 3
Insights → Heatmaps → New Heatmap. Pick the page URL pattern carefully — too narrow misses sessions, too broad merges different pages.
In the left sidebar, click Insights → Heatmaps → click New Heatmap (top-right button).
Name the heatmap: 'Pricing page — click — desktop — May 2026'. Specific names matter for finding the heatmap later. Defaults ('Untitled Heatmap 7') become orphan heatmaps in 60 days.
Page targeting: pick "URL Equals" for a single page (e.g., acme.com/pricing), "URL Contains" for a pattern (e.g., URL contains /products/), or "URL Matches Regex" for advanced patterns.
Avoid 'All URLs' except for site-wide diagnostic work. Merging clicks across different pages produces statistically meaningless overlays.
For dynamic URLs (e.g., /products/[id]) with identical layouts, use "URL Contains /products/" — VWO will overlay clicks on a representative product page, which is what you want.
Step 4
Always create separate heatmaps for desktop, tablet, and mobile. Their layouts differ; merging them produces an overlay representing no real device.
Below the URL pattern, set Device Targeting. Pick Desktop OR Mobile OR Tablet — NOT all three on one heatmap.
Run separate heatmaps for each device. The 5 minutes of setup time prevents months of misread overlays.
Sample size: VWO heatmaps continuously collect data as long as the heatmap is active. There's no preset cap. Pause the heatmap when you have enough data (typically 1,000+ sessions for confident reads).
Minimum sample for reads: 100 sessions for directional patterns; 500-1,000 for confident decisions. Below 100, you're reading noise that looks smooth.
Browser/country/UTM filters: optional. Useful for diagnosing region-specific issues but add complexity. Skip on first heatmap; add on follow-ups when you have specific questions.
Step 5
Visit the target page. The heatmap should start populating within minutes. If it stays empty after 24 hours, the targeting is wrong.
After saving the heatmap, visit the target page in a clean incognito browser. Click around for 30 seconds.
Go to Insights → Heatmaps → click your heatmap → check the session counter at the top. It should show 1+ session within 5-15 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) SmartCode isn't firing on this URL — check Settings → Install SmartCode → Verify.
Common gotcha: if you have IP exclusions enabled (Settings → IP Exclusion), heatmaps respect those too. Test from an excluded IP and you'll see no sessions. Test from a clean device or external network to confirm install.
For high-traffic pages, heatmaps populate in hours. For long-tail pages (<50 visits/day), expect 7-30 days to collect a usable sample.
Step 6
Look for what surprises you, not what confirms you. Click clusters on non-link elements, scroll drop-offs before the offer, attention on the wrong areas — these are the real findings.
Open the heatmap. Scan for the brightest clusters. Ask: 'is this where I wanted attention?' If yes — UI is doing its job, no test needed. If no — you have a hypothesis for an A/B test.
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 an A/B test idea ("make this clickable").
Look for clicks on links that shouldn't be clicked: company logo on a checkout page (sends users back to home, abandons cart), nav menu on a landing page (defeats the conversion goal). A/B test removing or restyling these.
Scroll heatmap: find the 50% line. If your hero converts above 50% line, the long body is dead weight — A/B test trimming. If your offer is below 50% line, only 50% of users see it — A/B test moving it up.
Resist the urge to redesign the page based on one heatmap finding. The right workflow is: heatmap → hypothesis → A/B test → ship → re-map. Heatmaps tell you what to test, not what to ship.
Step 7
VWO uniquely lets you attach heatmaps to active A/B tests. Compare click patterns on Control vs Variant — answers WHY a variant won or lost.
Inside a running A/B test, click Reports → Heatmaps tab. VWO generates separate heatmaps for Control and each Variant automatically.
Open the Control heatmap side by side with the Variant heatmap. Look for differences in click patterns.
Example insight: variant lifts conversion 8% — heatmap shows users now click the new CTA 3x more, but also abandon scroll above the testimonials section. Net win, but with a 'leak' that suggests the next test (re-add or rework the testimonials section).
This is the single most valuable VWO feature for compounding test learnings. Heatmaps inside tests turn every winning test into 2-3 follow-up hypotheses.
Make this part of your test post-mortem: every test (winner OR loser) gets a 10-min heatmap comparison after the result lands. Document what surprised you. Those surprises become the next quarter's test backlog.
Common mistakes
Reading heatmaps 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 test lift, and concludes "heatmaps don't work." Wasted ~$3,000-8,000 in design + dev time on a pattern that wasn't real.
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 heatmaps
What goes wrong: You ship a 'click the CTA more' fix based on the merged heatmap. Desktop conversion rises 3%, mobile drops 7%. Net: -2% across all traffic. The merge hid device-specific reality. On $50K/mo of ad spend, ~$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 app pages instead of acquisition pages
What goes wrong: Sample 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. On a $30K/mo paid-traffic account, that's ~$3,000-8,000/quarter in lost CRO leverage.
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 cluster as a final answer instead of a hypothesis
What goes wrong: A heatmap shows 40% of clicks on a non-link product image. The team adds a link to the image. Conversion 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.
How to avoid: For every heatmap finding, ask "why?" before "what?". Validate with 3-5 session recordings of users in that cluster. Design an A/B test around the validated hypothesis.
Not using heatmaps inside running A/B tests
What goes wrong: Tests win or lose but the team doesn't know WHY. Wins don't compound because there are no follow-up hypotheses. Losses get re-tested in subtle variations because the team never learned what didn't work. Over a year, this costs ~$15,000-30,000 in CRO momentum that never builds.
How to avoid: Every A/B test gets a heatmap-comparison post-mortem at result time. Document what surprised you. Those surprises become next quarter's test backlog.
Never archiving stale heatmaps
What goes wrong: Dashboard fills with 50+ heatmaps from old layouts. Team accidentally reads a 6-month-old map of a page that's since been redesigned. Decisions 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. Clean quarterly.
Recap
Done — what's next
How to set up a VWO A/B test the right way
Read the next tutorial
Hand it off
Most teams spend $400-900/mo on VWO and pull 1-2 insights from heatmaps per quarter. A specialist sourcing test hypotheses from heatmaps as a weekly practice typically generates 3-5 testable hypotheses per week, runs 1-2 of them, and pays for themselves inside 60 days. Match from $14-16/hr.
See specialist rates
VWO Heatmaps sit inside an experimentation platform — they can attach to running A/B tests for variant comparison, which Hotjar can't natively do. Hotjar has more heatmap types (rage-click, move, engagement zones) and a more polished standalone UX. If you're already running A/B tests in VWO, use VWO Heatmaps. If you only need standalone behavior analytics, Hotjar is cheaper.
Yes, and many teams do. Clarity is free with unlimited sessions — use it for site-wide behavior analytics. VWO Heatmaps is best used inside A/B test variants where you need per-variant comparison. The two complement each other; running both adds 0-50ms to page load combined.
100 sessions for directional patterns, 500-1,000 for confident decisions. Below 100, the visual smoothness is misleading — clusters form around random outliers and patterns look real that aren't. Wait for sample before drawing conclusions.
VWO 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. Open the heatmap → top-right Export → 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 tap positions (thumb zones, not mouse-cursor zones), and different scroll depths. The behavioral pattern genuinely differs. This is why merging the two destroys both. Treat them as different audiences with different layouts.
VWO
A/B testing in VWO is 20% setup and 80% statistical discipline. Most teams skip the sample-size math, call winners early, and ship 'wins' that don't hold. This is the workflow that produces tests you can actually trust.
VWO
GA4 tells you 60% of users abandoned at checkout step 2. VWO Funnels tells you which 60% — and lets you click straight into recordings and design an A/B test for that specific step.
VWO
Form Analytics tells you the exact field where users abandon — and how many seconds they hesitated before quitting. On a checkout, lead form, or signup, this is the data that converts gut-feel form redesigns into evidence-based ones.
Hotjar
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.
Microsoft Clarity
Clarity is free and the install is famously easy — but the choices you make in the first 45 minutes (data masking, retention, project ownership) are hard to undo later. This walkthrough gets the configuration right the first time.