Install Pendo in Cordova applications

This article provides guidance for when you are installing Pendo in Cordova applications. 

Typically, Cordova applications are built around a central web application. If you want to install Pendo in a Cordova application, there are a few caveats to consider. 

For more information about installing Pendo, see the Developer’s guide to installing Pendo.

Building to browser

As with most applications, Pendo is installed using a JavaScript snippet. Consequently, Cordova applications must be accessible in a web browser so that you can tag Pages and Features and build in-app guides with the Visual Design Studio.  

You can do this using the browser platform provided by Cordova CLI. 

1. Add the browser platform to your Cordova application: cordova platform add browser.
2. Build your web application for the browser platform: cordova build browser.

This results in a static build of your web application created at /<path-to-application>/platforms/browser/www. You must then host this build in a location that’s accessible to the Pendo users who build guides or tag Pages and Features.

Tagging Pages

Since Cordova applications can be built for several different platforms, Page rules must account for all intended platforms. For example, the following shows the Suggested Pages for a sample Cordova application.

In this example, two suggested Pages both point to the same page (index.html). This is because the browser and iOS platforms that this application is running on serve the same Page at different URLs. 

To account for scenarios like this, manually add any additional platform URLs after following the standard procedure for tagging the browser platform page. Go to the tagged Page in Pendo and select Add Rule. For more detailed instructions, see Viewing and tagging Pages. 

In the example, below, //*/index.html captures the browser platform URL, and //*/*/*/*/*/*/*/*/*/index.html captures the iOS platform URL.

Tracking native device functionality

Since Pendo is installed in the web application layer of a Cordova application, no activity is captured in the native portion of applications. 

For example, if your Cordova application with Pendo installed contains a button that launches the camera application native to the device, Pendo only captures clicks on that button and not anything that happens inside the camera application.

If you require visibility into native device functionality, Track Events can be instrumented as appropriate in the callback functions provided by the Cordova API functions. Below is an example of instrumenting Track Events on failure to capture a photo.

// EXAMPLE CODE PROVIDED AS IS WITH NO WARRANTY OR SLA


function cameraSuccess() {
  // Code to execute on successful photo
}
function cameraFailure() {
  // Code to execute on failed photo

  // Send camera-error track event to Pendo to track camera failures
  pendo.track("camera-error", {
    model: device.model,
    platform: device.platform,
    version: device.version,
  });
}
navigator.camera.getPicture(cameraSuccess, cameraFailure);