Track Webviews

Enable tracking in WebViews

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

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.

Swift
Objective-C

    let userScript = WKUserScript(
        source: "window.isWebView = true;",
        injectionTime: .atDocumentEnd,
        forMainFrameOnly: false
    )
    webView.configuration.userContentController.addUserScript(userScript)

    NSString *source = @"window.isWebView = true;";
    WKUserScript *userScript = [[WKUserScript alloc] initWithSource:source
                                                     injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
                                                     forMainFrameOnly:NO];
    [webView.configuration.userContentController addUserScript:userScript];

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

Use the following API:

Swift
Objective-C

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

    // Start tracking the given WKWebView
    [Contentsquare registerWithWebView:(WKWebView * _Nonnull)];

This step is twofold:

It will inject our JavaScript Bridge in order to connect the CS Tag in WebView mode and our SDK.
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

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 sum it up

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

Swift
Objective-C

    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)
    }

    - (void)viewWillAppear:(BOOL)animated {
        [super viewWillAppear:animated];

        // Inject the variable to detect that you are in a WebView context
        NSString *source = @"window.isWebView = true;";
        WKUserScript *userScript = [[WKUserScript alloc] initWithSource:source
                                                         injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
                                                         forMainFrameOnly:NO];
        [webView.configuration.userContentController addUserScript:userScript];

        // Inject the Bridge between the CS Tag in WebView mode and the SDK
        [Contentsquare registerWithWebView:self.webView];
    }

Automatic tag injection

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.

Validate WebView tracking

On the native side

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…

On the Web side

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

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