Our attention heatmaps show you how much time users are spending on your pages. It shows what parts of the page are most and least actively engaged by using a colored overlay.
The key on the bottom left corner of the heatmap reflects the level of interaction throughout your page. A red area is where there is the most activity and then, as the color gets cooler, there is less activity. The least amount of activity is displayed in the dark blue color.
By watching the color change, you can interpret the level of activity on the page. The hotter the activity, the hotter the color. The cooler the color gets, the less activity. This is extremely valuable because you can interpret what parts of your page are the most attractive to your users. When you analyze your website, notice if important elements are in areas that are cooler: indicating they’re not getting as much attention.
We recommend putting important content in areas that are most likely to consume user attention. For example, if you have a crucial Call-to-Action element, you’ll want to put it in the red hot area of your site. Here's an example:
This heatmap also provides a quick hover menu with additional metrics about the engagement.
If you hover over any part of the page, a menu pops up that gives you more details:
Line: The exact pixel location on the page - useful for precisely locating elements.
Viewed by: The percentage of all visitors who have seen this part of your page.
Avg. Time: The average amount of time users spend in this part of the page.
Avg. Engagement: The total time of engagement (clicking, scrolling, movement, and similar activity) that users spend in this part of the page.
If you scroll down, you can hover over specific parts of your website to see this data. This really comes in handy if you’re trying to figure out how many people engage with certain pieces of content (like blog posts or photo galleries). It’s also fascinating to see the engagement for buttons, call-to-action (CTA) elements, and contact information.