Monitor hybrid mobile apps with the Cordova plugin

With the latest Dynatrace release, getting started with hybrid app monitoring is easy. Hybrid mobile apps combine the benefits of native mobile apps (for example, 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 all apps that are built on top of Apache Cordova. This also includes apps that use PhoneGap, Ionic, IBM mobile first, and others. The Cordova plugin makes it easy for you to monitor what’s going on in your native mobile apps using (1) OneAgent for Mobile and (2) Real User Monitoring JavaScript tags that monitor the performance of the web-based aspects of your apps (see details below).

Set up hybrid mobile app monitoring

To set up hybrid mobile app monitoring

1. Select Deploy Dynatrace from the navigation menu.
2. Scroll down and click the Set up mobile monitoring button.
3. Type in a name for your app and click Monitor mobile app.
4. Select the platform of your mobile app (Google Android, Apple iOS, or Cordova).
   

   
   

   The setup wizard guides you through the remaining setup steps.
5. Install the plugin in your workspace using Node Package Manager (NPM). Click the Copy button to copy the NPM command to your clipboard (for example, cordova plugin add dynatrace-cordova-plugin --save).
   The next time you build your Android or iOS app, the Cordova plugin will automatically instrument it using OneAgent for Mobile. This will give you visibility into app starts, crash reports, and device metadata such as model and OS version.
6. To capture user actions in the web view, Dynatrace utilizes a JavaScript tag (as is done for all web applications that are set up for agentless Dynatrace monitoring). The good news is that the Cordova plugin automatically injects the JavaScript tag directly into your HTML sources. All you need to do is click the Monitor the web view button. This step additionally creates a new web application entry in your list of monitored applications (see example below). This application entry receives all monitoring data and generates an API token so that the Cordova plugin can retrieve the JavaScript tag from the REST API.
   

   

7. Finally, click the Download dynatrace.config button to download the dynatrace.config file. Place this file into the root folder of your Cordova app workspace, alongside config.xml.
8. Rebuild your app.

Start monitoring you hybrid app

1. Launch your app in an emulator or on a test device and click through some typical 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 (otherwise OneAgent for Mobile may cache the data for up to 2 minutes).
2. Back in Dynatrace, select Applications from the navigation menu.
3. Select your new hybrid mobile app from the list of applications.
4. On your hybrid app’s overview page you’ll find all performance analysis metrics data related to your app. You’ll also see a new Hybrid app section that shows overall details of the performance of the web view portion of your app.
   

   

5. Click the View web application button to see all the performance data that was captured via the injected JavaScript tag (see example below).
   The web application overview contains all the user actions that were captured in web view, so typically you’ll find a high percentage of your app’s user actions listed here.
   

   
   

   As shown, 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.
6. Select User sessions from the navigation menu to access User sessions view. In the Filtered by field, begin typing the name of your hybrid app to focus analysis on your app.
7. Select the default user created for your hybrid app from the Users list at the bottom of the page. Notice that this user has accessed two apps—a Mobile app and a Web app (see example below).
   

   

8. Select a user session and you’ll see that all user actions from the mobile and web sessions have been combined into a single session, along with metadata that enables Dynatrace to show which user actions were captured by OneAgent for Mobile and which were captured by the JavaScript tag.
   Note the chart below that shows the sequence of user actions, when the user actions occurred during the session, and the wait time between actions.
   

   

From this point, you can continue as usual 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.

As you’ve seen, with the Cordova plugin it’s easy to get started with hybrid app monitoring. So, if you have a Cordova-based hybrid app, try monitoring it in your dev environment with Dynatrace. Then share your feedback with us. We’d love to hear what you think about the new Dynatrace Cordova plugin for hybrid apps.