The Acoustic Analytics Developer Hub

Welcome to the Acoustic Analytics developer hub. You'll find comprehensive guides and documentation to help you start working with Acoustic Analytics as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Capturing asynchronous DOM updates

All modern web applications perform asynchronous DOM updates which cause the application content or data to be retrieved asynchronously from the network prior to being rendered on the page. The asynchronous updates can occur during navigation, scrolling (lazy load) or in response to any explicit user interaction with the page.

If your web application performs an asynchronous DOM update and the page snapshot is captured before the asynchronous update has been applied, Replay might appear to be broken or display incorrect information.

Such issues can be addressed by configuring the UIC to delay taking the snapshot until the occurrence of a CSS selector. The selector can be based on a spinner or loading icon or it could be based on the content which is to be expected in the DOM after the asynchronous update has been applied.

<img src="loading.png" id="spinner"/>

Tealeaf can capture the DOM either before or after the dynamic content loads. Usually when the css selector disappears, the dynamic content is fully loaded and ready for snapshot, as shown in figure C.
Fully loading snapshot
To capture lazy loading content, you must configure the triggers section in UIC by defining the events that are triggered by the css selector appearing or disappearing from the DOM. The following sample configuration shows a delayUntil condition on a load event.

triggers: [
    {
        event: "load",
        delayUntil: {
            selector: "#spinner",
            exists: false
        }
    }
]

The condition instructs UIC to capture the DOM only when the css selector ("#spinner") disappears. The exists property is only used for taking a single snapshot, either when the selector appears or disappears.

To limit lazy load DOM captures on specific urls, provide your own logic.

if (urlA || urlB) {
    config.modules.replay.domCapture.triggers = {
    };
}

Similarly, Tealeaf can add a delayUntil condition for the click and change events. For example, when a user clicks a button or selects an item from a dropdown.

triggers: [
    {
        event: "change",
        delayUntil: {
            selector: "#spinner",
            exists: false
        }
    }

To limit lazy load DOM captures on a specific dropdown, use the targets property.

triggers: [
    {
        event: "change",
        targets: ["select.car"],
        delayUntil: {
            selector: "#spinner",
            exists: false
        }
    },
    {
        event: "change"
    }
]

Additional selector examples

To detect when a selector is invisible:

delayUntil: {
  selector: "img[style*='display: none']";
  exists: true;
}

To detect when a selector is hidden:

delayUntil: {
  selector: "img[style*='visibility: hidden']"
  exists: true;
}

To detect a selector with class name "foo":

delayUntil: {
  selector: "div[class*='foo']"
  exists: true;
}

The additional selector examples are intended to illustrate basic use of css selectors. For more details about using selectors, refer to other reliable references on the topic.

In some cases the delayUntil condition may not occur. For example, the spinner may never appear, or if it did it may never go away. To avoid having the Sdk wait continuously, there is an optional timeout to set the amount of time to wait before it triggers the snapshot.

delayUntil: {
    selector: "#spinner",
    exists: false,
    timeout: 30000
}

The following table shows configuration properties that are used by lazy load.

Property
Description

event

Event for triggering DOM capture


delayUntil


Condition used to instruct UIC to wait until a specific css selector occur then takes snapshot.


selector


CSS selector to observe for.


exists


Boolean. Default is true. If true, triggers capture when the css selector appears. If false, triggers capture when the selector disappears


timeout


Integer. The amount of time in milliseconds to wait for the delayUntil condition to occur and if for any reason it did not, the SDK will then trigger the snapshot.


targets


List of html targets that can trigger capture.

When configuring a snapshot delay, it is strongly recommended to use the delayUntil property to capture asynchronous DOM updates. The delay property should only be used for taking snapshots after fixed and short delays (less than 100ms) to account for client side variations in execution times.

When configuring an optional delay, the DOM Capture trigger can specify either a delay or a delayUntil setting but not both. If both properties are set, the fixed delay setting takes precedence.

Updated 2 days ago


Capturing asynchronous DOM updates


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.