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.
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.
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"
}
Enable tracking for web views with the following code snippet:
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:
webView.settings.javaScriptEnabled = true
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)
allowedHosts matches the given hosts and their subdomain. No regular expression is allowed.
The RUM Flutter SDK provides APIs for you to control web view tracking when the webview_flutter or the flutter_inappwebview 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 plugin:
dependencies:
datadog_webview_tracking: ^x.x.x
Then, 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.
allowedHosts matches the given hosts and their subdomain. No regular expression is allowed.
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 plugin:
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:
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:
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.
Add react-native-webview to your application following the official installation documentation.
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';
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.
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']}
/>
allowedHosts matches the given hosts and their subdomain. No regular expression is allowed.
If you want to forward RUM events coming from web pages, download the latest version of the RUM Kotlin Multiplatform SDK and set up RUM by following the dedicated guide.
If you want to forward log events coming from web pages, download the latest version of the Logs Kotlin Multiplatform SDK and set up logs by following the dedicated guide.
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 {
// ...
sourceSets {
commonMain.dependencies {
implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-webview:x.x.x")
}
}
}
Enable tracking for web views with the following code snippet:
// call it in Android or iOS source set, not in the common one
WebViewTracking.enable(webView, allowedHosts)
Disable tracking of web views once web view instance can be released (iOS only):
// 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.
