Track WebViews (Beta)

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"}
└───────────────────────────────────────────────────────────────────────────────