Session Replay Player
Feature
Session Replay Player allows to watch end users' recorded sessions. It is composed by 5 main UI elements:
Dev Tools.
Events & Overlays.
Playback Controls.
Playback Timeline.
Replay Content.
Dev Tools
Dev Tools panel contains many advanced and technical details about all the facts, events, BPs and other insights that occured during that session. It contains the following 5 elements:
Console
Network
Business Process
Timeline
Info
Console
Contains all the console events which occured during session replay in context. The following filtering and export options are available:
free text search filter
console type filter
export all visible results to CSV
In addition, you can execute the following actions on each request:
click on row → that will open quick RCA screen for that particular event
click on timestamp → that will move replay to that timestamp
Network
Contains all the HTTP network requests which occured during session replay in context. The following filtering and export options are available:
free text search filter (applies on the Name column)
type filer (applies on the Type column)
export all visible results to CSV
export all visible results to HAR file
In addition, you can execute the following actions on each request:
click on row → that will open quick RCA screen for that particular event
click on timestamp → that will move replay to that timestamp
Business Process
Contains all the Business Process steps collected during session replay in context. The following filtering and export options are available:
free text search filter (applies on the Label column)
export all visible results to CSV
In addition, you can execute the following actions on each request:
click on row → that will open quick RCA screen for that particular event
click on timestamp → that will move replay to that timestamp
Timeline
Contains all the facts collected during this session grouped together into few categories. Click on a group category name to expand it and to see all its facts.
In addition, you can click on a fact to see its quick RCA content. The following example shows User Click quick RCA.
Info
Info section contains all the details and metadata about current session replay. It also contains some details about the RUM UX monitoring settings that have been used during data collection.
The following video shows Dev Tools main features in action.
Events & Overlays
Events & Overlays main goals are:
show all collected events, metrics and transactions
show overlay maps (clicks, error clicks, dead clicks, rage clicks, mouse movements ans srolls)
Events
Events container shows all the collected facts as they occur during the replay. Each event has:
type (represented by an icon)
label
timestamp
details (optionally)
duration or value (if applicable)
duration progress (if applicable)
In addition, you can execute the following actions on each event:
click on label/type/details → that will open RCA screen for that particular event
click on timestamp → that will move replay backwards to that timestamp
You can decide what do you see in the events container via Player Settings. See Configure Session Replay Player | Dev-Tools-and-Events-Filters for configuration details.
Overlays
Overlays section allows to add an overlay map on top of the replayed content to understand better where your end users are clicking, moving their mouse or scrolling to. It supports the following map types:
Error Clicks
Rage Clicks
Dead Clicks
Clicks
Mouse Movement
Scroll
By default, overlay data comes from:
same application and same page location
last 7 days
all sessions and all users
Use Settings panel to change data query, the following options are available:
Time Range (time period for which we query)
Filter Session (always for the same application and same page location)
All Sessions
User Sessions (coming only from the same user)
This Session (just the session in context)
Filter Top Clicks (only top N clicks; null or 0 means no limits)
The following video shows Events & Overlays main features in action.
Playback Controls
Playback Controls main goals are:
play or pause replay
skip backwards/forward by configurable amount of time (default: 10 seconds)
skip backwards/forward to the next configurable event (default: activity period as selected event)
control speed of the replay (default: original speed of x1)
quickly filter on preconfigured events (these filters impact what do we show in Playback Timeline and Events & Overlays)
Keyboard Shortcuts
The following actions can be also done via keyboard shortcuts:
Space: play/pause replay
Left key: skip backwards (configured amount of time)
Right key: skip forward (configured amount of time)
Settings
Right-hand side panel contains the following items:
Session details and metadata
Export user session events to file
Open Session Replay Portlet Settings (See Configure Session Replay Player for details)
The following video shows Playback Controls main features in action.
Playback Timeline
Playback Timeline main goals are:
show session total duration
show replay progress
show a summary of all the events (only these currently enabled in Playbak Controls)
show user activity and inactivity
jump into a particular timestamp or event
zoom into particular time range (details below)
show replay buffer progress (grey bar)
Zoom In
Timeline supports a Zoom In mechanism which allows to select a time range of interest excluding everything that occured before and after selected range. Replay Content, Dev Tools and Events & Overlays will be filtered accordingly to selected time range. Reset Zoom button will appear to remove this feature and go back to the entire replay.
The following video shows how to use this feature.
Replay Content
It shows recorded content with pixel perfect precision.
Context Menu
Additional set of actions is available under Context Menu which can be opened by right click on the replay content. It has the following options:
Copy (copy currently highlighted content from the replayed content to the clipboard)
Add text to Phrases-of-Interest (add currently highlighted content to the “Phrases-of-Interest” feature)
Add Watch on this Phrase-of-Interest (add a new watch for currently highlighted content based on the “Phrases-of-Interest” feature)
Add Note (add a new note linked to this replay and this particular location inside the replayed content)
Switch to native menu (remove Context Menu and show browser’s native menu)
Zoom In, Multi-tab and Multi-Window
By default, replayed content is optimized for the device and browser of the Germain UX end user. All the multi-tabs and multi-windows are replayed to represent the exact end user behavior of the monitored application. However, if needed, you can focus a currently hidden tab or zoom in a tab content by clicking on the replayed tab header.
The following video shows support of zoom, multi-tab and multi-window replay.