Heatmaps

Visualize where visitors click and how far they scroll on your pages.

Overview

Heatmaps provide a visual representation of user interaction with your pages. They show you what captures attention, what gets clicked, and how far visitors scroll — insights you can’t get from standard analytics reports.

Navigate to Heatmaps in the main menu to access this feature.

Types of Heatmaps

Click Heatmaps

See where visitors click on your pages.

• Red/Orange areas — High click activity (hot spots)
• Yellow/Green areas — Moderate click activity
• Blue/No color — Low or no click activity

Click heatmaps reveal:

• Which elements attract the most clicks
• Whether visitors click on non-clickable elements (indicating confusion)
• If important buttons or links are being ignored
• How click behavior differs across devices

Scroll Heatmaps

See how far visitors scroll down your pages.

• Red/Orange areas — Almost all visitors see this content
• Yellow/Green areas — Some visitors scroll this far
• Blue areas — Few visitors reach this point

Scroll heatmaps reveal:

• How much of your content visitors actually see
• Where visitors lose interest and stop scrolling
• Whether important content is placed too far down
• If your pages are the right length

Viewing Heatmaps

1. Navigate to Heatmaps
2. Select the page you want to analyze
3. Choose your heatmap type (click or scroll)
4. Select your date range
5. Choose device type (desktop, tablet, or mobile)

The heatmap overlays on top of your actual page, showing interaction patterns.

Setting Up Heatmaps

Heatmaps are automatically captured for your pages once you have the Ghost Metrics tracking code installed. However, you may want to configure which pages to track.

Configuring Tracked Pages

By default, heatmaps may be enabled for all pages or a specific set. To configure:

1. Go to Heatmaps settings
2. Define which pages to track (by URL pattern)
3. Set sample rate if needed (for high-traffic sites)

Sample Rate

For very high-traffic sites, you can set a sample rate to reduce data collection while still getting statistically valid results.

Analyzing Click Heatmaps

Look for Unexpected Patterns

• Clicks on non-links — Visitors may think images or text are clickable
• Ignored CTAs — Important buttons not getting clicks
• Navigation patterns — Which menu items get used

Compare Desktop vs Mobile

Click patterns often differ dramatically:

• Mobile users may miss elements visible on desktop
• Touch targets may be too small on mobile
• Navigation behavior changes on smaller screens

Check Above vs Below the Fold

• Content “above the fold” (visible without scrolling) typically gets more interaction
• Important CTAs should be in high-visibility areas

Analyzing Scroll Heatmaps

Find the Fold Line

The “average fold” shows where the initial viewport ends for most visitors. Content below this line requires scrolling.

Identify Drop-Off Points

Look for sharp color transitions — these indicate where visitors stop scrolling. Ask:

• Is important content below this point?
• Is there a visual cue that makes visitors think the page ended?
• Is the content above this point engaging enough?

Evaluate Page Length

• If most visitors reach the bottom, your page length is appropriate
• If visitors stop halfway, consider shortening the page or improving content

Use Cases

Optimize Landing Pages

1. View click heatmap for your landing page
2. Check if the main CTA is getting clicks
3. Look for distracting elements stealing attention
4. Verify scroll depth reaches your conversion elements

Improve Navigation

1. View click heatmap for pages with navigation
2. See which menu items are used most
3. Identify unused navigation elements
4. Consider reorganizing based on actual usage

Validate Page Redesigns

1. Capture heatmaps before a redesign
2. Implement changes
3. Capture heatmaps after launch
4. Compare interaction patterns

Identify Content Issues

1. View scroll heatmap for long content pages
2. Find where visitors stop reading
3. Improve content at drop-off points
4. Consider restructuring or shortening content

Best Practices

Wait for Sufficient Data

Heatmaps need enough visitor interactions to be meaningful:

• Wait for at least 100-200 visits to a page
• More traffic = more reliable patterns
• Don’t draw conclusions from sparse data

Compare Device Types

Always check desktop, tablet, and mobile separately. Each has different:

• Screen sizes and fold positions
• Interaction methods (click vs touch)
• Navigation patterns

Look at Multiple Pages

Don’t just analyze your homepage. Check:

• High-traffic landing pages
• Key conversion pages
• Pages with high bounce rates
• Important content pages

Combine with Other Data

Use heatmaps alongside:

• Session recordings — Watch actual behavior in context
• Analytics reports — Understand traffic and conversion data
• Form analytics — See form interaction details

Regular Review

Visitor behavior changes over time. Review heatmaps periodically, especially after:

• Website changes
• New campaigns
• Seasonal shifts
• Significant traffic changes

Limitations

• Heatmaps show aggregate patterns, not individual behavior
• Dynamic content may not display correctly in heatmap view
• Some interactive elements (pop-ups, modals) may not be captured
• Very low-traffic pages may not have enough data

Troubleshooting

Blank Heatmaps or Large Empty Spaces

If your heatmap displays blank areas or appears completely empty, there are several common causes.

HTTP/HTTPS Mismatch

Ensure your website URL protocol matches the heatmap configuration. If your site uses HTTPS but the heatmap is configured for HTTP (or vice versa), the screenshot may fail to render.

When configuring heatmap URLs:

• “Equals simple” ignores the protocol, URL parameters, and trailing slashes — use this for easier matching
• “Equals exactly” requires an exact match including protocol — use this only when you need precise URL matching

CORS (Cross-Origin Resource Sharing) Issues

If you see a blank heatmap and your browser console shows an error like “blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header,” the tracking code cannot access your website’s resources.

To fix this:

1. Add the Access-Control-Allow-Origin header to your server responses
2. For CSS files loaded from a CDN, add the crossorigin="anonymous" attribute to your stylesheet links:

<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin="anonymous">

Contact your web developer or hosting provider if you need help configuring CORS headers.

100% Element Height Issue

Elements with CSS height: 100% can cause blank areas or rendering issues in heatmaps. This is common with full-height hero sections or viewport-height containers.

To fix this, add a maximum height to the problematic element:

.hero-section {
  max-height: 1000px;
}

To apply this fix only for heatmap screenshots (without affecting your live site), use the .piwikHeatmap selector:

html.piwikHeatmap .hero-section {
  max-height: 1000px;
}

Missing CSS Files

If the heatmap screenshot looks broken or unstyled, CSS files may not be loading correctly. Check your browser console for 404 errors on CSS files.

To fix this:

1. Ensure all CSS files are accessible from the URLs referenced in your HTML
2. If CSS files have moved, update the references or set up redirects
3. Delete the existing heatmap screenshot in Ghost Metrics and let it regenerate

Heatmap Not Recording

If no data is being collected:

1. Verify the tracking code is installed correctly on the page
2. Check that the page URL matches your heatmap configuration
3. Ensure the heatmap is active (not paused or ended)
4. Wait for sufficient traffic — new heatmaps need time to collect data

Screenshot Shows Wrong Page Version

Heatmap screenshots are captured at a point in time. If your page has changed since the screenshot was taken, delete the existing screenshot to trigger a new capture.

Next Steps

• Session Recordings — Watch actual visitor sessions
• Form Analytics — Analyze form interactions
• Behavior Reports — See page performance data