Skip to content
Academy

Hotjar & Microsoft Clarity

Use heatmaps and session recordings to see exactly where visitors click, scroll, and give up, then fix those problems to get more conversions.

BEGINNERยท10 MIN READยทMARKETING TOOLSยทUPDATED JUN 2026
Share:

Most marketers guess why their website isn't converting. Hotjar and Microsoft Clarity let you stop guessing. These tools record real visitor sessions (like a CCTV camera for your website) and show you visual heatmaps (color-coded maps of where people click and scroll). Instead of staring at numbers in Google Analytics, you watch actual humans use your site.

Quick Summary

  • Hotjar and Microsoft Clarity are behavioral analytics tools that show HOW visitors use your website, not just how many visited.
  • Session recordings let you replay real user journeys to spot confusion, dead ends, and friction points.
  • Heatmaps aggregate (combine) thousands of sessions into one visual image showing click and scroll patterns.
  • Microsoft Clarity is 100% free with no recording limits. Hotjar has a free tier but charges for advanced features.
  • These tools answer the question Google Analytics cannot: "Why are visitors leaving without buying?"

What Are Behavioral Analytics Tools?

Google Analytics tells you that 5,000 people visited your checkout page and 4,200 left without buying. That is useful. But it doesn't tell you WHY.

Behavioral analytics tools answer the "why." They record what users actually do: where they click, how far they scroll, where they get confused, what makes them rage-click (clicking the same spot over and over in frustration), and where they abandon your site.

Think of the difference like this: Google Analytics gives you a scoreboard. Hotjar and Clarity give you the match footage.

Note

The global behavioral analytics market was valued at $4.13 billion in 2024 and is projected to reach $16.68 billion by 2030, growing at 26.5% per year (Grand View Research). Every serious website owner is moving toward understanding behavior, not just traffic numbers.


The Two Tools Side by Side

Microsoft Clarity

Microsoft Clarity launched publicly in 2020. It was originally built internally by Microsoft to study user behavior on products like Bing. It has grown into one of the most widely used behavioral analytics tools, now processing more than 1 petabyte of data from over 100 million users every month.

