JustAnalytics/Documentation

Click & Scroll Heatmaps

Visualize where users click and how far they scroll with aggregated heatmap overlays.

What are Heatmaps?#

Heatmaps provide an aggregated visual overlay of user interactions on your pages. Instead of watching individual session replays, heatmaps show patterns across hundreds or thousands of sessions at once.

JustAnalytics provides two types of heatmaps:

  • Click heatmaps -- show where users click on each page, using color intensity to indicate frequency
  • Scroll maps -- show how far down the page users scroll, revealing where attention drops off

Prerequisites#

Heatmaps require session replay to be active. Since session replay is enabled by default in monitor.js (10% sample rate, mask-all privacy), heatmap data is collected automatically.

<!-- Replay and click capture are both on by default -->
<script
  defer
  src="https://justanalytics.app/monitor.js"
  data-site-id="YOUR_SITE_ID"
></script>

If you have disabled replay with data-replay="false", heatmap data will not be collected. Re-enable replay to resume heatmap collection.

Click Heatmaps#

How They Work#

Click heatmaps aggregate click positions from all recorded sessions on a specific page URL. Each click is mapped to its position relative to the page layout, then rendered as a color gradient overlay:

| Color | Meaning | |-------|---------| | Red / Hot | High click density (most clicked area) | | Orange | Above-average clicks | | Yellow | Moderate clicks | | Green | Below-average clicks | | Blue / Cold | Low click density (few clicks) | | Transparent | No clicks recorded |

Click positions are normalized to account for different viewport widths and responsive layouts. Clicks on the same logical element are grouped together even if the element's position varies slightly between sessions.

Viewing Click Heatmaps#

  1. Navigate to Analytics > Heatmaps in your dashboard
  2. Select the Click Map tab
  3. Enter a page URL or select from the list of top pages
  4. Choose a date range (default: last 7 days)
  5. The heatmap renders as an overlay on a live screenshot of your page

Click Data Details#

Hover over any area of the heatmap to see:

  • Total clicks -- number of clicks in this region
  • Click rate -- percentage of sessions that clicked here
  • Element -- the DOM element under the cursor (tag, class, text)
  • Top referrers -- traffic sources that led to clicks in this area

Click on a hotspot to drill down:

  • View the list of sessions that clicked this element
  • Filter by device type, browser, or traffic source
  • Jump to specific session replays

Element-Level Click Report#

Below the heatmap, a table shows click data broken down by element:

| Element | Clicks | Click Rate | Rage Clicks | Dead Clicks | |---------|--------|------------|-------------|-------------| | button.cta-primary "Get Started" | 1,247 | 34.2% | 12 | 5 | | a.nav-link "Pricing" | 892 | 24.5% | 0 | 2 | | img.hero-image | 341 | 9.4% | 45 | 341 | | div.accordion-header "FAQ #1" | 234 | 6.4% | 8 | 3 |

This table helps you identify:

  • Which CTAs get the most engagement
  • Elements users click that are not interactive (high dead click rate)
  • Confusing UI elements (high rage click rate)

Scroll Maps#

How They Work#

Scroll maps show how far users scroll down each page. The page is divided into vertical zones, and each zone is colored based on what percentage of users reached that depth.

| Depth Zone Color | Meaning | |------------------|---------| | Red / Hot | Nearly all users see this content (90-100%) | | Orange | Most users reach here (70-89%) | | Yellow | Moderate reach (50-69%) | | Green | Below average (30-49%) | | Blue / Cold | Few users scroll this far (10-29%) | | Very light | Almost no users reach here (< 10%) |

Viewing Scroll Maps#

  1. Navigate to Analytics > Heatmaps
  2. Select the Scroll Map tab
  3. Enter a page URL or select from the list
  4. Choose a date range
  5. The scroll map renders as horizontal colored bands overlaid on your page

Scroll Depth Metrics#

The scroll map view includes key metrics:

  • Average scroll depth -- how far the average user scrolls (e.g., 62%)
  • Fold line -- the average "above the fold" boundary based on viewport heights
  • Content visibility -- percentage of users who saw each section of the page
  • Scroll velocity -- how fast users scroll through different sections (fast scrolling may indicate low-value content)

Scroll Depth Table#

| Depth | Viewers | % of Sessions | |-------|---------|---------------| | 0% (top) | 3,641 | 100% | | 25% | 3,284 | 90.2% | | 50% | 2,553 | 70.1% | | 75% | 1,456 | 40.0% | | 100% (bottom) | 584 | 16.0% |

