Web View Tracking

You can use CocoaPods to install dd-sdk-ios:

pod 'DatadogWebViewTracking'

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

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

In your project, link the following libraries:

DatadogCore
DatadogWebViewTracking

You can use Carthage to install dd-sdk-ios:

github "DataDog/dd-sdk-ios"

In Xcode, link the following frameworks:

DatadogWebViewTracking.xcframework

1. If you want to forward RUM events coming from web pages, download the latest version of RUM Android SDK and setup RUM feature following the dedicated guide.

2. If you want to forward Log events coming from web pages, download the latest version of Logs Android SDK and setup Logs feature following the dedicated guide.

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

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

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

     WebViewTracking.enable(webView, allowedHosts)
   

The RUM iOS SDK provides APIs for you to control web view tracking. To enable Web View Tracking, provide the WKWebView instance.

import WebKit
import DatadogWebViewTracking

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

To disable Web View Tracking:

WebViewTracking.disable(webView: webView)

The RUM Flutter SDK provides APIs for you to control web view tracking when using the webview_flutter package. To add Web View Tracking, call the trackDatadogEvents extension method on WebViewController, providing the list of allowed hosts.

For example:

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.

1. Add react-native-webview to your application following the official installation documentation.

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

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

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

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

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

Your web views appear in the 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.

Filter on your Android and Android TV applications, and click a session. A side panel with a list of events in the session appears.

Click Open View waterfall to navigate from the session to a resource waterfall visualization in the view’s Performance tab.

Your web views appear as events and views in the 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 iOS.

Filter on your iOS and tvOS applications, and click a session. A side panel with a list of events in the session appears.

Click Open View waterfall to navigate from the session to a resource waterfall visualization in the view’s Performance tab.

Your web views appear as events and views in the 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 Flutter.

Filter on your Flutter application and click a session. A side panel with a list of events in the session appears.

Click Open View waterfall to navigate from the session to a resource waterfall visualization in the view’s Performance tab.

Your web views appear in the 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 React Native.

Filter on your React Native applications, and click a session. A side panel with a list of events in the session appears.

Click Open View waterfall to navigate from the session to a resource waterfall visualization in the view’s Performance tab.