Heatmap & Session Recording Tools -- Hotjar, Crazy Egg & Microsoft Clarity

In this tutorial, you'll learn about Heatmap & Session Recording Tools. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Heatmap and session recording tools like Hotjar, Crazy Egg, and Clarity visualize user clicks, scrolls, and behavior through heatmaps and video replays.

What You'll Learn

In this tutorial, you will learn how to deploy heatmap and session recording tools, interpret visual behavior data, and use insights to improve UX and conversion rates across landing pages and product flows.

Why It Matters

Traditional analytics tell you what happened (page views, bounce rate) but not why. Heatmaps and session recordings show the why: where users click, how far they scroll, what they ignore, and where they get confused. Companies that use behavior analytics improve conversion rates by 20-40% on average.

Real-World Use

DodaTech used Hotjar session recordings to discover that 62% of users clicked a non-clickable FAQ question, expecting an accordion expand. Adding clickable accordions reduced bounce rate by 18% and increased FAQ engagement by 3x.

Session Recording Architecture

flowchart LR
    A[User Browser] --> B[Recording Script]
    B --> C[DOM Snapshot]
    B --> D[Mouse Events]
    B --> E[Scroll Events]
    B --> F[Resize Events]
    C --> G[Compression]
    D --> G
    E --> G
    F --> G
    G --> H[Server Storage]
    H --> I[Player Interface]
    I --> J[Analyst Reviews]
    I --> K[Heatmap Generation]

Deploying Hotjar

Hotjar offers a simple JavaScript snippet for deployment:

<!-- Hotjar Tracking Code -->
<script>
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:1234567,hjsv:6};
    a=o.getElementsByTagName("head")[0];
    r=o.createElement("script");r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,"https://static.hotjar.com/c/hotjar-",".js?sv=");
</script>

Expected behavior: The snippet loads asynchronously without affecting page performance. Recordings appear in the Hotjar dashboard within minutes. The free tier supports 35 daily sessions.

Configuring Microsoft Clarity

Microsoft Clarity is a free alternative with no session limits:

<script type="text/javascript">
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window,document,"clarity","script","your-project-id");
</script>

Expected behavior: Recordings start immediately. Clarity automatically detects rage clicks, dead clicks, and excessive scrolling. The dashboard shows recordings, heatmaps, and session replays with no usage limits.

Setting Up Crazy Egg Snapshots

Crazy Egg specializes in snapshot-based heatmaps rather than continuous recording:

// Crazy Egg tracking snippet
<script type="text/javascript">
  setTimeout(function(){
    var a=document.createElement("script");
    var b=document.getElementsByTagName("script")[0];
    a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/1234/5678.js?"+Math.floor(new Date().getTime()/3600000);
    a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b);
  }, 1);
</script>

Confetti mode in Crazy Egg shows individual click points as colored dots, useful for identifying precise UI element interaction patterns. The Confetti view reveals whether users click the expected CTA button or miss it entirely.

Analyzing Click Heatmaps

Heatmaps aggregate clicks across all visitors. Use JavaScript to identify the most-clicked elements programmatically:

// Track element click positions for custom heatmap
document.addEventListener("click", (e) => {
  const rect = e.target.getBoundingClientRect();
  const data = {
    x: Math.round(e.clientX),
    y: Math.round(e.clientY),
    pageX: Math.round(e.pageX + window.scrollX),
    pageY: Math.round(e.pageY + window.scrollY),
    targetTag: e.target.tagName,
    targetId: e.target.id || null,
    targetClass: e.target.className || null,
    viewportWidth: window.innerWidth,
    viewportHeight: window.innerHeight,
    timestamp: new Date().toISOString(),
  };
  navigator.sendBeacon("/api/heatmap", JSON.stringify(data));
});

Expected behavior: Click coordinates are sent via sendBeacon for reliable delivery even during page unload. Server-side aggregation builds a heatmap grid for visualization.

Filtering and Segmenting Recordings

Most tools allow filtering by page, device, browser, and custom attributes:

// Hotjar Identify API for user segmentation
hj("identify", null, {
  user_id: "usr_abc123",
  plan: "enterprise",
  signup_date: "2026-01-15",
});

Expected behavior: Recordings from enterprise users appear in a filtered segment. You can compare behavior between free and paid users to identify friction points in the upgrade flow.

Tool Comparison

Common Errors

1. Recording Sensitive Form Fields

Heatmap scripts can capture passwords, credit card numbers, and personal data entered into forms. Configure privacy settings to mask specific selectors. In Hotjar, use the h-j- class prefix to exclude elements.

2. Overlooking GDPR and CCPA Compliance

Session recordings capture personal data by default. You must obtain consent before recording, provide opt-out mechanisms, and configure data retention limits. Clarity offers automatic PII redaction.

3. Recording Without Sample Size Validation

Drawing conclusions from 5 recordings is misleading. Behavioral patterns require statistical significance. Wait until you have at least 50-100 recordings per page segment before making changes.

4. Page Performance Degradation

Multiple analytics scripts including heatmap tools slow page load. Audit total script weight. Clarity adds ~25KB gzipped, Hotjar adds ~35KB. Use async loading and delay non-critical scripts.

5. Ignoring Mobile vs Desktop Differences

Mobile heatmaps differ significantly from desktop due to different viewport sizes and interaction patterns. Analyze mobile and desktop recordings separately rather than aggregating them.

6. Not Excluding Bot Traffic

Heatmap tools cannot distinguish human clicks from bot interactions. Automated crawlers and monitoring tools generate clicks that skew heatmap data. Configure IP exclusion lists and bot filtering in your heatmap tool settings to maintain data accuracy.

7. Recording Without User Consent

Session recording laws in the EU and California require explicit user consent before recording. Implement a consent management platform that blocks recording scripts until the user opts in. Recordings started before consent are legally non-compliant.

Practice Questions

1. What is the difference between a click heatmap and a scroll heatmap? A click heatmap shows where users click or tap on a page. A scroll heatmap shows what percentage of users reach each vertical position on the page, indicating content visibility.

2. How does Microsoft Clarity detect rage clicks? Clarity detects multiple rapid clicks on the same element within a short time window. It flags these as rage clicks, indicating user frustration with non-responsive elements.

3. Why should session recordings have privacy masking? Session recordings can capture personally identifiable information (PII) entered into forms, including emails, addresses, and payment data. Masking protects user privacy and ensures legal Compliance.

4. What is a dead click in heatmap analysis? A dead click occurs when a user clicks an element that has no click handler or link. These reveal elements users expect to be interactive but are not, such as decorative images or static FAQ items.

5. Challenge: Deploy Hotjar and Clarity simultaneously on a test site. Record 50 sessions, export click heatmap data, and identify three UX improvements. Implement one change and measure the difference in click behavior using before-and-after heatmap comparison.

Mini Project

Build a custom heatmap dashboard that accepts click coordinate data from a sendBeacon API, stores it in PostgreSQL with session identifiers, and renders an interactive overlay heatmap using HTML Canvas. Include filters for device type, page URL, and date range. Compare your custom heatmap data with Clarity or Hotjar data to validate accuracy.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.