Track 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.

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.

Use the following API:

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

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

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.

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

- (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];
}

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]

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