Track WebViews

Usage

In order to enable WebView tracking, two steps are required:

Inject the Contentsquare Tracking Tag in WebView mode in the web pages loaded in your app’s WebViews. For more information on this step, refer to 📚 Mobile Apps WebView Tracking Documentation..
Make sure JavaScript is enabled in your WebViews.
Wrap your WebView widget with ContentsquareWebViewWrapper widget and implement it as explained below.

Implementation

The implementation can be done in two different ways depending on how your WebView allows the injection of scripts. These two different ways relies of two subtypes of WebViewWrapperDelegate:

UserScriptWebViewWrapperDelegate to inject the required Contentsquare script through User Scripts. Choose this if you use the flutter_inappwebview package.
JSChannelWebViewWrapperDelegate to inject the required Contentsquare script through JavaScript channel. Choose this if you use packages like webview_flutter or flutter_webview_plugin.

This example uses the flutter_inappwebview ↗ InAppWebView widget.

ContentsquareWebViewWrapper(
  delegate: UserScriptWebViewWrapperDelegate(
    builder: (BuildContext context, String userScript) {
      return InAppWebView(

        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            javaScriptEnabled: true,
          ),
        ),
        initialUrlRequest: URLRequest(
          url: Uri.parse(url),
        ),
        initialUserScripts: UnmodifiableListView([
          UserScript(
            // Inject the script properly
            // by setting the `userScript` as source
            source: userScript,
            // Set the injectionTime as AT_DOCUMENT_START
            injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START,
          ),
        ]),
      );
    },
  ),
)

This example uses the webview_flutter ↗ WebViewWidget widget.


webViewController.setJavaScriptMode(JavaScriptMode.unrestricted);
ContentsquareWebViewWrapper(
  delegate: JSChannelWebViewWrapperDelegate(

    addJavaScriptChannel: (WebViewJSChannelHandler handler) {
      webViewController.addJavaScriptChannel(
        handler.channelName,
        onMessageReceived: (jsMessage) {
          handler.onMessageReceived(jsMessage.message);
        },
      );
    },

    builder: (context) {
      return WebViewWidget(controller: webViewController);
    },
  ),
);

Validate WebView tracking

To validate the tracking of WebViews, refer to the platform-specific instructions.