Track Webviews

Where to inject your WebViews?

Section titled Where to inject your WebViews?

It is essential that you inject your WebViews in viewWillAppear().

Additionally, when setting a delegate on your WebView, ensure that it is implemented and set before calling Contentsquare.register(webView: WKWebView). If this order is not respected, your delegate will not receive any callbacks.

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, you can rely on window.CS_isWebView. This global variable is injected in your page by Contentsquare when the content is loaded from a WebView.

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:

// Start tracking the given WKWebView
Contentsquare.register(webView: WKWebView)

This step is threefold:

  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.
  3. It will inject a window.CS_isWebView variable for you to use in order to detect if the page is loaded from a WebView.

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.

Let’s illustrate our implementation with a UIViewController. In your viewWillAppear() method, add the following:

override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Inject the variable to detect that you are in a WebView context
let userScript = WKUserScript(
source: "window.isWebView = true;",
injectionTime: .atDocumentEnd,
forMainFrameOnly: false
)
webView.configuration.userContentController.addUserScript(userScript)
// Inject the Bridge between the CS Tag in WebView mode and the SDK
Contentsquare.register(webView: webView)
}

As of version 4.35.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.

Once you open the screen with the tracked WebView in your app, you should see the following log:

CSLIB ℹ️ Info: WebView tracking enabled on native side for page: [URL]. Waiting for Web Tracking Tag messages…

Once the web page is loaded in the WebView, you should see the following log:

CSLIB ℹ️ Info: WebView navigated to new page: [URL]. Waiting for Web Tracking Tag messages…

Once the Web Tracking tag is detected in the web page, you should see the following log:

CSLIB ℹ️ Info: Web Tracking Tag is detected on page: [URL]

Validating Pageview and Gestures tracking

Section titled Validating Pageview and Gestures tracking
  • Page views sent through the Web Tracking Tag are displayed the same way as native screen views:
CSLIB ℹ️ Info: Screenview - Screen name: "{{page name given}}" - Screen number: 11
  • Taps and swipes detected by the Web Tracking Tag are also displayed the same way as taps and swipe on native elements, but the end of the target contains HTML DOM elements:
CSLIB ℹ️ Info: Tap - Target: ...>UIViewControllerWrapperView:eq(0)>UIView:eq(0)>WKWebView:eq(0)|webview|img#picture-holder