Best practices for Web App developers for Web SDK integration

The following sections provide recommended practices for Web App developers for Web SDK integration.

General

• Use static and unique HTML IDs for all user input and interactive elements. When using data binding for element attributes such as "id", "name", "class" etc. ensure that these values will also be reflected in the HTML DOM. An example of this is the Polymer framework's reflectToAttribute flag.
• Use static and unique URL hash fragments for automatically identifying screen-view changes of a single-page workflow.

DOM Capture

• Clearly separate the static and the dynamic content of the application into different container elements to minimize the size of diffs.
• Use static container elements (div) with unique HTML IDs as placeholders for subsequent dynamic AJAX updates.
• Consolidate DOM changes to minimize the number of mutation records that need processed.
• Make DOM node insertions and removals to the innermost container elements instead of outer elements, like the document body.
• Do not use insertRule, addRule, and deleteRule methods to dynamically alter the CSS stylesheets at run time. Instead, use CSS selectors and modify CSS class attributes to achieve the same results.
• Dynamic changes to CSS stylesheets that use insertRule, addRule, and deleteRule methods do not result in any DOM Mutations. Therefore, these changes cannot be tracked and captured by using DOM Capture. Applications that use these methods or incorporate 3rd party CSS-in-JS libraries to dynamically alter the CSS might not replay correctly.
• Do not inline large CSS in the HTML. It is preferable to move large CSS into external stylesheet files that can be cached by the browser.
• Do not inline large data URIs in the HTML. It is preferable to move large data URIs into their own resource file or an external CSS file.

Shadow DOM Capture

In addition to the best practices for DOM Capture, applications using Shadow DOM must ensure the following:

• Create Shadow roots in “open” mode. Shadow DOM in “closed” mode is not captured.
• Minimize the number of Shadow DOM trees.
  Web SDK and Replay performance is proportional to the number of Shadow DOM trees and the size of the HTML DOM content.

Note: Acoustic Overstat does not support Shadow DOM. If the page you took a snapshot of includes Shadow DOM, and you've enabled Shadow DOM capture, the overlays for that page will not render accurately.

For information regarding limitations when integrating with applications using Shadow DOM, see Supported application types in Tealeaf Web SDK overview.

Privacy

• Mark all sensitive user input fields with a static and unique HTML ID or CSS class name.

Best practices for Web SDK configuration

The following sections provide recommended practices for Web SDK configuration.

General

• Use the development build when you perform initial integration and testing. This build makes it much easier to debug any issues.
• Before you enable advanced features like DOM Capture, validate the basic operation of the Web SDK.
• As a final step, enable gzip encoding and fine-tune the queue configuration.

DOM Capture

• Identify the triggering user actions that result in significant DOM changes. Configure these specific DOM Capture triggers to minimize the number of DOM snapshots that are required.
• Identifying elements by ID and IDType is more efficient than using CSS selectors.
• Use delay configuration for fine tuning only. Use of delays is appropriate in a case where the DOM updates occur within 10 ms - 100 ms after the triggering action. For example, after CSS class updates or local JavaScript execution.
• Use of delay configuration to account for asynchronous operations that have a large time band does not produce a predictable replay outcome and can cause missed snapshots. For example, any operation that involves network communication can cause these results. Refer to the Capturing asynchronous DOM updates section for additional information.

Privacy

• Identifying elements by ID and IDType is more efficient than using CSS selectors.
• When you use regex rules or CSS selectors, be mindful of the performance impact. Always validate the rule is working as intended.