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:

image4.png

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

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

 

image6.png

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.

mceclip0.png

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.

Screen_Shot_2020-07-28_at_11.44.12_AM.png

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 group of Pages that’s being aggregated. This could be a single unique URL, or a group of product pages or blog articles. Tip: Hover over the Page to see the full domain!
  • 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 new 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. 

Screen_Shot_2020-05-28_at_10.14.02_PM.png

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.

pasted_image_0.png

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, or explicitly name your pages. Page Insights uses machine learning to figure out what the logical pages in your app are, and groups things accordingly. 

This means that 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 page 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 see statistics for when the error message is popped up? Just find a session with that error message, then click Page Insights at the top right of the screen to start viewing aggregate stats for users who saw the error message.

For Scroll Maps:

For most dynamic pages, which have images and sections of the page that do not load for all users, Scroll Maps will aggregate results for all the pages in your segment and show you the best fit approximate Scroll Map. If page length varies highly for your users, the Scroll Map you see may be less of a great match for the exact page you see in Session Replay.

In this scenario, we’d recommend that you tweak your segment to narrow the scope of the pages considered in analysis, to get a Scroll Map that is more accurate.

For 3 types of pages, Scroll Maps are inherently less accurate due to the nature of the page structure:

  • Internal Scrolling Elements - pages where there are sections that scroll independently from the rest of the page.
    • Example: a web app with a sidebar that scrolls separately from the rest of the app.
  • Dynamically loading viewport content  - pages where you can scroll to the bottom of the page, click “Show More” and only then more content loads into view.
    • Example: an ecommerce product listing page with a “Show More” button.
  • Infinite Scrolling - pages that provide an infinite stream of content for users to scroll through.
    • Example: Facebook, Twitter.

If you view Scroll Maps for a page with internal scrolling elements, we will detect that internal scrolling exists and show this warning:

image3.png

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?

Our 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. If you want to look at results for a specific url, you can always add the url to your segment definition. 

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.

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 it’s parents have sufficient detail with href’s, class names or IDs in the HTML. That being said, we can do better and have a solution in the works to properly attribute clicks to ambiguous elements like this. 

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us