Page Insights User Guide

What is Page Insights?

Page Insights helps you figure out what elements users are clicking the most, how far down the page users are scrolling, and quickly inspect elements to use in search. It provides a visual overlay of aggregate, page level statistics onto session playback. It interacts with OmniSearch to provide instant stats for every page in your app. 

Jump to section:

• Click Maps (with Engagement Heatmaps overlay)
• Scroll Maps
• Inspect Mode
• Page Insights FAQs
  • What is a page?
  • How do I interpret the Engagement Heatmap scale?
  • What is included in the data?
  • How do you deal with dynamic apps or pop-ups?
  • How do you deal with screen size or device type?
  • Why don’t the numbers always match my search exactly?
  • Why does only the first table row, or first menu item have click data sometimes?
  • What about Scroll Maps for Internal Scrolling?
  • Will Page Insights features (Scroll Maps, Click Maps, Inspect Mode) work if my site utilizes Shadow DOM?

Use search to create your desired segment of users based on anything you want – behavior, time, geography, device type, custom variables, etc – which then become the basis for the aggregate statistics in Page Insights.

Page Insights can help you answer valuable business questions surprisingly easily. Things like...

• What are the top 5 most clicked-on elements on our pricing page, and what percentage of users click on each of them? Do those percentages differ for users on mobile devices? By geography?
• How far do users scroll down our product detail pages - are they seeing the call to action at the bottom of the page?
• Do paying customers tend to engage with the same features as non-paying customers?
• What parts of our onboarding UI cause the most rage clicks among new users?
• Which buttons on our checkout page tend to cause JavaScript errors most often?

How do I use Page Insights?

On the top bar of your playback screen, you’ll find a toggle between Session Replay and Page Insights mode. When you’re watching a session, you can instantly view engagement data for any moment that is part of that session. As soon as you toggle to Page Insights mode, we’ll pause playback and show you an Engagement Heatmap for the current page you’re viewing.  

Click Maps

Click Maps show you where users clicked on your page.  You can even see Rage Clicks, Error Clicks, and Dead Clicks.  Click Maps has two modes: Engagement Heatmaps turned on or off.

Engagement Heatmap Mode

Engagement Heatmaps is the default mode when you dive into Page Insights.  Use the slider to toggle Engagement Heatmap Mode on or off.  When on, Page Insights shows you a visual representation of the most clicked elements on the page in Playback.  The most clicked elements will be highlighted in pink.  If you hover over the Playback window, the rankings for each element will appear.  Click on these rankings to highlight different elements and get the interaction data for that element.

Sometimes an Engagement Heatmap isn't the best way to digest click information (i.e. the page has lots of overlapping elements or the color scheme of the page matches our click intensity scale.) For these cases, you can toggle off Engagement Heatmap mode to see the click rankings for the page.

Heatmaps will only be visible for elements that are visible on your site. While some elements may look the same in certain sessions, it is important to be aware of the different click data that is captured, depending on the CSS selectors that are used.

Be sure to explore Heatmaps experience outside of session replay as well. It provides more flexibility, control, insights and collaboration tools for users.

Most Clicked Elements

Use the dropdown list to toggle between all clicks, rage clicks, error clicks, and dead clicks. Note that these choices work with Engagement Heatmap Mode on or off.

• Most clicked elements map will show the aggregate of all clicks.
• Most error clicked elements map will show the aggregate of all clicks that occurred just before a JavaScript error occurred on the page.
• Most rage clicked elements map will show the aggregate of all sets of rapid clicks in succession in the same area of the page.
• Most dead clicked elements map will show the aggregate of all clicks that did not have an effect on the page (eg. no page navigation or no action as a result of the click).

Scroll Maps

Toggle to Scroll Maps to see a visual representation of max scroll depth for page views in the segment you are viewing. The color shading changes as viewership decreases down the page. Scroll down the page or drag the marker to see the percentage of page views that scrolled to at least a particular depth.

On the right side bar, you’ll notice the Scroll Map Details which provide the information on which sessions are being aggregated in your Scroll Map. Now your segment criteria is front and center for you to understand exactly what group of users you’re looking at.

The following information is provided:

• The Segment of users being analyzed, which is based on the specific cohort of users created in the segment area of Fullstory. In the example above, we are looking at the Segment: New this week. 
• The Page the data is for. By default, Fullstory will use a Learned Page that aggregates like-URLs together. You can also choose to edit your Pages in Settings > Data Management > Pages. Learn more about Pages in Fullstory
• The Time Frame the data spans, this is also based on the specific criteria you selected when creating your segment.
• The Device Type the data applies to. Scroll Maps will only show data for Desktop, Tablet or Mobile based on the session being watched.
• The total number of Page Views for this set of users on this page during this time. Each page view is an instance of a page being loaded in the browser, so it's possible that a single user could load the page multiple times, leading to multiple page views per session. 

You’ll also see a marker on the Scroll Map highlighting where the median page fold was for this set of users. You can toggle this option on or off. This can help you understand what content shows immediately to visitors when they hit the page vs. what they have to scroll down to see. If your CTA falls below this line, you might determine that you’d like to move it closer to the top or even above the fold, which is where it will be more visible to your users.

You can also answer other questions like:

• Are visitors primarily seeing content "above the fold" or do most visitors scroll deep into a page?
• Is anybody seeing those visual assets our team spent a ton of time designing for our homepage?
• Should we adjust the hierarchy of content on our new product detail page to make sure visitors see the most important points?
• How does typical scroll depth compare for visitors on web vs. mobile? How should we adjust our design accordingly?

Note that Scroll Maps looks 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.

Inspect Mode

Toggle to Inspect Mode to get stats for any element you're interested in. Just click around the page to get the information you're after. 

