4 min read

Heatmaps

Pro Feature

Visualize where users click, how far they scroll, and which areas of your pages get the most attention. Heatmaps aggregate thousands of interactions into easy-to-understand visual overlays.

Heatmaps are available on Pro, Scale, and Enterprise plans. Upgrade your plan to enable this feature.

Overview

Heatmaps transform individual user interactions into aggregate visualizations. Instead of watching individual sessions, see patterns across all visitors to identify UX issues and optimization opportunities.

Types of Heatmaps

Type	What It Shows	Best For
Click Heatmap	Where users click	Button placement, CTA optimization
Scroll Heatmap	How far users scroll	Content placement, fold optimization
Move Heatmap	Mouse movement patterns	User attention, reading patterns

Enabling Heatmaps

Go to Settings → Your Website → Features
Toggle Heatmaps to enabled
Save changes

Heatmap data collection starts immediately for new visitors.

Heatmaps require sufficient data to be meaningful. We recommend at least 100 sessions per page before drawing conclusions.

Click Heatmaps

Understanding Click Patterns

Click heatmaps show where users click or tap:

Hot spots (red): High click concentration
Warm spots (yellow/orange): Moderate click activity
Cold spots (blue/green): Low click activity

Common Insights

Dead clicks: Users clicking non-interactive elements (indicates confusion)
Rage clicks: Multiple rapid clicks (indicates frustration)
Missed CTAs: Important buttons getting few clicks
Unexpected hot spots: Users clicking decorative elements

Filtering Clicks

Filter by:

Device type (desktop, mobile, tablet)
Date range
Traffic source
Country

Scroll Heatmaps

Understanding Scroll Depth

Scroll heatmaps show how far users scroll down the page:

100% (top): All visitors see this area
80-100%: High visibility zone
50-80%: Above the fold for most
< 50%: Below the fold, declining attention

Key Metrics

Metric	Description
Average scroll depth	How far the average visitor scrolls
Fold line	Where "above the fold" ends for most users
Drop-off points	Where users stop scrolling

Optimization Tips

Place CTAs above the fold: Ensure primary actions are visible immediately
Add visual cues: Arrows or gradients indicating more content below
Break up long content: Use headers, images, and whitespace
Test page length: Sometimes shorter pages convert better

Viewing Heatmaps

Heatmap Dashboard

Navigate to Heatmaps in your dashboard:

Select a page from the list
Choose heatmap type (Click, Scroll, Move)
Set date range and filters
View the overlay on a screenshot of your page

Taking Screenshots

Zenovay automatically captures page screenshots for heatmap visualization. Screenshots update:

When page content significantly changes
Weekly for active pages
On-demand via dashboard

Screenshots may not reflect dynamic content or personalized pages. Use the "Refresh Screenshot" button to capture the current state.

Comparing Devices

Desktop and mobile users behave differently. Always compare heatmaps across devices:

Desktop vs Mobile

Behavior	Desktop	Mobile
Scroll depth	Typically deeper	Shorter sessions
Click targets	Precise clicks	Larger tap targets needed
Viewport	Wide, horizontal	Narrow, vertical
Navigation	Hover states visible	Tap-only interaction

Privacy Considerations

Heatmaps aggregate anonymous data:

No personal information captured
Individual users not identifiable
Only aggregate patterns shown
Respects DNT settings

API Access

Access heatmap data programmatically:

GET /api/websites/:websiteId/heatmaps/:pageUrl
Authorization: Bearer YOUR_API_KEY

Response includes click coordinates, scroll depth data, and session counts.

Best Practices

Wait for sufficient data: 100+ sessions minimum for reliable patterns
Compare devices: Mobile and desktop often differ significantly
Check multiple pages: Not just the homepage
Correlate with analytics: Use quantitative data to prioritize which pages to analyze
Test changes: Create A/B tests based on heatmap insights

Next Steps

Session Replay - Watch individual user sessions
Error Tracking - Capture JavaScript errors
Custom Events - Track specific interactions