Track Webviews
Enable tracking in WebViews
Section titled Enable tracking in WebViewsWhere 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 WebViewIf your page can be loaded both in a WebView and in a browser, you will need to differentiate both, in order to inject the proper CS Tag first.
You may have already set up a way to handle this differentiation. If not, here’s how to inject a variable to detect when the page is being loaded from a WebView, before adding our JavaScript Bridge.
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
Section titled Inject the Bridge between the CS Tag in WebView mode and the SDKUse the following API:
// Start tracking the given WKWebView Contentsquare.register(webView: WKWebView)
// Start tracking the given WKWebView [Contentsquare registerWithWebView:(WKWebView * _Nonnull)];
It will inject our JavaScript Bridge in order to connect the CS Tag in WebView mode and our SDK.
Inject the CS Tag in WebView mode into your HTML page
Section titled Inject the CS Tag in WebView mode into your HTML pageAfter 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
Section titled Let’s sum it upLet’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]; }
Validate WebView tracking
Section titled Validate WebView trackingOn the native side
Section titled On the native sideOnce 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
Section titled On the Web sideOnce 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