While viewing any of the Click Map summaries or Inspect Mode, use the Add to search or Create new search options to instantly drill down to a segment of users who have clicked that selector.

Page Insights FAQs

What is a page?

In today’s world of single page apps and dynamic URLs, figuring out how to list all the “pages” in your app can be confusing. And the list (if you managed to figure it out) will likely change over time. With Fullstory’s Page Insights, there is no need for you to instrument your code, to explicitly define your Pages. Page Insights uses machine learning to figure out what the logical pages in your app are, and groups things accordingly. 

As long as they are separate Pages, clicks on buttons on the “login page” won’t be mixed up with clicks on buttons on the “dashboard page”. And even better, if your app has a custom URL for each of your users, we will automatically figure out that Johnny’s dashboard page is the same page as Suzy’s, and we’ll show you aggregate statistics for all users on the “dashboard page”.

If you’re interested in learning more about Pages in Fullstory, check out our in depth article here!

How do I interpret the Engagement Heatmap scale?

A color scale emerges along the right side of the Playback window when Engagement Heatmap mode is turned on. The most clicked element on the page will always take the top bar spot on the scale, and the least clicked element (of the 25th clicked element) will always take the bottom spot.  The other elements will appear on the scale in proportion to the most and least clicked element.  The length of the bars is based on the percentage of clicks for that element compared to the top clicked element.

Bars on the scale that appear missing means that none of the elements on the page were clicked in proportion to the top element at that place.  For example, imagine a page has one button that was clicked 1000 times and a bunch of other elements that were clicked between 1 and 10 times.  The scale would have the top bar represent the element that was clicked 1000 times.  The middle of the scale would be empty to denote the large difference in clicks between the elements that were interacted with.  The bottom of the scale would have a couple bars to represent the least clicked elements.

What is included in the data?

The aggregate click data you see in Page Insights is pulled from user interactions that match your current search or segment. That is, if you’re viewing the “Everyone” segment, you’ll see click data from all users. If you’re viewing the “Bought Mangos” segment, only clicks from users who are a part of the “Bought Mangos” segment will be included in the aggregate numbers.

If you want to narrow your insights to a specific cohort of users, dial in the appropriate search first, then click on any session playback to view Page Insights for that group of users.

How do you deal with dynamic apps or pop-ups?

Page Insights take into account what’s on (or not on) the page now. If you watch a playback of a dynamic single page application, things pop in and out of existence. Page Insights are smart enough to work with this and show you what’s relevant to what you are seeing on the page right now.

For Click Maps:

Want to understand how users interact with an error message when it pops up? Find a session with your error message, then click Page Insights > Click Maps at the top of the screen. Page Insights will show you aggregate stats for users who clicked on the message.

For Scroll Maps:

Scroll Maps aggregate results for all of the pages in your segment to show you the best fit approximate Scroll Map. Keep this in mind if you’re using dynamic pages where 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

In these scenarios, Scroll Maps use the maximum scroll depth percentage that occurs at any time during the user’s session. For example, let’s say a user starts by scrolling through 1,000 px of a 2,000 px page. Their scroll depth is 50% (1,000 / 2,000). Then, they click “View More” to load additional content. The page adjusts to 4,000 px, but the user never scrolls further. While they’ve only viewed 25% of the newly loaded page (1,000 / 4,000), Fullstory will use the higher of the two values (50%) when averaging that user's session into the Scroll Map. 

How do you deal with screen size or device type?

For Click Maps:

Resolution doesn’t matter, nor does device type. Because we’re counting clicks based on the underlying page structure and the element on the page that the user actually clicked (not pixels or mouse positioning), we can aggregate all clicks across all devices and screen sizes. That said, if your mobile site has a very different page structure than your desktop site, mobile device data will not be included in the aggregates (see "What is a page" section above). Want to be sure you’re only seeing stats for mobile devices? Then add “Device is mobile” to your user search to filter out clicks from other devices. 

For Scroll Maps:

Resolution, viewport size, and device type greatly affect the layout of a page and hence how well the aggregated data of the Scroll Maps overlay fits onto a specific page. By default, Scroll Maps limits data to the device type you are currently viewing. We aggregate across resolution and viewport sizes. Want to see stats only for a given resolution or viewport size? Add these limits to your search to filter out the undesired states.

Why don’t the numbers always match my search exactly?

The Learned Pages machine learning algorithm is constantly running and refining the definition of each logical page for your site. As a result, it is possible for your click or scroll depth totals in page insights to not add up to the exact numbers you see on the search page. Over time, these numbers should start to even out. 

Also, in the case of Scroll Maps, we display data in terms of page views rather than unique users. 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 per session. Additionally, it’s important to note that a new page view is counted for every Navigate event. This allows Scroll Maps to count page views for both traditional websites and Single Page Apps.

Lastly, it is important to note that when analyzing Page Insights, your data will be impacted by the page definition set on the page you are viewing in your session.

Why does only the first table row, or first menu item have click data sometimes?

We currently use a combination of inferred page and intelligently processed CSS selector to identify and attribute clicks. Sometimes a given CSS selector can match multiple elements in the page. We currently attribute clicks to the first element we encounter. This generally isn’t a problem if the element or its parents have sufficient detail with href’s, class names or IDs in the HTML. 

What about Scroll Maps for Internal Scrolling?

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

Will Page Insights features (Scroll Maps, Click Maps, Inspect Mode) work if my site utilizes Shadow DOM?

If you're using custom components or a framework that relies on Shadow DOM, whilst you will be able to see those elements clearly in Fullstory (both in session replay and as elements available for search criteria) - Page Insights tools like Inspect Mode and Click/Scroll Maps specifically, are unsupported in Fullstory if your site is utilizing Shadow DOM. This is because CSS selectors within the Shadow DOM are invisible to the primary DOM itself.