Key facts:

  • Free forever: no traffic limits, no recording caps, no paid tier required
  • Session recordings with automatic detection of rage clicks and dead clicks (clicking something that isn't actually a link)
  • Heatmaps showing click, scroll, and area engagement patterns
  • AI-powered summaries that turn session data into plain-English insights
  • Integrates directly with Google Analytics 4

Hotjar

Hotjar is a paid tool (with a limited free tier) that adds qualitative research features on top of behavioral data.

Key facts:

  • Heatmaps, session recordings, and funnels (like Clarity)
  • Built-in surveys and feedback widgets to ask visitors direct questions
  • User interview scheduling (recruit real users to talk to)
  • More integrations: Slack, Jira, HubSpot, Trello, and others
  • Hotjar was acquired into Contentsquare, and its behavior-analytics features now live under Contentsquare's "Experience Analytics" line, starting around $49/month (annual billing) for a starter volume of sessions, though Hotjar's legacy self-serve plans (from roughly $32-39/month) remain available for existing accounts

When to Use Which

NeedUse
Zero budget, unlimited recordingsMicrosoft Clarity
Need to ask users direct questionsHotjar
Running CRO (conversion optimization) professionallyHotjar
Complement to Google AnalyticsMicrosoft Clarity
Small business, starter toolkitMicrosoft Clarity

How Heatmaps Work

A heatmap is a single image that layers data from thousands of visitor sessions onto your webpage. Areas with lots of activity show up in red or orange. Areas nobody touches show up in blue or grey.

There are three types of heatmaps:

  1. Click maps, show where people click (and rage-click). Red clusters on non-clickable elements mean visitors expect something to be a button.
  2. Scroll maps, show how far down a page visitors scroll before leaving. Most people only see content above the "fold" (the part of the page visible without scrolling).
  3. Move maps (Hotjar only), track mouse cursor movement. On desktop, where people move their cursor roughly correlates to where their eyes are looking.
Real Example

Real Example, V1CE + Credo (2024): UK CRO agency Credo used Hotjar's Engagement Zone heatmaps on the homepage of V1CE, an ecommerce company selling contactless business cards. The heatmaps showed that visitors engaged heavily with case studies but ignored product feature sections. Credo moved case studies higher on the page. Result: 14.5% rise in page engagement and a 220% revenue increase for V1CE.


How Session Recordings Work

A session recording (also called a session replay) captures everything a single visitor does during their time on your site: mouse movements, clicks, form inputs (with sensitive data masked for privacy), scrolling, tab switching, and more.

You watch recordings to find "friction", moments where users get confused, give up, or behave unexpectedly. Common things to look for:

  • Visitors clicking on something that is not a button
  • Users filling out a form, then deleting what they typed and leaving
  • Visitors scrolling back up to re-read something (usually means they're confused)
  • Rage clicks on a broken element
  • Users abandoning a page immediately after loading (fast bounce with no scroll)

A Real CRO Workflow Using These Tools

Here is the exact process CRO professionals use, step by step.

Step 1, Set up the tool. Install Clarity or Hotjar by adding one script tag to your website's <head>. Both have no-code plugins for WordPress, Shopify, and Webflow.

Step 2, Let data accumulate. Wait until you have at least 100 sessions on each page you want to study. For high-traffic sites, a few days. For lower-traffic sites, a week or two.

Step 3, Start with scroll maps on your key pages. Check your homepage, pricing page, and top landing pages. If fewer than 50% of visitors reach your main call-to-action button (the button you want them to press), it's too far down the page.

Step 4, Watch 10-20 session recordings. Filter for sessions on the specific page you're investigating. Watch at 2-4x speed. Take notes on moments that surprise you.

Step 5, Look for patterns. One confused visitor means nothing. Ten confused visitors doing the same thing means you have a real problem to fix.

Step 6, Form a hypothesis. "I think visitors are leaving the pricing page because they can't see the free trial button." A hypothesis has a specific cause and a predicted effect.

Step 7, Make the change. Fix the issue you identified.

Step 8, Measure the result. Check your conversion rate in Google Analytics before and after. Or run an A/B test (split test) if you have enough traffic.


Real Company Results

Swiss Gear + The Good (CRO Agency): The Good deployed Hotjar heatmaps and session recordings on Swiss Gear's website and identified three distinct user types: airport travelers on mobile, desktop users from paid ads, and bargain hunters. The mobile experience had confusing icons and broken filters. After fixing the mobile navigation and adding targeted hero images, Swiss Gear saw mobile bounce rate drop 8%, time on site increase 84%, mobile revenue per visit rise 28%, and overall revenue increase 132.7%.

Instacar + Microsoft Clarity: Instacar used Clarity's session recordings and heatmaps to identify friction in their lead capture forms. After acting on those insights, form submissions increased by 80%.

AllEvents: Used Clarity to understand drop-off in their RSVP flow and improved RSVP conversions by 10%.


Setting Up Microsoft Clarity (Step-by-Step)

  1. Go to clarity.microsoft.com and sign in with a Microsoft account (or create a free one).
  2. Click "Add new project" and enter your website URL.
  3. Copy the tracking script from the "Setup" tab.
  4. Paste it into the <head> section of your site. On WordPress: use a plugin like "Insert Headers and Footers." On Shopify: paste into theme.liquid. On Webflow: paste in Project Settings > Custom Code.
  5. Wait 24 hours for data to start appearing.
  6. Connect Google Analytics if you use it (Settings > Google Analytics integration).
Common Mistake

Common mistakes that waste your time:

  1. Watching every recording. Filter by session duration (over 30 seconds), by specific pages, or by users who rage-clicked. Random sampling is fine, you don't need to watch all of them.

  2. Acting on a single session. One user's confusion might be their personal quirk. Look for at least 5-10 users showing the same pattern before making changes.

  3. Not blocking your own visits. Your own visits to your site will pollute the data. In Clarity, go to Settings > IP blocking and add your IP address. In Hotjar, install the Hotjar browser extension to exclude yourself.

  4. Ignoring mobile recordings. In most markets, over 60% of web traffic is mobile. Filter specifically for mobile sessions, the mobile experience is often completely different from desktop and may have separate problems.

  5. Using heatmaps on pages that change frequently. Heatmaps aggregate data over time. If your page layout changed, old heatmap data will be misleading. Reset heatmaps after major design changes.


Clarity's AI Features

Microsoft has continued adding Copilot-powered AI features to Clarity. These include:

  • AI Summaries: Instead of watching 50 recordings, Clarity's AI reads them and writes a plain-English summary of what users did and where they struggled.
  • AI Chat: Ask questions like "What's confusing users on my checkout page?" and get answers based on your actual session data.
  • AI Visibility: Track whether AI search tools like ChatGPT and Bing Copilot are citing and surfacing your content.
  • AI Bot Activity: Released in January 2026, this dashboard shows which AI crawlers and automated systems are visiting your site, how often, and which pages they hit, useful now that AI search traffic is a meaningful share of visits.

These features are all included in the free tier.


Combining Clarity with Google Analytics

These tools are complementary (they work better together than alone). The recommended stack:

  • Google Analytics 4 tells you WHAT happened: traffic volume, conversion rates, pages visited, revenue.
  • Microsoft Clarity tells you WHY it happened: what users did on those pages, where they dropped off, what confused them.

When you see a drop-off in Google Analytics (e.g., 70% of users leave the checkout page without buying), you jump into Clarity to watch recordings of those sessions and find out what caused the drop.


The One-Line Takeaway

Stop guessing why visitors leave, install a free behavioral analytics tool today and watch your actual users struggle, then fix what you see.


Test Your Knowledge
Loading questionsโ€ฆ

โš–๏ธ Comparing platforms for your stack?

Compare features, pricing, and pros/cons side-by-side.

Compare Tools

You Might Also Like