Introduction to Heatmaps

Available for the following Plan types:

FullStory Enterprise

FullStory Advanced

FullStory Business

FullStory for Mobile Apps

FullStory Free

Available to the following User roles:

Admin

Architect

Standard

 

 

Heatmaps provide cues for how users explore and navigate your website via visual, aggregate data. Similar to other objects in the DX 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 who your DX audience is, how and where they are engaging with your site and the time they spent on it.

Screen_Shot_2022-11-03_at_3.15.02_PM.png

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.

Create a new Heatmap

To configure a new Heatmap, follow the below steps:

  1. Navigate to the DX Library and select Heatmaps.
  2. Click New Heatmap.
  3. Select the Page or URL you would like to explore.
    1. For Page, select from the Page dropdown menu.
    2. 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. Title and save the Heatmap.
  7. View matching sessions below.
  8. Click CleanShot_2022-09-14_at_14.51.02_2x.png to export to PDF if you’d like.
    1. The PDF will include Page Name, Time Period, Segment, Device Type, Heatmap visual and Click or Scroll data.

CleanShot_2022-11-15_at_10.32.07.gif

Page vs URL

CleanShot_2022-09-14_at_14.52.23_2x.png

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.

You can create a heatmap to analyze engagement on a Page or a URL. A page is made up of a group of URLs that share similar patterns and page structures. When determining whether to select Page or URL for your Heatmap, consider the following.

If your search is broader in scope, we recommend you select Page. With defined Pages in your account, exploring a Heatmap based on one of these makes it easier for multiple members of your organization to interpret as the page definitions are set and accessible to all user types.

For more specific searches, URLs are what we suggest. For example, if the URL hasn’t been defined as a FullStory Page in your account, you would want to explore the Heatmap via URL.

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 & 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.

click_map_options.png

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.

Screen_Recording_2022-09-20_at_02.02.31_PM.gif

Additionally, all Elements that have already been named in FullStory will display as such in Heatmaps. Elements that have not been named will display as the selector.

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.

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.

Since the Heatmap visualization is not tied directly to a user's session, you can click the Refresh button to see a different rendering view of the page or URL you are searching. 

Screen_Shot_2022-10-06_at_3.13.30_PM.png

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.

Screen Shot 2022-11-15 at 11.57.20 AM.png

  1. Pageviews
    1. 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
    1. 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
    1. 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
    1. The number of clicks on the page in aggregate.
  5. Users
    1. The number of users who viewed the page in aggregate.

Understanding Click Types

When analyzing Click Maps, there are two Click Types to consider: Total & User clicks

The Total clicks metric displays the total number of clicks on the selected element, including duplicate clicks if a user clicked on that element more than once. This metric also includes the percentage of total clicks. This helps you determine the proportion of total clicks on the page that were on the element in question.

The Users clicked metric displays the number of unique users who clicked on the selected element. It includes the percentage of unique users who clicked on that element compared to the number of unique users who clicked on the page at all.

Screen_Shot_2022-10-27_at_1.22.57_PM.png

Share & Explore

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 the Export button 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. 

Below your Heatmap, FullStory generates a Session Playlist for you to explore the deeper qualitative data around your user’s engagement. Easily navigate to individual sessions to see how customers are experiencing your site.

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.

Are Heatmaps available for Mobile Apps?

Not at this time.

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.

Need to get in touch with us?

The FullStory Team awaits your every question.

Ask the Community Technical Support