Track WebViews (Beta)

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

Once the WebView Tracking Tag is implemented in the web pages, you need to wrap any tracked WebView in the ContentsquareWebViewTrackerBuilder Widget. See:

If you are using the official WebView plugin, the following code can be used to track a webview:

ContentsquareWebViewTrackerBuilder(
builder: (context, tracker) {
return WebView(
initialUrl: 'https://your_tracked_webview.com',
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: tracker.javascriptChannels,
onWebViewCreated: tracker.onWebViewCreated,
onPageFinished: tracker.onPageFinished,
);
},
)

To use a custom WebView package, you can use the ContentsquareWebViewTrackerBuilder.custom widget constructor.

The builder gives you a tracker of which you need to consider the following elements:

  1. tracker.registerWebViewController
  2. tracker.javascriptChannels: Register these channels which are used to communicate between Contentsquare and your WebView
  3. tracker.initializeWebViewTracking: This must be called after initializeWebViewTracking and when the javascriptChannels are registered.

See the following section for a concrete example of implementation with the flutter_inappwebview package.

If you are using the flutter_inappwebview, the following code can be used to track a webview:

ContentsquareWebViewTrackerBuilder(
builder: (context, tracker) {
return InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse('https://your_tracked_webview.com'),
),
onWebViewCreated: (controller) {
tracker.registerWebViewController(
ContentsquareWebViewController(
evaluateJavascript: (source) async {
return '${await controller.evaluateJavascript(source: source)}';
},
currentUrl: () async => '${await controller.getUrl()}',
javascriptChannelCall: (channelName, data) {
return 'window.flutter_inappwebview.callHandler("$channelName", $data)';
},
),
);
for (final javascriptChannel in tracker.javascriptChannels) {
controller.addJavaScriptHandler(
handlerName: javascriptChannel.name,
callback: (args) {
return javascriptChannel.onMessageReceived(args.first);
},
);
}
},
onLoadStop: (controller, uri) async {
//
// This MUST be called AFTER the controller is registered and the JavaScript
// channels are available
await tracker.startPageTracking();
},
);
},
)

Once you arrive on the screen with the tracked WebView, you should see the following log:

Terminal window
┌───────────────────────────────────────────────────────────────────────────────
ℹ️ INFO ℹ️ (CSLIB) [Tracked WebView]
├───────────────────────────────────────────────────────────────────────────────
WebView tracking enabled on WebView with initialUrl:
https://your.tracked.website
└───────────────────────────────────────────────────────────────────────────────

Once you arrive on the screen with the tracked WebView, you should see the following log:

Terminal window
┌───────────────────────────────────────────────────────────────────────────────
ℹ️ INFO ℹ️ (CSLIB) [Tracked WebView] ⟶ Event "sendMessage"
├───────────────────────────────────────────────────────────────────────────────
{"message":"ready, v:06c8d9bbfdf0e4bb9041b784e95c751873654cb0"}
└───────────────────────────────────────────────────────────────────────────────