How do I use Session Player in Session Recording?
In this help, we'll discuss how to use the Session Player for:
- Replaying sessions
- Switching between sessions and analyzing session details
- Navigating the session timeline
- Tracking activity from session
- Assessing page performance
- Sharing replays
- Taking notes
Replaying sessions
In the Session Player, you can replay a video-like reproduction of sessions where visitors interacted with your website. This pixel-perfect session playback is what makes Session Recording really shine when compared other sorts of web analytics tools. You'll get to learn exactly how your visitors behaved, instead of just getting generalized statistics and user metrics.
- See Visitors tab to learn how to access the Session Player
- The majority of the Session Player screen is dedicated to session playback. Use the standard video controls (play, pause, rewind, video speed, video timeline) to play back the session like you would with an actual video.
- Skipping inactivity - The respondent is considered inactive if they haven't moved the cursor, scrolled, clicked, pressed any keys or used the browser's back button in the last four seconds. Time of inactivity is marked on the playback timeline with lighter color. By enabling Skip inactivity, you can pass even over long periods of inactivity very quickly, allowing for more efficient analysis.
- The player area portrays exactly what the visitor was seeing at any point in time (except for any parts of your website that you've purposefully obscured in study setup for data protection and privacy reasons).
- The top part of the player gives you a dropdown that lists all of the URLs visited by the visitor. The first one tells you the time when the session started, the rest give you their timestamp on the session's timeline. Click any of the pages to rewind the player to the exact moment when the page opens.
- Click the ellipsis button to copy the visited URL or to visit the page directly.
- The information in the upper right corner tells you what exact display resolution the visitor is currently using.
Switching between sessions and analyzing session details
The panel on the left side of the player allows you to switch between the current visitor's sessions and also contains additional details about the session and the visitor themselves.
- The absolute top of the panel contains the current visitor's name, icon and location.
- Click the session dropdown to switch between visitor's sessions. Sessions are marked by the time when they started and are placed in descending order (most recent one first).
- If you've previously filtered sessions in SmartSearch, only sessions that match the filtering criteria will appear in the dropdown.
- In session details, you will see the session's duration, number of pageviews and number of events.
- Click the session details to view even more details about the session and the visitor. The details are split into three main sections:
Current session statistics :
- Duration - How long the session lasted. Session terminates automatically if the visitor is idle for 30 minutes
- Active time - Activity means that the visitor was doing any of the following: moving the cursor, scrolling, clicking, pressing keys, using browser back button.
- Inactive time - A visitor is considered inactive if they haven't done any of the above in 4 second span.
- Number of pageviews
- Number of unique pages - The number of pageviews with unique URLs in the session.
- Number of events
- Avg. page load - Average time that it took for a page to load for the visitor.
Aggregated statistics accross sessions (only shows up if the visitor has more than one session):
- Total number of sessions
- Total number of pageviews
- Total number of unique pages - How many unique URLs they visited
- Total number of events
- Total time on website - Sum of duration of all of the visitor's sessions
- Total active time - Sum of active time over all of the visitor's sessions
- Total inactive time - Sum of inactive time over all of the visitor's sessions
- Avg. time on website - Visitor's average session duration
- Avg. active time - Visitor's average active time during session
- Avg. inactive time - Visitor's average inactive time during session
- Avg. page load - Average time that it took for a page to load for the visitor
- Most visited page - URL that was visited the highest number of times
- Most active page (time) - URL that has highest overall active time
- Most active page (events) - URL that has highest overall number of events
Other visitor's information :
- First visit - if this session isn't their first, when did their first session start?
- Time from previous visit - if this session isn't their first, how long ago did the visitor visit before?
- Device type
- Device
- Operating system
- Browser
- Screen resolution
Navigating the session timeline
Below the session details, you will find the session timeline. This timeline serves as an overview of all of the visitor's behavior during the session.
- The top of the timeline contains the referrer. Sometimes, the referrer is unknown (e.g. if the visitor pasted the website's URL directly into the browser's address bar)
- After the referrer, the session timeline contains an ordered list of all the pageviews in the session. By looking at the pageview URL addresses, we can gain understanding of the visitor's website navigation flow.
- On the right side of each pageview, you will find the page load data. See assessing page performance to learn how to better understand page load data.
- Click a pageview to rewind the session player to the pageview's start, copy its URL or to visit the page directly
- If a pageview had any events, you will see a list events in the order they happened in once you open the pageview
- Click an event to rewind the session to the moment the event was activated or to copy the event's CSS selector
- By opening an event, you can see the CSS selector of the DOM element it was bound to, its type and text
There are two types of events:
- Click - the visitor clicked a DOM element on the page (e.g. clicked a button)
- Form change - visitor changed the value of a form input (e.g. typed something into a search bar, selected a checkbox)
Virtual pageviews
In a stereotypical scenario, a change between pageviews is characterized as the user opening a new HTML page, which is located at a different URL address. However, this is not always the case. Today, the change of pages and their contents is often handled dynamically by JavaScript. SPAs (single page applications) are built on this concept. This would present an issue to our session player, since it would mean each session would only involve a single long pageview, without information about how the user traversed between different "virtual" pages.
Virtual pageviews are a feature of UXtweak that solve this issue. Every time that JavaScript pushes a new URL into history without changing the page, a new virtual pageview is created. Virtual pageviews allow us to track changes in URL, acting like normal pageviews even though technically, the user was still viewing the same HTML page. For this reason, virtual pageviews don't track performance metrics (since the page is already loaded, painted and interactive).
Tracking activity from session
See Activity Tracking to learn to learn how to use activity trackers to monitor activities like specific page visits, clicks and form changes and their development over time.
To set up an activity tracker for an event or pageview seen in a recording:
- Click the pageview or event you want to track on the timeline.
- Click Track this activity.
- Activity tracker setup will appear, already filled up with the selector or URL of the chosen activity.
- Name your activity tracker and hit Create.
- You will find your activity tracker in Activity Tracking in your result's analysis
Assessing page performance
Under each page view, you will find four performance metrics. These metrics are used as an indicator of the page's responsiveness - an important aspect for your page to leave a good impression. The metrics are as follows:
- FCP (First Contentful Paint) - the time until the browser renders the first pixels of DOM content (e.g., images, non-white <canvas> elements, SVGs). The interpratation of the FCP metric is as follows:
- green (fast page, 0 - 2s),
- orange (moderate, 2 - 4s),
- red (slow, over 4s).
- DOM Content Loaded - time until all DOM content has been loaded and parsed (without CSS files, images, subframes)
- Page Load - time until the whole page is loaded, including resources like CSS files and images
- TTI (Time to Interactive) - the time until the page is both visually rendered and reliably responding to user input. It measures how long it takes a page to become fully interactive. The interpratation of the TTI metric is as follows:
- green (fast page, 0 - 3.8s),
- orange (moderate, 3.9 - 7.3s),
- red (slow, over 7.3s).
Some of the metrics might be missing from some of your Session Recording sessions. This is because not all browsers support all performance metrics (e.g. only Chrome supports TTI at the moment).
Events that trigger performance metrics usually happen in the same order that we listed them in. However, that might not always be the case. For example, if you you open a page and then reload it, the page is still going to be in your browser's cache. This decreases the time for DOM Content Loaded and Page Load dramatically, so they can happen faster than even First Contentful Paint.
Performance is a key factor in shaping the experience that the users are going to have with your website. A site' slowness can vary from some mildly annoying delays up to something that renders the site outright unusable. Because users abandon anything that annoys them, this means bad performance can severely limit how successful your site is going to be. This can especially be true with mobile devices, which have limited CPU, memory and data plans. Examining your site for performance and looking for ways to optimize can help you get the upper hand on competition. See this guide by Google for case studies of companies which achieved better user retention, conversion rates and user experience through performance optimization.
Taking notes
You can annotate your session recordings. This can be useful to note down your findings or to mark significant moments in session recordings. You can later find annotated moments in recordings by using the SmartSearch. You can manage the notes in recordings by clicking Notes on the right side of the replay bar.
Clicking Notes will open the notes panel. There, you will find:
- List of all notes in this recording - Each note has an author, the note's contents and the time in the recording that it is tied to. Click Edit to change the text or Delete to remove a note.
- Bubble notes - When this checkbox is enabled, notes will appear as bubbles while you're replaying a session recording.
- Create note - Allows you to create a new note by typing some text. After you click Save note, the note will be added to the session recording timeline.
You can also view and edit a specific note by clicking in on the replay timeline.