Webview Tagging

This guide covers the steps to implement screen name tagging in webviews using UXCam for both Android and iOS platforms. Screen name tagging enhances the clarity of user journey visualisation within your app's webviews.

For tagging webviews, it is necessary to add some JS injection, here are some simplified examples you can check to accomplish this:

Android Example:

Step 1: Create a Java WebAppInterface

To expose a method to JavaScript, create a Java class that acts as a bridge between the webview and the Android native code.

public class WebAppInterface {
    @JavascriptInterface
    public void tagScreenName(String screenName) {
        UXCam.tagScreenName(screenName);
    }
}

Step 2: Attach the Interface Class to the Webview

Attach the interface class to the webview, allowing JavaScript to call native methods.

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(), "UXCamBridge");

Step 3: Call the Java Method Through the Bridge

In your HTML code, call the Java method through the bridge you attached.

<input type="button" value="Tag Screen" onClick="tagScreenName('screenName')" />

<script type="text/javascript">
    function tagScreenName(screenName) {
        UXCamBridge.tagScreenName(screenName);
    }
</script>

iOS Example:

On iOS, we don't have easy solution for webview tagging as Android but there are some ways to do that. For this, first on ios, we need to observe the uxcam values using contentController.

Step 1: Observe UXCam Values using WKUserContentController

In your iOS project, use WKUserContentController to observe the messages from web content. Create a WKWebViewConfiguration and attach it to the WKWebView.

let contentController = WKUserContentController()
contentController.add(self, name: "uxcam")
let config = WKWebViewConfiguration()
config.userContentController = contentController
self.webView = WKWebView(frame: .zero, configuration: config)

Step 2: Pass Method Name and Parameters from JS to Native

Then on JS side, we need to pass method name and parameters that we need to use on native side and post that to native one using postMessage eg.

<script type="text/javascript">
     function tagScreenName(screenName) {
          const method = {
               name: "tagScreenName", // Method name
               param: "screenName" // Parameters for that method
          }
          window.webkit.messageHandlers["uxcam"].postMessage(method);
     }
</script>

Step 3: Observe UXCam Values on the Webview Controller

And observe the uxcam values on the webview controller:

extension WebViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "uxcam" else { return }
        guard let methodInfo = message.body as? [String: String] else { return }
        if let methodName = methodInfo["name"], methodName == "tagScreenName" {
            guard let screenName = methodInfo["param"] else { return }
            UXCam.tagScreenName(screenName)
        }
    }
}

React Native Example:

Here we're just grabbing the HTML title element and sending it to the tagScreenName:

render() {
    const injectedJs = `
      window.alert(document.title);
      ReactNativeWebView.postMessage(document.title);`

    return (
      <WebView
        ref="webview"
        source={{
          uri: 'https://uxcam.com/',
        }}
        onNavigationStateChange={this._onNavigationStateChange.bind(this)}
        javaScriptEnabled={true}
        injectedJavaScript={injectedJs}
        onMessage={this._onMessage}
      />
    );
  }
  _onNavigationStateChange() { }
  _onMessage(data) {
    var element = data.nativeEvent.data;
    RNUxcam.tagScreenName(element);
  }
}

This approach can be extended to other methods such as sending events and occluding sensitive views within the webview.

By following these steps, you can effectively tag screen names in webviews using UXCam on both Android and iOS platforms.