Track WebViews

A newer version of this documentation is available. Switch to the latest version docs.

Where to inject your WebViews?

Section titled Where to inject your WebViews?

It is essential that the following steps are done before an URL is loaded in your WebView. With that in mind, you should inject your webviews in onCreate() in Activity and onCreateView() in Fragment.

No matter where you decide to add the following injection code, keep in mind that it will not take effect until the next WebView content reload.

Inject a variable to detect when you load your page from a WebView

Section titled Inject a variable to detect when you load your page from a WebView

If your page can be loaded both in a WebView and in a browser, you need to differentiate both in order to inject the proper CS Tag first.

If you don’t already have a system in place, here’s how to inject a variable to detect when the page is being loaded from a WebView, before adding our JavaScript Bridge.

val isWebViewJS = "window.isWebView = true;"
val webView = findViewById<WebView>(R.id.webview)
webView.settings.javaScriptEnabled = true
webView.webViewClient = object : WebViewClient() {
override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?){
webView.evaluateJavascript(isWebViewJS){ _ -> }
super.onPageStarted(view, url, favicon)
}
}

Inject the Bridge between the CS Tag in WebView mode and the SDK

Section titled Inject the Bridge between the CS Tag in WebView mode and the SDK

Use the following API:

CsWebViewManager.injectEventTrackingInterface(@NonNull WebView webView) // to start tracking the specific WebView

This step is twofold:

  1. It will inject our JavaScript Bridge in order to connect the CS Tag in WebView mode and our SDK.
  2. It will inject your CS Tag in WebView mode if it was not already injected, allowing us to gather data on all your webviews, even when the user is offline, on pages showing local HTML.

Inject the CS Tag in WebView mode into your HTML page

Section titled Inject the CS Tag in WebView mode into your HTML page

After doing all the above, in order for the implementation to be completed, you will need to make sure our CS Tag in WebView mode is injected on your pages. To do so, refer to 📚 Mobile Apps WebView Tracking Documentation.

As of version 4.31.0, the SDK will automatically inject the CS Tag in WebView mode if it was not already injected. This will allow us to gather data on all your webviews, even when the user is offline, on pages showing local HTML.

In order for this feature to work we are using a new CsWebViewClient class, which extends the WebViewClient class. This class is used to intercept the loading of the WebView and inject the CS Tag in WebView mode.

In case you want to use your own WebViewClient, you can simply extend our CsWebViewClient class and override the methods you need. Here are a few examples on how to do this:

// automatic tag injection enabled
CsWebViewManager.injectEventTrackingInterface(webview) // this is what should be called normally
// automatic tag injection enabled
webview.settings.javaScriptEnabled = false // even if set to false, the tag will be injected as we re-enable javascript
webview.webViewClient = object : CsWebViewClient() {}
// automatic tag injection enabled
CsWebViewManager.injectEventTrackingInterface(webview)
webview.webViewClient = object : CsWebViewClient() {}
// automatic tag injection disabled
webview.webViewClient = object : CsWebViewClient() {}
// automatic tag injection disabled
CsWebViewManager.injectEventTrackingInterface(webview)
webview.webViewClient = object : WebViewClient() {}`

Let’s illustrate our implementation with an Activity. In your onCreate() method, you will add the following:

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_web_view)
// Inject the variable to detect that you are in a WebView context
val isWebViewJS = "window.isWebView = true;"
val webView = findViewById<WebView>(R.id.webview)
webView.settings.javaScriptEnabled = true
webView.webViewClient = object : WebViewClient() {
override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?){
webView.evaluateJavascript(isWebViewJS){ _ -> }
super.onPageStarted(view, url, favicon)
}
}
// Inject the Bridge between the CS Tag in WebView mode and the SDK
CsWebViewManager.injectEventTrackingInterface(webView)
webView.loadUrl(DEFAULT_WEB_VIEW_CONTENT_URL)
webView.reload()
}

If you are using Fragments, the approach is similar, but should be done in the onCreateView() method, as stated previously.

Validate your implementation of WebView tracking

Section titled Validate your implementation of WebView tracking

Currently, there is no way of validating the implementation on the native side only.

Validating the implementation on the web side

Section titled Validating the implementation on the web side

Once you arrive on the screen with the tracked WebView, you should see an initial confirmation log message:

WebView detected and WebView tracking enabled on native side

Specific logs are then emitted for:

  • Page views fired by the WebView Tracking Tag in the same format as for screen views: Screenview - Screen name: {{page name given}} - Screen number: 11
  • Taps and swipes detected by the WebView Tracking Tag in the same format as for defaults taps and swipe but with the target matching an HTML DOM element value: Tap - Target: {Last view info: div:eq(0)} - Unresponsive: false

Going further: If you still have doubt, you can look for logs by filtering on WebViewEventProcessor. Their presence will confirm that it is well implemented on both web and native sides.