Instrument hybrid apps

With Dynatrace, you can set up Real User Monitoring for various types of hybrid and cross-platform mobile applications.

You can instrument your mobile application using one of our plugins. However, if you are using a hybrid platform that doesn't support our plugins or your requirements disallow third-party plugins, follow the steps below to instrument your hybrid application.

Create a hybrid application via the Dynatrace web UI

Set up OneAgent and adjust its configuration

Insert the RUM JavaScript into your hybrid app's HTML files

For hybrid applications, the native app is monitored via OneAgent for Mobile, while the browser part is observed by the Dynatrace RUM JavaScript.

For hybrid apps, a user session is billed only once. See Digital Experience Monitoring (DEM units) for more details.

Also note that one "hybrid" session might be displayed as two separate sessions in the Dynatrace web UI: one session as a web session and another one as a mobile session.

Create a hybrid app in the Dynatrace UI

The first step is to create a hybrid application that consists of two parts:

Mobile application gets the monitoring data from the native part of a hybrid app. User actions and crashes from the mobile app are reported to this application.
Web application captures data from the browser part of a hybrid app. User actions from the web views are reported to this web application.

To create an application in the Dynatrace web UI

In the Dynatrace menu, go to Deploy Dynatrace.
Scroll down, and select Set up mobile monitoring.
Enter a name for your app, and select Create mobile app.
The app settings page opens.

From the app settings, go to Instrumentation wizard, and select Cordova.
Follow the steps described in the wizard. Do not forget to select Monitor the web view to create a web application.

If the app that you're instrumenting is not a Cordova app, skip the steps related to the Cordova plugin.

Set up OneAgent and adjust its configuration

Use OneAgent for Mobile to instrument the native part of your hybrid application. The mobile application that you've created in step 1 offers you instrumentation wizards for the native part of your application.

AndroidiOS

To auto-instrument your Android project, use the Dynatrace Android Gradle plugin.

After that, adjust the default configuration to allow OneAgent to pass cookies to the WebView and domains specified in your app's top-level build file.

Here is the example configuration for the easytravel.com domain:

gradle
dynatrace {
    configurations {
        sampleConfig {
            hybridWebView {
                enabled true
                domains '.easytravel.com'
            }
        }
    }
}

To monitor your iOS application, you need to instrument OneAgent for iOS.

After that, use the DTXHybridApplication, DTXSetCookiesForDomain, and DTXSetSecureCookiesForDomain configuration keys to allow OneAgent to pass cookies to WKWebView and domains specified in your app's Info.plist file.

Here is the example configuration for the easytravel.com domain:

xml
<key>DTXHybridApplication</key>
<true/>
<key>DTXSetCookiesForDomain</key>
<array>
    <string>.easytravel.com</string>
</array>
<key>DTXSetSecureCookiesForDomain</key>
<array>
    <string>.example.com</string>
</array>

Apple Pay does not work in WKWebView

When the DTXHybridApplication configuration key is set to true, Apple Pay does not work on webpages loaded in WKWebView.

To protect the security of transactions in WKWebView, Apple disallows the use of Apple Pay with script injection APIs, such as WKUserScript or evaluateJavaScript. Dynatrace uses evaluateJavascript to pass the correlation data from the native layer to WKWebView, and this process disables Apple Pay.

As a workaround, set the DTXHybridApplication configuration key to false to stop the injection of the script from OneAgent. However, this will also remove the correlation of mobile and web sessions for your hybrid app. Corresponding mobile and web sessions will not be merged, which leads to two billed sessions instead of one.

It is important to add the required domains to your top-level build file (Android) or Info.plist file (iOS) so that Dynatrace can identify mobile and web sessions within your app and merge these sessions into the same "hybrid" session.

Insert the RUM JavaScript into HTML sources

To capture user actions in the web-based part of your hybrid application, use the RUM JavaScript. You'll need to manually insert the JavaScript code or tag into your HTML sources. See Set up agentless Real User Monitoring for more information. Note that the RUM JavaScript is available in several formats.

After you add the RUM JavaScript to the HTML files, user actions from your hybrid app's web views are reported to the web application that you've created in step 1.

If you've already instrumented the web-based part of your hybrid app, then you don't need to manually add the RUM JavaScript to the HTML sources of your app.