Skip to content
Heatmap data visualization on website analytics

Setting Up Heatmap Tracking with Hotjar or Microsoft Clarity

· by Digitelia · 4 min read

Heatmap tracking has gone from “expensive enterprise tool” to “free utility every site should have” with the rise of Microsoft Clarity in 2020-2023. The marketing teams that aren’t using heatmaps in 2026 are leaving easy CRO wins on the table — and given Clarity’s free pricing, there’s no remaining cost barrier.

This guide walks through setup, the Hotjar vs Clarity decision, what insights to actually extract from heatmaps, and how to integrate them into your broader CRO workflow.

User behavior analytics dashboard

What heatmaps actually show

Three core data types:

1. Click heatmaps: where users click on each page. Hot spots = high click density; cold zones = ignored areas.

2. Scroll heatmaps: how far down the page users scroll. Shows where 50%, 75%, 90% of viewers dropped off.

3. Move heatmaps: where users hover their cursor. Approximate proxy for attention (less precise than click but useful).

Plus session recordings: actual replay of individual user sessions showing what they did.

Combined, heatmaps tell you what users actually do, not what you think they do.

Hotjar vs Microsoft Clarity

The two main tools. Quick comparison:

Hotjar

Pros:

  • More mature feature set: surveys, polls, feedback widgets included
  • Better filtering and segmentation
  • Stronger session recording experience
  • Established workflow integrations

Cons:

  • Paid (starts ~$32/month for serious use; sampling on free tier)
  • Sampling on lower tiers means missing some sessions

Best for: established teams with budget that want comprehensive UX research suite.

Microsoft Clarity

Pros:

  • Completely free, no sampling, unlimited usage
  • Comparable core features (heatmaps, session recordings)
  • AI-powered insights (rage clicks, dead clicks, JS errors)
  • Integrates with Google Analytics

Cons:

  • Less polished UI
  • Fewer integrations than Hotjar
  • No native survey/feedback widget
  • Microsoft data privacy considerations for some clients

Best for: SMBs and growth-stage teams. Anyone who wants heatmaps but doesn’t need the full suite.

For 90% of cases in 2026: start with Clarity. It’s free, no sampling, comprehensive enough. Upgrade to Hotjar if you specifically need its advanced features.

Setup: Microsoft Clarity (15 minutes)

  1. Go to clarity.microsoft.com, sign up with a Microsoft account.
  2. Create a project with your domain.
  3. Get the installation snippet.
  4. Install via Google Tag Manager (recommended) or paste directly in <head>.

GTM installation:

  • Tags → New → Custom HTML tag
  • Paste the Clarity snippet
  • Trigger: All Pages
  • Publish

Verify by visiting your site, then waiting 1-2 hours for data to appear in Clarity dashboard.

Configure:

  • Heatmaps: automatically generated for high-traffic pages
  • Recordings: automatically captured (with sampling on very high-traffic sites)
  • Smart events: AI-detected user behaviors (rage clicks, etc.)

Setup: Hotjar (15 minutes)

  1. Sign up at hotjar.com.
  2. Add your site, get the snippet.
  3. Install via GTM or paste in <head>.
  4. Configure:
    • Which pages to track (default: all)
    • Sampling rate (paid plans have higher sampling)
    • Conversion goals to tag sessions

Validate via Hotjar dashboard within 1-2 hours.

Heatmap analysis screen

What to look at (and what to ignore)

Heatmaps generate lots of pretty pictures. The actionable insights:

High-value pages to analyze

  • Homepage
  • Top 3-5 landing pages by paid traffic
  • Top 3-5 product or service pages
  • Pricing page
  • Checkout / conversion form pages

Analyze each weekly during active optimization periods; monthly otherwise.

Click heatmap insights

Look for:

  • Users clicking non-clickable elements (signal of expected interaction not met)
  • CTAs receiving fewer clicks than secondary content (CTA design or placement issue)
  • Hot spots in unexpected places (suggests new CTA opportunities)
  • Cold zones above the fold (wasted prime real estate)

Ignore:

  • Tiny click-rate differences without statistical significance
  • Patterns based on fewer than 100 sessions (too noisy)

Scroll heatmap insights

