Contentsquare
Hi, how can we help?
Popular help topics: CS Live, Metrics List, Request an Integration

What's New? Releases & Updates How do I install the Contentsquare tag?

help center results

technical documentation

Français 日本語

Articles in this section

See more

Session Replay player

The Session Replay player is a tool that allows you to watch captured user sessions to get valuable insights into user behavior on your site. The player gives you a detailed view of the user's experience, while also providing key contextual information to help you analyze specific events and interactions. This article explains how to use the Session Replay player.

Key Features

To help you understand the main features of the player, we’ve broken it down into four areas:

 

1. Metadata bar: information relating to the user’s session to help you understand the session environment.

2. Pageview and event stream: a list of URLs for each page the user visited, including real-time event data.

3. Timeline: a visual indication of session activity and inactivity that allows you to jump to areas of interest.

4. Quick actions: actions to help you make the most of your Session Replay.

5. Player settings and configuration: provides customization of the default player settings.

 

Tip

Where light or dark mode for a site has been used, the appearance of a replay will match how it looked on a user's device. If the session was captured from a WebView, where an app opens a site inside the app instead of a browser, the replay will show the light or dark mode based on your own device's light or dark configuration (where you're watching the replay from).

1. Metadata bar

The metadata bar provides context about the session, such as: date and timestamp (based on Contentsquare user settings), country, browser, screen resolution, operating system, and user ID. Hover over each of the data points for more information. You can see the timestamp of your end-user (based on their timezone), by hovering over the displayed date and timestamp.

Mobile Apps

The list of events collected on Mobile Apps:

RecordingEventType.SCROLL
RecordingEventType.MOUSE_MOVE,
RecordingEventType.MOUSE_DOWN
RecordingEventType.MOUSE_UP
RecordingEventType.INPUT_TEXT
RecordingEventType.INPUT_SELECT
RecordingEventType.INPUT_CHECKABLE
RecordingEventType.CLICK
RecordingEventType.TOUCH
RecordingEventType.TOUCH_START
RecordingEventType.TOUCH_MOVE
RecordingEventType.TOUCH_END
RecordingEventType.TAP
RecordingEventType.KEYDOWN
RecordingEventType.KEYUP

App version limitations:

App versions are always displayed using four digits, for example, 12.0 is shown as 12.0.0.0 in the metadata bar. Any value exceeding 65535 is displayed as value % 65536 (modulo 2¹⁶). For example, 89548 becomes 89548 % 65536 = 24,012, so it is shown as 24012.0.0.0 in the metadata bar.
The following formats are supported for app versions: [w], [w.x], [w.x.y], [w.x.y.z], where w, x, y, and z range from 0 to 65535.

2. Pageview and event stream

The pageview and event stream are hidden by default and can be accessed by clicking the numbered list menu in the top left corner. From here, you can view URL paths, time spent, corresponding events and timestamps, and frustration scores.

Additional functionality available in the pageviews and event stream:

  • Quantify the impact of events (Growth, Pro, and Enterprise plans only): use the checkbox next to each event to jump to Impact and further analyze the impact of that event. You can quantify up to nine (9) events from the current pageview.
  • Shortcut to error details (plans with Experience Monitoring): expand an error and click 'See in Error Analysis' to view the error’s details page.
  • Filter and search: focus on the activity of interest by filtering user actions, events, and more. Enter keywords in the search bar to find a specific pageview, action, or event (search for any visible term from the list).

Note

To search and see CSS Selectors and aria-labels, you will need to have this enabled in the Console. A user with Console admin access can whitelist the aria-label attribute using the following guide: "How to mask personal data".

  • Copy pageview URL, variables and page events: Click the three-dot menu to copy the pageview URL. For Pro and Enterprise plans, see and copy the Custom Variables (cVars) or Dynamic Variables (dVars) fired during the pageview or session.
    • Note: If you have Application Performance Monitoring integrations such as Dynatrace, Datadog, or Blue Triangle, you will see dVars as clickable links. You will be able to click this link to the user's session in your Application Performance Monitoring tool.

3. Timeline

The timeline has thicker lines to represent user activity and thinner lines to indicate periods of inactivity.

Following along, starting at the left side of the timeline, you can:

  • Control the playback: play/pause the replay, skip between next/previous sessions, or jump 10 seconds forward or backward in your replay.
  • Zoom in to (and out of) the playing pageview: use the magnifier icon to get a closer look at the pageview's corresponding events and playback the singular pageview. Zoom back out to the full session anytime.
  • Click on the insights icon (and Errors, if available on your plan) to quantify via Impact, navigate through each one, and see in Error Analysis (if Errors is available on your plan).
  • Add/view comments: hover any part of the timeline to add a new internal comment, or click any visible comment to see an existing one.
  • Capture a snapshot (Pro & Enterprise plans only): hover over any part of the timeline to capture a snapshot that you want to save for future reference or reuse for a zoning.
  • Filter match: when you filter by Frustration signal in the analysis context (or Filters if you're on a Growth plan), this label appears on the timeline at the moment in which the signal happened, and your replay will start from that point. Available Frustration signals are:
    • Rage click
    • Multiple button interactions
    • Multiple field interactions
    • Rage taps (for mobile)

4. Quick actions

 

  • Share a replay: this allows you to share a replay with another person who does not have a Contentsquare account. For more details, visit our article on 'How can I share a replay of a session?'
  • Favorites: click the star icon while watching a replay to favorite it. It will be favorited for all Contentsquare users on your project. You can find your favorites on the Session Replay list by clicking the 'Favorites' tab. Favorites in Session Replay can be sorted by Collections for easier rewatch. Read the Session Replay list view article for more details.
  • Full screen: will expand the player to occupy your full screen.
  • Open in a new tab: will open the player in a new tab, occupying the full tab window instead of as a modal.

5. Player settings and configuration

  • Key icon: mask or unmask text and/or user identity in your replays to be compliant with the GDPR.
  • Fit: Select the viewport size of your choice.
  • Network details (plans with Experience Monitoring enabled), read the article "How to analyze Network Details in Session Replay" for more information.
  • Settings:
    • Edit the player settings: choose from several options such as "Pause to scroll",  "Skip inactivity" or "Use live assets" to help you navigate in your replay easily;
    • Edit the speed replay: choose between several options.

Tip

Enable the "Pause to scroll" setting and scroll up and down your page interface to uncover any issues that you don't see in your current viewport. See the image below for more details.

 

Autoplay for Session Replay

Once your replay has ended, a pop-up will open enabling you to add a comment on the session, add a comment, or share it with another member of your team. Read "Share a Session Replay" for more information.

From this pop-up, you can also mark the replay as a favorite, play it again, or watch the next replay. If you don't do anything, the next replay will automatically start 5 seconds after.