---
title: Track WebViews - Flutter
description: Track webviews with the CSQ Flutter SDK
lastUpdated: 11 March 2026
source_url:
  html: https://docs.contentsquare.com/en/csq-sdk-flutter/experience-analytics/track-webviews/
  md: https://docs.contentsquare.com/en/csq-sdk-flutter/experience-analytics/track-webviews/index.md
---

## Usage

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

1. 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.](https://docs.contentsquare.com/en/webview-tracking-tag/).
2. Make sure JavaScript is enabled in your WebViews.
3. Wrap your WebView widget with `CSQWebViewWrapper` widget and implement it as explained below.

## Implementation

Warning

Our implementation will work if and only if the WebView widget you are using in your app is relying on an underlying instance of `android.webkit.WebView` on Android and WebKit’s `WKWebView` on iOS.

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

### Examples

* Using UserScriptWebViewWrapperDelegate

  This example uses the [flutter\_inappwebview ↗](https://pub.dev/packages/flutter_inappwebview) `InAppWebView` widget.

  ```dart
  import 'package:contentsquare/csq.dart';


  CSQWebViewWrapper(
    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,
            ),
          ]),
        );
      },
    ),
  )
  ```

  Note

  You should always set the property `injectionTime` of `UserScript` to `UserScriptInjectionTime.AT_DOCUMENT_START`. `UnmodifiableListView` is imported from `dart:collection`.

* Using JSChannelWebViewWrapperDelegate

  This example uses the [webview\_flutter ↗](https://pub.dev/packages/webview_flutter) `WebViewWidget` widget.

  ```dart
  import 'package:contentsquare/csq.dart';​


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


      addJavaScriptChannel: (WebViewJSChannelHandler handler) {


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


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

  Note

  You should always set the channel name to `handler.channelName` and call `handler.onMessageReceived(...)` in the JavaScript channel message callback.

## Validate WebView tracking

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

* [📚 Android documentation](https://docs.contentsquare.com/en/csq-sdk-android/experience-analytics/track-webviews/#validating-the-implementation-on-the-web-side)
* [📚 iOS documentation](https://docs.contentsquare.com/en/csq-sdk-ios/experience-analytics/track-webviews/#on-the-web-side)