Look for:

  • Major drop-off points (e.g., 60% leave before reaching the form)
  • Hero section showing significant scroll past — suggests hero isn’t pulling weight
  • Long pages where 80%+ of value is in the first 30%

Action implications:

  • Move important content above the drop-off line
  • Shorten pages where most users don’t read past a certain point
  • Test different hero designs if scroll-past is high

Session recording insights

Watching 10-20 sessions reveals:

  • Where users hesitate
  • Form field confusion
  • Mobile interaction problems
  • Unexpected user flows
  • Rage clicks (signals frustration)
  • Dead clicks (clicking something they expected to be interactive)

Watch 15 minutes of sessions weekly. The intuition you develop pays back.

Integrating heatmaps with broader CRO

Heatmaps alone don’t optimize anything. They’re inputs to a CRO process:

  1. Heatmaps reveal: where users behave differently than expected
  2. Hypothesis: why might that be?
  3. A/B test: implement a variant addressing the hypothesis
  4. Measure: did the variant improve conversion rate?
  5. Roll out winner

Example flow:

  • Click heatmap shows users clicking the hero image (not the CTA button)
  • Hypothesis: users expect hero image to be clickable
  • Test: make hero image clickable, leading to same destination as CTA
  • Measure: did conversion rate improve?
  • Roll out if yes

Without the CRO loop, heatmaps generate observations that never get acted on.

Common heatmap mistakes

1. Installing but never analyzing. The most common pattern. Tag fires, data collects, nobody opens the dashboard.

2. Optimizing for the wrong page. Generic homepage analysis instead of high-traffic landing pages.

3. Reading patterns from too few sessions. 30-session heatmaps are noisy. Wait for 200+ sessions before drawing conclusions.

4. Confusing correlation with causation. Hot spots on a section don’t mean that section drives conversions — could be where users got confused.

5. Ignoring mobile heatmaps. Most accounts focus on desktop. Mobile usually has different patterns and lower conversion — separate analysis needed.

6. Not using filters. Filter by source (paid vs organic), device (mobile vs desktop), converter vs non-converter. Filtered heatmaps reveal insights aggregate hide.

7. Privacy issues with PII in recordings. Session recordings can capture sensitive form data. Configure masking (both tools support it).

A 30-day heatmap setup and analysis

Week 1: Install. GTM tag installed. Verify data collecting. Configure privacy masking for sensitive fields.

Week 2: Wait. Need 100+ sessions per page minimum for reliable patterns. For low-traffic pages, this can take 4-8 weeks.

Week 3: First analysis. Top 5 pages. Click heatmap, scroll heatmap, 15-20 session recordings each.

Week 4: Hypothesis and tests. List 3-5 hypotheses based on heatmap data. Plan A/B tests for top 1-2.

By month 2, you’re running active tests informed by heatmap insights.

Privacy considerations

Heatmaps record user behavior. Compliance matters:

1. GDPR/CCPA: heatmap tracking falls under “analytics” cookie category. Requires consent in EU/UK/California.

2. Sensitive fields: payment info, passwords, PII must be masked in session recordings. Both Hotjar and Clarity provide masking — configure before collecting data.

3. Privacy policy disclosure: must mention session recording in privacy policy.

4. Data retention: shorter retention periods reduce risk. Clarity defaults to 30 days; Hotjar configurable.

Frequently asked questions

Will heatmaps slow my site? Both tools are lightweight (10-50KB scripts). Net performance impact negligible.

Can I run both Hotjar and Clarity? Yes, no conflict. Some teams do this temporarily during evaluation.

Do heatmaps work for single-page apps? Yes, both support SPAs. May need configuration for virtual page changes.

Are heatmaps useful for B2B SaaS? Very. Insights about onboarding flows, dashboard usage, feature discovery come straight from session recordings.

What’s the minimum traffic for heatmaps to be useful? Per page: 100 sessions minimum for click heatmap clarity; 30 sessions for scroll heatmap; 10-20 for session recording insights.

Heatmap tracking is one of those marketing tools where the cost-to-value ratio is absurd — free (Clarity) or cheap (Hotjar), with insights that consistently surface CRO opportunities worth thousands. The discipline isn’t in setting them up; it’s in actually reviewing the data weekly. Build the habit, and your conversion rates improve quarterly without any new spend.

Tagged

#heatmaps#hotjar#clarity#ux#cro#all-audiences