Instrument mobile app 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 all apps that are built on top of Apache Cordova. This includes apps that use PhoneGap, Ionic, and IBM mobile first. The Cordova plugin makes it easy to monitor what's going on in your native mobile apps using:

  • OneAgent for Mobile and
  • RUM JavaScript that monitors the performance of the web-based aspects of your apps.

Set up hybrid mobile app monitoring

  1. In the Dynatrace menu, go to Deploy Dynatrace.

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

    setup wizard

    The setup wizard guides you through the set-up process.

  5. Install the plugin in your workspace by using Node Package Manager (NPM).

  6. Select 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 provide visibility into app starts, crash reports, and device metadata such as model and OS version.

    To capture user actions in the web view, Dynatrace uses the RUM JavaScript, as is done for all web applications that are set up for agentless Dynatrace monitoring. The Cordova plugin automatically injects the RUM JavaScript directly into your HTML sources. When you click the Monitor the web view button, a new web application entry is created in your list of monitored applications. This application entry receives all monitoring data and generates an API token so that the Cordova plugin can retrieve the RUM JavaScript from the REST API.

    cordova app instrumentation

  7. Click the Download dynatrace.config button to download the dynatrace.config file. Save this file into the root folder of your Cordova app workspace with config.xml.

  8. Rebuild your app.

Start monitoring

  1. Launch your 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 or OneAgent for Mobile may cache the data for up to 2 minutes.

  2. Back in Dynatrace, go to Mobile in the Dynatrace menu.

  3. Select your new hybrid mobile 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.

    analyze mobile apps

  4. Click the View web application button to view all performance data that was captured via the injected RUM JavaScript.

    The web application overview contains all user actions that were captured in the web view, so you'll find a high percentage of your app's user actions listed here.

    analyze web apps

    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.

  5. In the Dynatrace menu, go to Session segmentation to access the User sessions view. In the Filtered by field, start typing the name of your hybrid app to focus analysis on your app.

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

    analyze user

    If you select a user session, you'll see that all user actions from the mobile and web sessions have been combined into a single session, along with the metadata that enables Dynatrace to show which user actions were captured by OneAgent for Mobile and which were captured by the RUM JavaScript. The following chart shows the sequence of user actions, when they occurred during a user session, and the wait time between the actions.

    joined user session

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.