Web View Tracking
Overview
Real User Monitoring allows you to monitor web views and eliminate blind spots in your hybrid Flutter 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
Setup
Prerequisites
Set up the web page you want rendered on your mobile Flutter application with the RUM Browser SDK first. For more information, see RUM Browser Monitoring.
Instrument your web views
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.
Access your web views
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.
Further Reading
Additional helpful documentation, links, and articles:
