Inline player

Clarity offers an inline player for visualizing user behavior on your site. You can explore session recordings quickly without losing the context of user actions.

The inline player includes the following features:

  1. Playback viewer
  2. Playback controls
  3. Details tab

Playback viewer

The playback viewer contains the inline player, playback controls, and several options for exploring further:

Playback viewer details.

  • More details: View the details tab for this recording.
  • Click: View the click map for this recording.
  • Scroll: View the scroll map for this recording.
  • Share: View sharing options for this recording.

You can pause the recording at any time to view user engagement with your website. You can also fast-forward a recording to view the user's difficulty with a feature on your site.

Explore Heatmaps through Recordings

With heatmaps, you can dig deep into user behavior on any recording. Select the Click button to see a click map and view where the user clicked on your page. Select the Scroll button to see a scroll map to view how far the user scrolled on your page.

You can view click maps and scroll maps for different page states in the session dynamically using the forward and rewind buttons.

Recordings to click maps.

Note:

  • While you view a click map or scroll map, playback controls such as play, pause, skip inactivity, and speed are disabled.

    Disabled play button in recordings.

  • Currently, you can't see the click map and scroll map options while viewing the recording in a new tab or when you share it.

    Recordings in new tab with no heat maps.

  • Currently, you can't share the generated click map or scroll map.

Watch recordings

As you select a card, you can view the session recording in the playback viewer. The viewer allows you to analyze and understand user interactions with your site. You can view:

  • User clicks throughout the session.
  • Insights such as excessive scrolling, rage clicks, dead clicks, and quick backs.
  • How and where users enter text in your site.
  • What contexts the users are selecting.
  • Where users are changing the screen size.
  • User cursor movements.
  • Pages hidden or visible to the user.

Playback viewer.

Important

For privacy, Clarity masks the sensitive data by default before sending it to Clarity. To unmask or mask specific sections of your page, refer to Masking content.

While the masked content is shielded, third-party iFrame content is blocked on the playback viewer.

Control playback

Here are the playback controls:

Playback controls.

View details

Select the More details button to view the summary of your session information and the timeline of user events as shown below:

timeline with summary.

The summary includes:

  1. Session info
  2. Events

Session info

The session info contains the following information:

  1. Date and time stamp.
  2. Browser, operating system, and device details.
  3. Country in which the session is recorded.
  4. Entry and exit URLs.
  5. Referrer.
  6. User ID.
  7. The number of clicks, the number of pages visited.

Events

These events showcase the detailed time at which events occurred that include page visits within a session. Each page has events associated with it.

The supported events are:

  • Click - This event is seen when a user clicks on a page.
  • Scroll - This event is seen when a user scrolls on a page.
  • Resize - This event is seen when the user changes the size of their browser window or switches between landscape and portrait on mobile. You can filter this event with the "Resized page" filter.
  • Input - This event is seen when a user inputs text into a form element. You can filter to this event with the "Entered text" filter.
  • Rage clicks - Check Rage clicks to learn more.
  • Dead clicks- Check Dead clicks to learn more.
  • Excessive scrolling - Check Excessive scrolling to learn more.
  • Quick back click- Check Quick back to learn more.
  • Page visible - This event is seen when a user's attention is on your web page.
  • Page hidden - This event is seen when your web page is hidden behind other tabs or windows.
  • JavaScript error - This event is seen when a JavaScript error is detected. You can also see the error string in the timeline.
  • Selection - This event is seen when a user selects text on the page. You can filter to this event with the "Selected text" filter.

Inline player limitations

  • Some recordings might look broken or have missing images. This is because Clarity is having difficulty locating¬†CSS, font, or images to display the site. To learn more, see Troubleshoot Recordings.

  • Clarity can't capture third-party iFrames and HTML Canvas elements. They show up in your recording, as shown below:

    Third-party iFrames.

  • Clarity inline player may have rendering issues if your website is on http. To mitigate layout issues and maximize the utilization of Clarity, you can migrate to https.

FAQ

For more answers, refer to Session Recordings FAQ.

Visit Clarity