Web Analytics Information

Mouseflow

How is my page doing?

Many birds silhouetted against  a vibrant sunset over low mountains
Birds at Sunset Image by Giani Pralea from Pixabay

Mouseflow Uses

Adobe Analytics tells us how many visitors have viewed your page, but what if you want to know more about how visitors are interacting with the page?

Global Digital uses a software called Mouseflow to help answer questions like:

  • Are people clicking on a specific element on the page?
  • How far do people scroll down this page?
  • Where are people spending the most time on a page?
  • Do people on mobile devices behave differently with the page than visitors using a desktop computer?
  • Are there any issues that could be causing a poor user experience?
  • Is there something wrong with a donation form that is preventing people from converting?

The Global Digital team can provide you with heatmaps and session recordings to provide insight into the interactions on your page, as well as instruction on how to interpret this information.

Please note: Mouseflow only stores heatmaps of the most current version of a page. If you plan to make changes to a page and want to see how user behavior is impacted, please request heatmaps BEFORE you alter your page so that we can extract heatmaps while they are available. We will then pull a second set of heatmaps after your changes have been implemented so that you can compare performance before and after. 

Please also note: we cannot pull heatmaps for archival purposes (pull and store before page changes) unless they have a minimum of 100 page views in the last 3 months. Furthermore, in order to pull heatmaps for multiple device types, there needs to be at least 50 page views in the last 3 months per each device type (Mobile, Desktop).

Interested in learning more? Want to request a heatmap or recording? 

Marketing Requests Portal ticket

 

How is my page doing? Learn how to interpret your own heatmaps. 

Below you can find some questions to consider when viewing your heatmaps and instructional diagrams as to how you can interpret them.

 

Scroll Heatmap

Scroll heatmaps give us an understanding of how far down a visitor is willing to scroll on our page and view the associated content. When reading these heatmaps there are two key pieces to look at. First, notice the gradient color overlay on your page. Warmer colors (red, orange, yellow) indicate the volume of visitors who saw this content in their browser window; cooler colors, (green, blue, purple), indicate that fewer people saw the content. The second key indicator here are the percentage markers on the right side of the page (may need to zoom in to see). These telling us what percentage of viewers have scrolled to that part of the page. Mouseflow will mark every 10% drop off (ex. 90%, 80%, 70%, etc.).

 

Special note about the impact of anchor links- When users click anchor links to "jump" down the page, this is NOT recorded as a "scroll" activity. If you examine your Attention heatmap on a page with anchor links, you'll often see "hot" spots down the page where visitors jumped to via anchor links above.

 

Questions to consider when viewing scroll heatmaps

  1. Do the key areas of my page correlate with areas of high scroll depth (warmer colors and higher percentages)?
  2. Is there key information located in an area with low scroll depth (cooler colors and lower percentages)?
  3. Are there drastic differences between mobile and desktop versions of my page? We expect these to be different, but if you're noticing that one version has a much lower scroll depth than the other, consider how that layout translates on that device.

 

How to Read a Scroll Heatmap where red and yellow indicate heavy viewing and blue and purple show light interaction
How to Read - Scroll Heatmap Color gradient indicates how far visitors scroll down the page and corresponds with percentages © TNC

Attention Heatmap

Attention heatmaps give us an understanding of where visitors are spending their time on a page, and visualize this attention through a color gradient overlay. When viewing your heatmap, look for warmer colors (reds, oranges, yellows) to let you know visitors are spending a longer time in those sections. Examples of areas that tend to have high attention are: videos, interactive components, and often large text areas that take time to read. Examples of areas that tend to have low attention are: static images and content located further down the page. At first glance they can look very similar to Scroll heatmaps, but there are more apparent differences when pages leverage anchor links for example (please review the Scroll map section for more detail).

 

Questions to consider when viewing attention heatmaps

  1. What areas are receiving the highest attention? Do they correlate with the goals for this page?
  2. How does this heatmap compare to scroll heatmap? Do attention and scroll depth correlate?
  3. Do high and low attention areas match across device types? 
How to read an attention heatmap where the red and yellow colors show high attention and the blue and purple colors show lack of attention.
How to Read - Attention Heatmap Warmer colors show where most time was spent when page was viewed. © TNC

Click Heatmap 

While we track engagement with many components in Adobe Analytics, we don’t track everything. Click heatmaps are a great resource to track what components are engaged with the most. They can provide marketers with the general information they need to analyze results or find areas that need improvements.

 

Note on Click heatmaps: Reported clicks will not be a 1:1 match of tracked components out of Adobe Analytics. Videos clicks are not recorded due to embedded YouTube iframe. 

 

Questions to consider when viewing click heatmaps

  1. What areas have the highest click activity? Are these areas actually clickable?
  2. Is click activity prevalent throughout the page, or is it more concentrated in one area?
  3. What is the click through rate on linked components/text? (CTR = clicks/total page views)
How to read a click heatmap where the colored areas show where people are clicking
How to Read - Click Heatmap Color represents click density and click locations on the page © TNC

 

 

Differences Between Mobile and Desktop Heatmaps

 
 
Attention and Scroll heatmaps on desktop vs mobile, mobile attention can be more varied and jump photo to photo
Heatmaps desktop vs mobile Due to the responsive nature of our pages, and our attempts to continually improve our mobile experience, we like to evaluate both mobile and desktop heatmaps for our pages. © TNC