---
title: React Native Web View Tracking
description: >-
  Track web views within React Native applications to monitor performance and
  user interactions between native and web content.
breadcrumbs: >-
  Docs > RUM & Session Replay > Application Monitoring > React Native Monitoring
  > React Native Web View Tracking
---

# React Native Web View Tracking

## Overview{% #overview %}

Real User Monitoring allows you to monitor web views and eliminate blind spots in your hybrid mobile applications.

You can perform the following:

- Track user journeys across web and native components in mobile applications
- Scope the root cause of latency to web pages or native components in mobile applications
- Support users that have difficulty loading web pages on mobile devices

You can also record the entire user journey across both web and native views on iOS or Android and watch it in a single Session Replay. Learn how to [instrument consolidated browser and mobile web views](https://docs.datadoghq.com/session_replay/mobile/setup_and_configuration/#web-view-instrumentation).

## Setup{% #setup %}

### Prerequisites{% #prerequisites %}

Set up the RUM Browser SDK on the web page you want rendered on your mobile application. For more information, see [RUM Browser Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/#npm).

### Declare `DatadogWebViewTracking` as a dependency (iOS or Kotlin Multiplatform only){% #declare-datadogwebviewtracking-as-a-dependency-ios-or-kotlin-multiplatform-only %}

{% tab title="Android" %}
Set up the RUM Browser SDK for the web page you want rendered on your mobile application. For more information, see [RUM Browser Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/#npm).
{% /tab %}

{% tab title="iOS" %}
Set up the RUM Browser SDK for the web page you want rendered on your mobile application. For more information, see [RUM Browser Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/#npm).

1. Make sure to also enable [RUM](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/ios/) and/or [Logs](https://docs.datadoghq.com/logs/log_collection/ios).
1. Add the `DatadogWebViewTracking` library according to your dependency manager.
1. Update your initialization snippet by declaring `DatadogWebViewTracking` as a dependency, as shown below.

{% collapsible-section %}
#### CocoaPods

You can use [CocoaPods](https://cocoapods.org/) to install `dd-sdk-ios`:

```
pod 'DatadogWebViewTracking'
```

{% /collapsible-section %}

{% collapsible-section %}
#### Swift Package Manager (SPM)

To integrate using Apple's Swift Package Manager, add the following as a dependency to your `Package.swift`:

```swift
.package(url: "https://github.com/Datadog/dd-sdk-ios.git", .upToNextMajor(from: "3.0.0"))
```

In your project, link the following libraries:

```
DatadogCore
DatadogWebViewTracking
```

{% /collapsible-section %}

{% collapsible-section %}
#### Carthage

You can use [Carthage](https://github.com/Carthage/Carthage) to install `dd-sdk-ios`:

```
github "DataDog/dd-sdk-ios"
```

In Xcode, link the following frameworks:

```
DatadogWebViewTracking.xcframework
```

{% /collapsible-section %}

{% /tab %}

{% tab title="Flutter" %}
Set up the RUM Browser SDK on the web page you want rendered on your mobile application. For more information, see [RUM Browser Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/#npm).
{% /tab %}

{% tab title="React Native" %}
Set up the RUM Browser SDK on the web page you want rendered on your mobile application. For more information, see [RUM Browser Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/#npm).
{% /tab %}

{% tab title="Kotlin Multiplatform" %}
Add `DatadogWebViewTracking` library to your application by following the guide [here](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/kotlin_multiplatform/setup/#add-native-dependencies-for-ios).
{% /tab %}

### Instrument your web views{% #instrument-your-web-views %}

{% tab title="Android" %}

1. If you want to forward RUM events coming from web pages, download the [latest version](https://search.maven.org/artifact/com.datadoghq/dd-sdk-android-rum) of RUM Android SDK and setup RUM feature following the [dedicated guide](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/android/?tab=kotlin#setup).

1. If you want to forward Log events coming from web pages, download the [latest version](https://search.maven.org/artifact/com.datadoghq/dd-sdk-android-logs) of Logs Android SDK and setup Logs feature following the [dedicated guide](https://docs.datadoghq.com/logs/log_collection/android/?tab=kotlin#setup).

1. Add the Gradle dependency by declaring the `dd-sdk-android-webview` library as a dependency in the module-level `build.gradle` file:

   ```groovy
   dependencies {
       implementation "com.datadoghq:dd-sdk-android-webview:x.x.x"
   }
   ```

1. Enable tracking for web views with the following code snippet:

   ```kotlin
   WebViewTracking.enable(webView, allowedHosts)
   ```

`allowedHosts` matches the given hosts and their subdomain. No regular expression is allowed.

**Note**: In order for instrumentation to work on the WebView component, it is very important that the JavaScript is enabled on the WebView. To enable it, you can use the following code snippet:

```kotlin
webView.settings.javaScriptEnabled = true
```

{% /tab %}

{% tab title="iOS" %}
The RUM iOS SDK provides APIs for you to control web view tracking. To enable Web View Tracking, provide the `WKWebView` instance.

```swift
import WebKit
import DatadogWebViewTracking

let webView = WKWebView(...)
WebViewTracking.enable(webView: webView, hosts: ["example.com"])
```

To disable Web View Tracking:

```swift
WebViewTracking.disable(webView: webView)
```

`allowedHosts` matches the given hosts and their subdomain. No regular expression is allowed.
{% /tab %}

{% tab title="Flutter" %}
The RUM Flutter SDK provides APIs for you to control web view tracking when the [`webview_flutter`](https://pub.dev/packages/webview_flutter) or the [`flutter_inappwebview`](https://pub.dev/packages/flutter_inappwebview) package.

#### Web view Flutter package{% #web-view-flutter-package %}

To add Web View Tracking when using `webview_flutter`, add the following to your `pubspec.yaml` with the most recent version of the [`datadog_webview_tracking`](https://pub.dev/packages/datadog_webview_tracking) plugin:

```yaml
dependencies:
  datadog_webview_tracking: ^x.x.x
```

Then, call the `trackDatadogEvents` extension method on `WebViewController`, providing the list of allowed hosts.

For example:

```dart
import 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';

webViewController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..trackDatadogEvents(
    DatadogSdk.instance,
    ['myapp.example'],
  )
  ..loadRequest(Uri.parse('myapp.example'));
```

Note that `JavaScriptMode.unrestricted` is required for tracking to work on Android. `allowedHosts` matches the given hosts and their subdomain. No regular expression is allowed.

#### Flutter InAppWebView package{% #flutter-inappwebview-package %}

To add Web View Tracking when using `flutter_inappwebview`, add the following to your `pubspec.yaml` with the most recent version of the [`datadog_inappwebview_tracking`](https://pub.dev/packages/datadog_inappwebview_tracking) plugin:

```yaml
dependencies:
  datadog_webview_tracking: ^x.x.x
```

To instrument an `InAppWebView`, add the `DatadogInAppWebViewUserScript` to your `initialUserScripts`, and call the `trackDatadogEvents` extension method during the `onWebViewCreated` callback:

```dart
InAppWebView(
  // Other settings...
  initialUserScripts: UnmodifiableListView([
    DatadogInAppWebViewUserScript(
      datadog: DatadogSdk.instance,
      allowedHosts: {'shopist.io'},
    ),
  ]),
  onWebViewCreated: (controller) async {
    controller.trackDatadogEvents(DatadogSdk.instance);
  },
)
```

To instrument an `InAppBrowser`, add an override for `onBrowserCreated` and call the `trackDatadogEvents` extension method on `webViewController`, then add a `DatadogInAppWebViewUserScript` to the `initialUserScripts` when creating your custom `InAppBrowser`:

```dart
class MyInAppBrowser extends InAppBrowser {
  MyInAppBrowser({super.windowId, super.initialUserScripts});

  @override
  void onBrowserCreated() {
    webViewController?.trackDatadogEvents(DatadogSdk.instance);
    super.onBrowserCreated();
  }
}

// Browser creation
_browser = MyInAppBrowser(
  initialUserScripts: UnmodifiableListView(
    [
      DatadogInAppWebViewUserScript(
        datadog: DatadogSdk.instance,
        allowedHosts: {'shopist.io'},
      ),
    ],
  ),
);
```

The `allowedHosts` parameter of `DatadogInAppWebViewUserScript` matches the given hosts and their subdomain. No regular expression is allowed.
{% /tab %}

{% tab title="React Native" %}

1. Add `react-native-webview` to your application following the [official installation documentation](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md).

1. Import `WebView` from `@datadog/mobile-react-native-webview` instead of `react-native-webview`:

   ```javascript
   import { WebView } from '@datadog/mobile-react-native-webview';
   // or
   import WebView from '@datadog/mobile-react-native-webview';
   ```

1. You can use all existing functionalities from `react-native-webview` as the `WebView` component from `@datadog/mobile-react-native-webview` wraps the `react-native-webview` component.

1. Provide the list of hosts to be tracked by Datadog inside the web view by using the `allowedHosts` prop of your `WebView` component:

   ```javascript
   <WebView
       source={{ uri: 'https://www.example.com' }}
       allowedHosts={['example.com']}
   />
   ```

`allowedHosts` matches the given hosts and their subdomain. No regular expression is allowed.
{% /tab %}

{% tab title="Kotlin Multiplatform" %}

1. If you want to forward RUM events coming from web pages, download the [latest version](https://search.maven.org/artifact/com.datadoghq/dd-sdk-kotlin-multiplatform-rum) of the RUM Kotlin Multiplatform SDK and set up RUM by following the [dedicated guide](https://docs.datadoghq.com/real_user_monitoring/kotlin_multiplatform/#setup).

1. If you want to forward log events coming from web pages, download the [latest version](https://search.maven.org/artifact/com.datadoghq/dd-sdk-kotlin-multiplatform-logs) of the Logs Kotlin Multiplatform SDK and set up logs by following the [dedicated guide](https://docs.datadoghq.com/logs/log_collection/kotlin_multiplatform/#setup).

1. Add the Gradle dependency for the common source set by declaring the `dd-sdk-kotlin-multiplatform-webview` library as a dependency in the module-level `build.gradle.kts` file:

   ```kotlin
   kotlin {
     // ...
     sourceSets {
       commonMain.dependencies {
         implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-webview:x.x.x")
       }
     }
   }
   ```

1. Enable tracking for web views with the following code snippet:

   ```kotlin
   // call it in Android or iOS source set, not in the common one
   WebViewTracking.enable(webView, allowedHosts)
   ```

1. Disable tracking of web views once web view instance can be released (iOS only):

   ```kotlin
   // call it in iOS source set, not in the common one
   WebViewTracking.disable(webView, allowedHosts)
   ```

`allowedHosts` matches the given hosts and their subdomain. No regular expressions are allowed.
{% /tab %}

### Access your web views{% #access-your-web-views %}

Your web views appear in the [RUM Explorer](https://app.datadoghq.com/rum/explorer) with associated `service` and `source` attributes. The `service` attribute indicates the web component the web view is generated from, and the `source` attribute denotes the mobile application's platform, such as Android.

To access your web views:

1. Navigate to **Digital Experiences > Real User Monitoring > (Sessions) Explorer**.

1. Create a query to filter on the following:

   - Your Android and Android TV applications using either `application.id` or `application.name`
   - The web component using `service`
   - The platform using `source`

**Note**: If you see unrecognized version numbers reporting in your mobile app, they may belong to the Browser SDK version. In that case, you can filter out the Browser platform session. For example, `source: react-native`.

1. Click a session. A side panel with a list of events in the session appears.

   {% image
      source="https://datadog-docs.imgix.net/images/real_user_monitoring/android/android-webview-tracking.df373e900d5f8f6dc555ff078183d5f6.png?auto=format"
      alt="Webview events captured in a session in the RUM Explorer" /%}

Any service with the web icon indicates a webview.

From here, you can hover over a session event and click **Open View waterfall** to navigate from the session to a resource waterfall visualization in the view's **Performance** tab.

## Billing implications{% #billing-implications %}

See [RUM & Session Replay Billing](https://docs.datadoghq.com/account_management/billing/rum/#how-do-webviews-in-mobile-applications-impact-session-recordings-and-billing) for details on how web views in mobile applications impact session recordings and billing.

## Further Reading{% #further-reading %}

- [Source code for dd-sdk-android](https://github.com/DataDog/dd-sdk-android)
- [Source code for dd-sdk-ios](https://github.com/DataDog/dd-sdk-ios)
- [Source code for dd-sdk-flutter](https://github.com/DataDog/dd-sdk-flutter)
- [Source code for dd-sdk-reactnative](https://github.com/DataDog/dd-sdk-reactnative)
- [Source code for dd-sdk-kotlin-multiplatform](https://github.com/DataDog/dd-sdk-kotlin-multiplatform)
- [Explore Datadog RUM](https://docs.datadoghq.com/real_user_monitoring)
- [Web View Instrumentation](https://docs.datadoghq.com/session_replay/mobile/setup_and_configuration#web-view-instrumentation)