Introduction to Heatmaps

Heatmaps provide cues for how users explore and navigate your website via visual, aggregate data. Similar to other objects in the Library (Metrics, Funnels, etc), they can be defined, saved, and shared with teammates in Fullstory. Examine user behavior in matching sessions, improve less clicked or scrolled areas of your site and focus on elements that promote engagement or those that may lead to undesired patterns. Using Heatmaps will help you understand your audience, how and where they are engaging with your site, and the time they spent on it.

Click Maps and Scroll Maps

Heatmaps are made up of two easy to follow engagement maps: Click Maps & Scroll Maps.

Click Maps show you where visitors are clicking on your site and more importantly, the top clicked elements on your site.

Scroll Maps are a visual representation of the scrolling behavior of your users and provide scroll depth analytics for your site.

Warmer colors like pink represent the most clicked elements on your page, and cooler colors like blue represent the least clicked elements.

Mobile app heatmaps do not support scroll maps. Learn more here.

Create a new Heatmap

To configure a new Heatmap, follow the below steps:

1. Click Create > Heatmap.
2. Name your Heatmap.
3. Select the Page or URL you would like to explore.
   • For Page, select from the Page dropdown menu.
   • For URL, type to search for the URL or paste the URL into the text box.
4. Toggle Advanced Settings and select a Page Property. This is only accessible if you are pulling in custom page data using Fullstory’s API. If you are not pulling this data, Fullstory will indicate this.
5. Choose a Segment, Device Type and Time Range to apply. The Mobile device type is specifically for mobile web sessions, rather than mobile apps.
   
6. Select Click Map or Scroll Map.
7. Save the Heatmap.
8. View matching sessions below.
9. Click  to export to PDF if you’d like.
   • The PDF will include Page Name, Time Period, Segment, Device Type, Heatmap visual and Click or Scroll data.
     
     

Page vs URL

Heatmaps are powered by Pages on your website. This means, you must first select either a Page (defined by you or Fullstory) or URL you are interested in analyzing.

A page is made up of a group of URLs that share similar patterns and page structures. If your search is broader in scope, we recommend you select Page. 

For more specific searches, URLs are what we suggest. 

Under Advanced settings, select a Page property to refine search by custom page data that's passed to Fullstory via the API.

For more on when to use Page vs URL, check out this helpful article.

Click Map & Scroll Map Actions

Other important configurations to consider are Click Type and Scroll Depth.

Click Type

With Click Type, you can explore Frustration Signals such as Rage, Error & Dead Clicks helping you identify user friction on your page. In turn, you can use this data to build solutions for these signals to create an overall improved digital experience. Heatmaps will surface up to the top 25 clicks for each category (Rage, Error, Dead or All). For example, if you toggle to Error Clicks, you’ll see up to the top 25 Error Clicked elements by users on the page.

Total and User Clicks

Total clicks is the total number of clicks on the selected element, including duplicate clicks if a user clicked on that element more than once.

Users clicked is the number of unique users who clicked on the selected element.

Scroll Depth

Alternatively, Scroll Depth uses the interactive scroll marker to click & drag to see scroll depth stats anywhere on the page. Use the median fold line to understand how much of your page users typically see without scrolling at all.

Dynamic Pages

Scroll Maps aggregate results for all of the pages show you the best fit approximate Scroll Map. If you’re using dynamic pages, page length varies highly depending on the user. Dynamic pages may include pages with:

• Dynamically loading viewport content, i.e. pages where you can scroll to the bottom of the page, click “Show More,” and then more content loads into the view
• Infinite Scrolling, i.e. pages that provide an infinite stream of content for users to scroll through

Heatmaps Visualization

Once you select a Page or URL to analyze, Heatmaps will surface the visualization below.

It’s important to understand that, while the visualization is displaying one variation of the page, the data and analytics is aggregated from all URLs that represent the Page and is based on all Elements that are present in the visualization you're looking at.

If there is a specific Element that you'd like to analyze which is not currently represented in your visualization but is present on other variations of that page or URL, you can click the 'Get a new image' button to see a different rendering of the page or URL you are searching. Another option is to click on the glide path at the bottom of your heatmap. This will take you to a metric that displays the top selectors or named elements that aren't visible on the heatmap.

Above the image variation, Fullstory will tell you specific details about the visualization. 

• When choosing a Page for your search, the result is an image variation of any given URL that applies to your page definition. This means that the image displayed will represent one URL, of the many URLs, that are grouped together to make up a Page. Fullstory will tell you the Page Name, the exact URL and date the user saw the page.
• When choosing a URL for your search, the image displayed will be a representation of the specific URL you input.

The Analytics of Heatmaps

Out of the box, Heatmaps provides some beneficial top level analytics about the Page or URL you are exploring. Toggling between Click and Scroll Maps, you’ll notice key details about your page being displayed at the very top to help put context to the Heatmap you are examining.