URL-Based Aggregation#

Heatmaps are aggregated by page URL. JustAnalytics handles several common URL patterns:

Exact URL Matching#

By default, heatmaps aggregate data for an exact URL path:

/pricing → all sessions viewing /pricing
/blog/my-post → all sessions viewing /blog/my-post

Query Parameter Handling#

Query parameters are stripped by default when aggregating heatmap data. This means /products?sort=price and /products?sort=name are combined into a single heatmap for /products.

To create separate heatmaps for different query parameters:

  1. Open the heatmap view
  2. Click Filters > Include Query Parameters
  3. Select which parameters to include (e.g., category, tab)

Dynamic Route Segments#

For pages with dynamic segments (e.g., /products/[id]), JustAnalytics can group them:

  1. Open the heatmap view
  2. Click URL Patterns
  3. Add a pattern: /products/* -- aggregates all product pages
  4. Or use specific segments: /blog/category/* -- all category archive pages

SPA Route Handling#

For single-page applications, heatmaps track route changes detected by the monitor script. Each SPA route generates its own heatmap data, regardless of whether the page did a full reload.

Date Range Filtering#

Select the time period for heatmap data:

  • Last 24 hours -- see today's interaction patterns
  • Last 7 days -- recommended default, smooths daily variation
  • Last 30 days -- longer trends, more data
  • Custom range -- select specific start and end dates

Comparing Periods#

Use the comparison feature to see how click patterns changed:

  1. Select your primary date range
  2. Toggle Compare to previous period
  3. Hotspots that increased show in green outlines
  4. Hotspots that decreased show in red outlines
  5. New hotspots (no clicks in the previous period) show in blue

Device-Specific Heatmaps#

Interaction patterns vary significantly between desktop, tablet, and mobile. Filter heatmaps by device type:

  1. Open the heatmap view
  2. Click the Device filter
  3. Select Desktop, Tablet, or Mobile

Each device type shows the page as rendered on that viewport size, with click data from matching sessions only.

Tip: Always review mobile heatmaps separately. Tap targets and scroll behavior differ substantially from desktop.

Reading and Interpreting Heatmaps#

Common Click Patterns#

F-Pattern: Users scan the left side of the page more than the right. Common on text-heavy pages. Place CTAs along the left side.

Hotspot on non-interactive element: Users expect something to happen when they click an image, heading, or icon. Consider making these elements interactive or adding a visual cue that they are not clickable.

Clicks above the fold vs. below: If your primary CTA is below the fold and receives few clicks, consider moving it up or adding a secondary CTA above the fold.

Heatmap "dead zones": Large areas with no clicks may indicate content users ignore. Consider reorganizing or removing this content.

Common Scroll Patterns#

Sharp drop-off: A sudden decrease in scroll depth at a specific point often indicates:

  • A natural content boundary (users found what they needed)
  • A distracting element (ad, popup, or interstitial)
  • Slow-loading content (users left before it appeared)

Gradual decline: Expected behavior. Content should be prioritized by importance from top to bottom.

Bounce at the top: High percentage of users not scrolling at all suggests the above-the-fold content either answers their question immediately or fails to engage them.

Exporting Heatmap Data#

Screenshot Export#

Click Export > Screenshot to download a PNG of the current heatmap view with the overlay applied.

Data Export#

Click Export > CSV to download the raw click or scroll data:

Click data CSV columns:

  • url -- page URL
  • element_selector -- CSS selector of clicked element
  • element_text -- visible text of the element
  • click_count -- number of clicks
  • session_count -- number of unique sessions
  • rage_click_count -- rage clicks on this element
  • dead_click_count -- dead clicks on this element

Scroll data CSV columns:

  • url -- page URL
  • depth_percent -- scroll depth (0-100)
  • viewer_count -- sessions reaching this depth
  • viewer_percent -- percentage of total sessions

Best Practices#

  1. Review heatmaps weekly -- interaction patterns change as your content and design evolve
  2. Segment by device -- always check mobile separately from desktop
  3. Use with replays -- when a heatmap reveals an unexpected pattern, watch session replays to understand why
  4. A/B test with heatmaps -- compare click patterns between design variants
  5. Focus on conversion pages -- prioritize heatmap analysis on landing pages, pricing pages, and checkout flows
  6. Share with your team -- export heatmap screenshots for design reviews and sprint planning

Next Steps#