Replaying a session allows you to watch the session exactly as a user experienced it. Watch a session and see where a user repeatedly clicked and didn't get the expected result, or see where a user entered a promo code during checkout, but got an error. Using session replay, you can quickly diagnose and fix issues both for individuals and on a larger scale of general website bugs.
Note: If you search for a session and aren't able to find the specific session, use the Refresh icon in the upper right corner of the user interface (not the browser refresh) and search for the session again.
In the replay, you can replay sessions, work with the session timeline, and work with raw data from the session all from a single user interface.
In the Replay view, you can watch a replay of visitor sessions and analyze user interactions (such as clicks, filling out a form, or selecting from a list) with each web page or mobile application.
You can set your preferences for how sessions are replayed. From any session, click the gear icon in the upper right corner of the screen to view settings for replay. You can specify which view (Replay, Session timeline, or Raw data) that you want the session to open in. The default is set to open sessions in the Replay view. You can also set a preference to open session replay in a separate tab whenever you select a session from the session list. If you prefer to work with sessions in a particular view, you can set Always open sessions to this view. The view that you set becomes your personal default view for working with sessions.
- Timeline - The timeline view displays events that occurred during the session on chronological order. The timeline view is the default view. As you scroll through the timeline, you can see the timestamps for each page session that was loaded in the replay.
- Raw data - The raw data view displays the code and raw website data of the steps in a session.
- Replay: The replay view provides the interface for reviewing all pages in sessions as they are displayed to a visitor. Use the replay view to see the steps the user took on those pages and identify any issues that might have occurred during the session.
Note: Date and Timestamp are always captured in UTC format. Date and Timestamp are then displayed in the Tealeaf UI based on the organization's settings.
Furthermore, there are 2 different timestamps being collected:
Search captures collector timestamp (for accuracy)
Replay captures visitor's browser timestamp (so that we can have an accurate sequence of the steps in a session)
For some sessions, the timestamp between search and replay might be off due to the delay between when the browser recorded the interaction, and when it arrived at the collector. In the cases where the time stamp variance between search and replay is larger, it is likely due to the visitor's browser's timestamp being set incorrectly.
With session replay, you can:
- Review all pages in visitor sessions as they are displayed to the user.
- View mouse movement actions from the visitor's session.
- Options of no trail, fading trail, and permanent trail are available in your settings. To use the Show mouse movement feature, you must have release 5.6 of the Tealeaf® UI Capture SDK installed.
- View the steps that the user took on those pages.
- Step through selected pages to identify issues that occurred during a user's session.
- Capture and record simple events with Simple Event Capture.
- Identify the pages in the session where searched terms or searched Events reside.
If you searched sessions with Free text search or if you searched sessions for the occurrence of an Event, the pages where that contain the searched term or Event are flagged in the navigation pane of all 3 (Replay, Timeline, and Raw Data) views.
Pages that include the searched term are marked in the navigation by a flag icon. The flag includes a number that indicates the count of steps inside the page that contain the searched term. Each individual step inside the page that contains the search term is also marked with a flag icon.
- Comment on individual steps in a replay.
The Replay view includes timestamp information in GMT format. The timestamp indicates when the first
http post was received plus the offset for each page. Timestamps show how long visitors spend on one page before they move to another. Timestamps that indicate an inordinate amount of time that is spent on a page might be an indication of customer struggle.
Replay a session
- Use Session search to find the session that you want to replay.
- Hover in the session row.
The play icon displays.
- Click Play. The session opens to one of three views, depending on what you specified in Always open sessions to this view on your replay Settings. (The default is set to Replay.)
Note: To go back to the session search results, click Search result from the breadcrumb trail on the Session Replay user interface.
- Work from the Replay view:
- Customize Replay by opening the Replay Settings page (gear icon).
The Replay settings page consists of sections for customizing various aspects of replay, such as views and highlighting, how the page list displays, and session attributes.
Settings for customizing views and highlighting:
Always open replay in a new browser tab
When selected, every time you select the play icon from the session search list that session opens in a new browser tab.
Always open session to this view
Specifies a default view (Replay, Raw data, or Session timeline) that you want the session to open to. Replay highlight color Indicates the color used in the replay to highlight the visitor actions and mouse movement.
Show mouse movement
Set the Show mouse movements property if you want to capture mouse moment events and view the movements when you replay a session. You can also specify if you want the mouse movement to be displayed with a permanent (solid line) trail, a fading trail, or no trail at all.
Note: Mouse movements works for Web sessions only.
Display easy-to-read identifiers for screen elements, such as buttons and fields by selecting the checkbox in Replay settings. The identifier displayed is determined by what is available for the element.
To learn more, check out our Acoustic Academy course, Friendly Element Identifiers!
In replay settings, you can enable or disable tabbed navigation. With tabbed navigation an indicator will be displayed whenever a new browser tab is opened. This allows you to track every time a user opens a new tab without building a new replay experience each time.
Settings for customizing the page list:
Property Description Show URL or Show page title Specify if you want the page list to show the URL or the page title. Show timestamp or show duration Specify if you want the page list to show the timestamp or the page duration.
Settings for customizing the page list: To display specific session attributes in the Replay, click the plus (+) sign on the Display these attributes window and select which attributes you want to be displayed from the Available attributes window.
- Customize Replay by opening the Replay Settings page (gear icon).
- Optionally, you can use the Fit replay to my screen option in the lower-right corner of the UI to adjust the size of the replay. With Fit replay to my screen, the replay is sized to ensure the width of the page (as the visitor sees it), is displayed in Replay, negating the need to frantically scroll horizontally while playing a session.
Notes: When you select Fit replay to my screen, additional white space sometimes gets applied to the replay. Fit replay to my screen ensures you see what the visitor sees as it relates to the width of the screen. A visitor’s actions might still be out of view from a page-height perspective. Even when the entire height fits within the view area, you might still need to scroll vertically to see a particular element on the page.
- Create a snapshot of the page you are on by clicking the camera icon. For information about snapshot capture, see Create snapshots.
Note: Snapshot capture does not support hybrid applications.
- You can navigate between pages by selecting the numbered page in the navigation list. Alternatively, you can click the blue boxes at the bottom of the Replay session, which serve as markers that identify where each step begins.
- Filter content in the Replay navigation pane.
Apply a filter to control the visitor actions or mobile gestures that get displayed in the Replay navigation pane. For example, if you want to see click events only, select the Click check box from the filter dialog. If you are viewing a mobile session and you want to see swipe gestures only, select the Swipe check box from the filter dialog.Filtering works for the following Event message types:
- Type 1
- Any object that shows the current state of client.
- Type 2
- Any message that indicates changes in view on the "screen". The "screen" is the page, view, or activity where the visitor is in the application.
- Type 4
- User interface control that fires an event to which Tealeaf listens for capture.
- Type 11
- Any message that shows a gesture that fires a higher touch event that Tealeaf listens to for capture.
- Type 18
- A user interface control that tracks the a visitor's mouse movements as they interact with your website.
Capturing mouse movement events requires version 5.6 of the Tealeaf UI Capture SDK.
Note: You can also filter on Events from the Raw Data view. The filter is applied to subsequent searches and Auto replay.
- You can use Auto Replay feature at the bottom of Session Replay to play and pause the session.
With August 2019 release, Auto Replay represents the entire session. The markers on the scrubber bar map to screens in the session. You can click on a marker to highlight the screen in the navigation panel.
- You can capture simple events by selecting the Create event from this session icon in the toolbar.
- In the left navigation on the replay screen, select the section that you want to view by clicking the arrow next to the URL. More steps appear beneath the section.
When you select a user action from the navigation list, the action is highlighted in the view area.
- You can view processing statistics for a page by selecting the Page load details icon located in lower right-corner of the Replay view. See Troubleshooting replay for information about analyzing issues related to replay not loading or replay loading slowly.
- When the Raw data tab is selected, you can simultaneously navigate between steps in the left panel and the raw data in the right panel.
To learn more about replaying sessions, visit our Acoustic Academy course, Session Replay.
Highlight a replay
Watch and understand your user's experience easier with Replay highlighting. This tool uses color overlays and icons in session replay to highlight interactions (mouse clicks, form field entry, menu selections) and mouse movements from visitors interacting with your web application.
Replay Highlighting is enabled by default and is applied to all sessions automatically.
Save and send session replays to the event tester
Send from session replay
- From Session replay, select Save to event tester.
- Enter a name for the session.
Consider adding your initials as a prefix to the session name, which can make it easier to locate the saved session in the Event tester.
- Optional: Select Go to event tester.
- Click Apply.
Send from timeline view
- From the Session timeline, select Save to event tester.
- Enter a name for the session.
As a best practice, add your initials as a prefix to the session name to make it easier to locate the saved session in the Event tester.
- Optional: Select Go to Event tester.
- Click Apply.
Add, edit, or delete a comment on a step in a replay
Rather than manually taking notes, use commenting in replay to add notes directly to a step in a replay. This enables you to add comments for you to review later, for others to understand the session, and you can also see others’ comments.
- Select the step in the session that you want to add a comment on.
- Click the Add comment icon. The comment panel appears.
- Add your comment and click Add comment.
- Note: Comments are viewable by anyone who views the session.
Edit or delete a replay comment
- Select Add comment.
- From the Comments panel, hover over your comment and click the pencil icon to edit or the trash icon to delete the comment.
- Confirm the edit or delete action.