1. Pageviews
   • A representation of total views on a page by any user, within the set time range. If a user visits the same page 3 times in a single session, Pageviews will display these views as 3 individual pieces of data.
2. Median scroll depth
   • The measure of how far down the page users typically scroll when viewing this page. The median isn't skewed by extremely large or small numbers.
3. Median time on page/URL
   • The measure of typical time users are on a page. The median isn't skewed by extremely fast or slow users and is only available when Page dropdown is selected.
4. Clicks
   • The number of clicks on the page in aggregate.
5. Users
   • The number of users who viewed the page in aggregate.

Share, Manage, and Explore

Share

An added benefit to Heatmaps is the ability to export them as a PDF so that you can share with members of your team or key stakeholders. To do so, click  to the right of the Page name or URL at the top of the Click or Scroll Map. The PDF will include Page Name, Time Period, Segment, Device, Click or Scroll data and the Heatmap visual itself. 

Manage

If an element within a click map has not yet been named, it probably should be! Admins or architects can click Create Element from the menu shown within the element’s card on the right side of the click map. This will open up the Create Element modal. To learn more about naming elements, you can read our Named Elements article. If the element has already been named, you can edit it following the same steps.

Explore

For each of the most-clicked elements shown by a click map, you can Explore as Segment or Watch Sessions. Exploring as a segment will take you to a segment defined by users who have clicked that element. Selecting Watch Sessions will scroll down to the session playlist and automatically filter it for sessions where that element was clicked.

FAQ

What’s the difference between Heatmaps and the Click and Scroll Maps available in Session Replay?

With Heatmaps, you can drill into Click and Scroll Maps outside of session replay altogether. This provides more flexibility and control as well as serving as a collaboration tool for users. Measure how page interactions change over time and across different customer segments. Define and save these in-depth analyses of how users are engaging with your page. Then, share insights with teammates similar to Metrics, Funnels and Journeys.

Click and Scroll Maps within Session Replay provide a snapshot analysis for times when you see something interesting in a session and wish to dig in right then. These quick analyses, however, cannot be saved. For saving data provided by this functionality to refer to over time, you’d want to utilize Heatmaps. 

Do Heatmaps associate with a specific user session?

Heatmaps are tied to a Page with aggregated data rather than a specific user session. Thus, you can access vital information about your page visitors a lot faster, without opening the session replay playlist.

Do Scroll Maps capture internal scrolling data?

Yes. If a website has a single internal scrolling container within a page, we will capture the scrolling data.

If I search /path URL, what does that mean for my search results? 

Depending on how your URLs are set up, searching with /path URL can provide a broader set of data in your Heatmap. For example, if your website has a category landing page with the URL of www.example.com/browse/category and has a product detail page with the URL of www.example.com/browse/product, and you search URL starts with PATH  /browse, the resulting Heatmap will display user engagement for any users that went to the category landing page (/browse/category) AND any users that went to the product detail page (/browse/product).

However, if you were only interested in analyzing user engagement for the category landing page, then you can search URL ends with PATH /category.

If I search a FULL URL, what does that mean for my search results? 

Full URLs are a complete, exact match, of only that full URL. Meaning, if you don't include query parameters, your data won't include any pageviews where query parameters were on the URL. An example of this would be if you wanted to only view user engagement from a very specific page.

What are possible elements in Click Maps?

There’s multiple elements that match the current element since there’s not enough unique attributes defined. This means the data for that element is an aggregate count across all elements that share the same CSS. If you would prefer to see the click data separated out, you’ll want to add something unique to the CSS in your site’s code. You can do this by adding element attributes.

How are pageview counts calculated? 

Scroll Maps look at page views, not users or sessions, so the numbers you see may not exactly line up with the number of users or sessions in the segment. Each page view is an instance of a page being loaded in the browser. A single user could load the page, navigate away and load the page multiple times, leading to multiple page views in a session. The manner in which the pageview counts are calculated also might create or lead to a mismatch on the counts in the metrics bar at the top of a heatmap and the pageview counts in the interactive scroll marker. This is because the pageview count in the metrics bar is totaling every time this page was displayed, whether or not the user scrolled; whereas, the pageview count in the interactive scroll marker is only totaling page views when users scrolled (so the count in the scroll marker might be lower than the count in metrics bar).

I tried to create a heatmap but it says “We didn’t find any data for this page.” What does this mean?

Fullstory will display this message if no data is available for the selected Page or URL, Segment or time range configured on the heatmap. This message is more likely to occur for a Page or URL with lower traffic, a Segment with a smaller number of users or a time range that is restricted to only a few days.

You may see this message displayed along with the session playlist at the bottom of the page. This is because we only display a heatmap visualization when a user was on the Page or URL for a few seconds or longer. The session playlist will show data for a visited Page or URL regardless of how much time was spent. If this occurs, you can watch the session and then view a heatmap from Page Insights.

Are Shadow DOM Elements supported in Heatmaps?

No - for more info on this, check out this article.