Docs / Advanced Analytics / Heatmaps

Heatmaps & Click Tracking

Last updated: January 2026 • 5 min read

Heatmaps provide visual representations of how users interact with your pages, showing where they click and how far they scroll.

Overview

SiteData offers two types of visual analytics:

Click Heatmaps

Visual overlay showing where users click on your pages

Scroll Maps

Shows how far down the page visitors scroll

Pro+ Feature: Heatmaps are available on Pro and Enterprise plans. Enable click tracking in your SDK configuration to start collecting data.

Click Heatmaps

Click heatmaps show interaction patterns across your page:

  • Hot Spots (Red) - High click concentration
  • Warm Areas (Yellow/Orange) - Moderate activity
  • Cold Areas (Blue/Green) - Low interaction

What Clicks Tell You

Pattern Interpretation Action
Clicks on non-clickable elements Users expect these to be links Make them clickable or clarify they're not
Important CTAs are cold Users aren't noticing them Improve visibility, placement, or design
Navigation items hot Users actively explore Ensure nav leads to valuable content

Scroll Depth

Scroll tracking shows how much of your page visitors actually see:

  • Above the fold - Content visible without scrolling (~100%)
  • Mid-page - Usually 50-70% of visitors
  • Bottom of page - Often only 20-30% reach here

Scroll Data Uses

  • Place important CTAs where most users will see them
  • Identify content that causes users to stop scrolling
  • Determine optimal page length for engagement
  • Test different content arrangements
Industry Benchmark: Average scroll depth is around 50-60%. Long-form content may see 30-40% reaching the bottom.

Enabling Heatmaps

To collect click data, enable click tracking in your SDK:

siteMetrics.init('YOUR_TRACKING_ID', {
    trackClicks: true   // Enable click tracking
});

Scroll depth is tracked automatically when trackScroll is enabled (default).

Data Collection: Allow 24-48 hours after enabling to collect enough data for meaningful heatmaps.

Interpreting Heatmap Data

Best Practices

  1. Collect enough data - Wait for 100+ visitors before drawing conclusions
  2. Segment by device - Desktop and mobile behavior differs significantly
  3. Consider context - Time on page affects scroll depth
  4. Compare pages - Look at similar pages to identify patterns

Common Insights

F-Pattern Reading

Users often scan pages in an F-pattern. Place key content along this path.

Banner Blindness

Users may ignore banner-like elements. Test different placements.

Fold Drop-off

Engagement often drops below the fold. Front-load important content.

Click Frustration

Multiple clicks in one area may indicate UX issues.