Configuring DOM Capture and Replay for native Android applications that cannot use Passive Capture Application

Skill Level: Any

Overview

You configure DOM capture for a Native iOS application that cannot use Passive Capture Application by modifying the defaultconfiguration.js file. If the HTML page in the webview does not fire on page load or if the page changes dramatically, you need to fire DOM capture from within your Native iOS application.

Prerequisites

Before you do this task you must install the UIC library in your native application. All of the modifications that you make are in your native Android application.

Step-by-step

1. Implement these methods in the UIWebViewDelegate

(void) webViewDidFinishLoad: (UIWebView * ) webView {


        [
            [TLFCustomEvent sharedInstance] logScreenLayoutWithViewController: self
        ];


    }




    -
    (BOOL) webView: (UIWebView * ) webView shouldStartLoadWithRequest: (NSURLRequest * ) request navigationType: (UIWebViewNavigationType) navigationType {


        return YES;


    }

2. Modify the defaultconfiguration.js file and set the DOM Capture options that you want to use

replay: {
    // DOM Capture configuration
    domCapture: {
        /**
         * NOTE: Enabling DOM Capture has significant implications on data
         * transmission and infrastructure. This feature should be enabled
         * judiciously. If enabled, it requires further configuration
         * to only perform the DOM Capture based on specific events and 
         * elements. Refer to the documentation for more details.
         */
        enabled: true,
        triggers: [{
            event: "load"
        }]
    }
}

Note:

In UI Capture version 5.0.0 and later, DOM Diff is automatically enabled when DOM Capture is enabled. DOM diff is not supported with Hybrid Mobile replay. Complete the following steps to disable DOM Diff:

  • In the UI Capture configuration, locate the domCapture service configuration object in the services object.
  • Set the diffEnabled flag to false.

Example:

domCapture: {
    diffEnabled: false,
    // DOM Capture options
    options: {
        maxLength: 1000000, // If this threshold is exceeded,
        the snapshot will not be sent
        captureFrames: true, // Should child frames/iframes
        be captured
        removeScripts: true // Should script tags be removed
        from the captured snapshot
    }
}

3. Load DOM Capture on load

If DOM Capture does not fire on load, set DOM Capture to fire from your application by adding this code to your native Android application for the screenview that you want to capture.

if (TLT === undefined) {
    console.log('TLT is undefined!');
} else {
    if (TLT.logScreenviewLoad === undefined) {
        console.log('Could not invoke TLT.logScreenviewLoad API!');
    } else {
        TLT.logScreenviewLoad("root");
        console.log('logScreenviewLoad:');
    }


    if (TLT.logDOMCapture === undefined) {
        console.log('Could not invoke TLT.logDOMCapture API!');
    } else {
        dcid = TLT.logDOMCapture(window.document, {});
        console.log('logDOMCapture:' + dcid);
    }
}

4. Optional: Add a delay to the DOM Capture

If the webview has images that are slow to load, you can add a delay to the DOM Capture with this method

-(void) webViewDidFinishLoad: (UIWebView * ) webView {


    [
        [TLFCustomEvent sharedInstance] logScreenLayoutWithViewController: self andDelay: 0.2
    ];


}

Updated 4 months ago


Configuring DOM Capture and Replay for native Android applications that cannot use Passive Capture Application


Suggested Edits are limited on API Reference Pages

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