Instrument mobile apps with Dynatrace Cordova plugin
Hybrid mobile apps combine the benefits of native mobile apps, such as phone hardware and deployment via an app store, with the flexibility and platform independence of modern web technologies.
The Dynatrace Cordova plugin allows you to instrument apps that are built on top of Apache Cordova. This includes apps that use Capacitor, Ionic, or IBM mobile first. The Cordova plugin makes it easy to monitor your hybrid apps using the following technologies:
- OneAgent for Mobile, which monitors the native part of your app
For detailed technical documentation, see the Dynatrace Cordova plugin page on the npm site.
Set up hybrid mobile app monitoring
- In the Dynatrace menu, go to Deploy Dynatrace.
- Scroll down to the Mobile app monitoring section and select Set up mobile monitoring.
- Enter a name for your application and select Create mobile app. The application settings page opens.
From the app settings, go to Instrumentation wizard, and select your mobile app platform, for example, Cordova.
cordova plugin add @dynatrace/cordova-plugin --savecommand in the root directory of your Cordova-based project to install the Dynatrace Cordova plugin.
Select Monitor the web view to enable the web view monitoring.
Select Download dynatrace.config.js, and add the downloaded file to the root of your Cordova app workspace next to the
Build your project using
cordova build androidor
cordova build ios.
When you build your Android or iOS app, the Cordova plugin automatically instruments your app using OneAgent for Mobile, which monitors the native part of your hybrid app. This provides visibility into app starts, user actions, crash reports, and device metadata such as model and OS version. The monitoring data collected by OneAgent for Mobile is encapsulated in a mobile app in the Dynatrace web UI.
Start monitoring and analyzing your app
Launch your hybrid app in an emulator or on a test device, and click through the use cases to generate some traffic that Dynatrace can monitor. When you're done, close your app to ensure that all data is sent to Dynatrace. Note that OneAgent for Mobile may cache the data for up to 2 minutes.
Go back to the Dynatrace web UI, and select Mobile from the Dynatrace menu.
Select your new hybrid app from the list of applications.
All performance analysis metrics data related to your app is displayed on your hybrid app's overview page. The Hybrid app section displays the overall details of the performance of the web portion of your app.
The web application overview page contains user actions that are captured in the web view, so you'll find a high percentage of your app's user actions listed here.
Performance data is split across two application views. However, Dynatrace consolidates all detected user actions from these application views to a single user and a single user session.
In the Dynatrace menu, go to Session segmentation to access the User sessions page. In the Filtered by field, enter Application, and select your hybrid mobile app, which allows you to focus analysis on your newly created app.
Select the default user created for your hybrid app from the User column. Notice that this user has accessed two apps—a mobile app and a web app.
The following chart shows the sequence of user actions, when they occurred during a user session, and the wait time between the actions.
From here, you can continue with your user-experience analysis. You can add additional filters to focus on the sessions you want to take a closer look at, or you can drill down to the user action waterfalls of your app's web and mobile sessions.