Skip to content

Introduction to Discover UI Capture?

The UIC delivers four key capabilities, they include:

  • Browser environment information

    • Page load and render times and other associated client-side performance timing measurements, as defined in the W3C Navigation Timing specification.
    • The screen resolution of the client computer or device, and the viewable size of the browser window within it.
    • Browser type, IP address, geography, location, screen sizes, and platform used are also collected.

  • Pre-defined events

    Discover can capture events and application generated data, including dynamic error messages or shopping cart values, amongst others. These elements are identified with JavaScript code and are embedded into the session data stream..

  • User interactions

    These captures are typically interactions such as:

    • The text that is typed into a form field, along with the time spent on that field, and the number of times it was interacted with.
    • Changing values of controls such as check boxes, radio buttons and select lists.
    • Hovering over and clicking on buttons and links.

  • Web Page Layout

    To enable session replay, the UIC will capture what the web page looked like at given points in time. This is achieved by capturing the DOM which is modified in the browser when using web frameworks such as React and Angular. The capture does not include items such as images, videos or files, these are read in at replay-time saving valuable session storage space. These applications run entirely in the browser and require DOM Capture to enable session replay.

    DOMDiff processing takes a full DOM snapshot that serves as the baseline and then captures only the differences for subsequent triggers on the same page. By only processing the differences, you can reduce the size of the captured session and improve replay performance.

How does the UIC work?

With the Discover library included, the layout of the page in the browser is captured at each step, along with the values of fields interacted with and which elements were clicked on. With this data we can show in a replay what the page looked like when it first loaded and as the user interacted with the form, including what was entered in the fields (masked for privacy when needed), where the user clicked, and the changes in the page during those interactions, such as error or validation messages, and where the new section was loaded into the page.

It can capture:

  • DOM snapshots for use when replaying visitor sessions
  • User interactions, clicks, hovers, friction/frustration, form fields, ...
  • Browser performance metrics
  • Browser storage (local/session)
  • Data layer information, e.g. Google Analytics, Tealium, Adobe, ...
  • API calls (XHR/fetch/sockets)
  • Campaign data (UTM query params)
  • Static resource performance monitoring
  • and more ...

It can also:

  • Block sensitive data from user input
  • Block sensitive data on the DOM
  • Block sensitive data in an API call
  • Block undesired screen views
  • Monitor console warnings & errors
  • Normalize URLs for reporting
  • Intelligent session sampling
  • Support Shadow DOM & React JSS

How the UIC Captures Interactions

After the UIC library is added to the web page, the library code can detect UI events that occur on different elements in the page's DOM . For example, when the user enters text into a field, the library code sees each change event for the field and captures the actual value. The library stores these events into a temporary JSON data structure for regular transmission to the Discover target page. The library can be configured to send this captured data to Discover according to the following conditions:

  • At pre-defined time intervals.
  • When a pre-defined number of events were captured.
  • At page unload time, usually defined as the minimum condition.
  • From a custom invocation within the web application.

The UIC library is configured to post data to either a Discover managed hosting collector or a target page hosted by the customer to acknowledge receipt of the data.

Supported protocols

Discover supports HTTP and HTTPS for request and response communication between client and server.

Warning

Verify that your application does not use non-HTTP/HTTPS protocols.

Supported application types

Discover is supported for modern web applications, SPAs, CMS driven, template based, etc ... Exceptions to this are:

  • Applications based on browser plugins, such as Adobe Flash, Microsoft Silverlight
  • Java applets or OS based applications (Microsoft Windows, Apple Mac, ...)
  • Applications that render on HTML Canvas
  • Applications that use Shadow DOM will be captured with the following limitations:
    • Shadow DOM in closed mode will not be captured.
    • Polymer-shimmed apps cannot be captured with Web SDK even if they do not use Shadow DOM.
    • Applications created using Polymer version 1.x or Polymer version 2.x may not be replayable.
    • Applications with deeply nested DOM trees are likely to encounter performance issues.
    • loadWithFrames event will continue to work for frames/iframes in the main document. This event is not supported for frames/iframes within a Shadow DOM tree.

Discover UIC Performance Impact Summary

Discover provides the UIC as a JavaScript library to be included in each page of the web site and that captures data within the end user’s browser. From an implementation standpoint, there are three types of performance impacts:

JavaScript File Size

The UIC size can vary based upon optional software modules added, averaging 170KB with the core code minimized and the configuration un-minimized. This is also a one-time load as the caching policy that is used for a browser.

Page Performance

A common page performance concern is the impact to page render times and how "quickly" the page can render to the user. There is not a hard-fast answer to this one as there are several factors that come into play on page render times and performance. Generally, page render time impacts are between 50ms-500ms.

The primary factors are the entire page size (how many objects) and how the UIC is loaded. In a straight JavaScript include approach, this will impact the page the most as it needs to download the JavaScript and initialize it. This is called a synchronous load and blocks the browser from continuing until the script has initialized, but typically users would not notice this. Depending on where the UIC script is specified in the page will impact this - typically, the best location for a simple implementation is to load it as the last tag in the body element, as this mitigates the render time performance.

Additional optimizations can be done by loading the UIC using a tag management solution or by using asynchronous (non-blocking) loading techniques. In summary, it is recommended to implement the UIC the same way as any other toolkit library and test the performance.

Post Data Size

Another concern is the POST data size and how often the UIC posts data. The UIC queues up data, so the payloads are not sent after each action. This is different from typical analytics solutions, which normally make a call after each action they record. DOM capture enables the page to be recorded in its entirety. This captures an exact copy of the markup that was used to draw the "screen" the user saw. The UIC uses an additional capability DOMDiff to only send in the changed HTML to Discover to minimize post size. Each payload is also compressed before sending.

Discover UIC Privacy Overview

With Discover, privacy content is managed at the client side in the UIC and additionally, on the Discover server for additional protection. This document will only discuss the UIC privacy configuration.

Safeguarding User Data

UIC privacy is primarily concerned with data typed or pasted into a form field. These can also be drop-down lists, calendars, radio buttons, or checkboxes selections. These preventions include: - Standard masking by: ID, name, X-Path, or CSS selector - Custom privacy masking allows JavaScript functions to manipulate input data - Inverted privacy (mask all inputs by default)

By default, all password fields are masked with a customizable character, usually an asterisk. Any credit card or other financial information is masked and replaced with a customized text string, such as XXX-PCI-Credit-Card-XXX or XXX-PCI-BLOCK-XXX. There are many use cases to configure and ensure all required privacy inputs are handled before leaving the customer browser or mobile device.

Masking Application Content

To prevent this data from being captured, the UIC can either mask, replace, remove, or obscure the text in question. The UIC uses regex privacy patterns to redact or mask sensitive data exposed in the captured DOM.

Blocking Entire Pages

A list of screen views (pages) can be blocked by UIC capture. This is especially handy when a screenview contains an excessive amount of sensitive data or a Screenview has no identifying elements to assist with masking.

Masking Asynchronous Data

Many web and mobile applications implement asynchronous network calls (AJAX) to retrieve new HTML or screenview content to display. The UIC uses a privacy masking capability using a specific JSON key and a regex pattern.