Pendo supports the implementation of hybrid apps that work together with the Pendo SDK. Examples of hybrid apps include Cordova and Ionic. Hybrid apps contain both mobile and web components (e.g. WebViews) to load web pages inside an app.
Pendo supports these kinds of apps, such as Cordova and Ionic, by integrating the mobile SDK to collect analytics and show guides for the mobile parts, and also by integrating the web installation snippet to do the same for the web parts. For more information about installing the web snippet, see Developer's guide to implementing Pendo using the install script.
You can view both streams of analytics on your Pendo subscription, but they are split between the two different API keys and user journeys are treated as sequential but separate sessions.
Important: Despite the subscription being unified over the web and mobile applications, it is important to ensure Visitor IDs, Account IDs, and metadata keys and values are the same across installations to avoid incoherent user journeys.
Install Pendo in Cordova applications
Cordova is an open source framework for building hybrid mobile apps. Its web pages are served from a local web server running on the iOS or Android device. The app is in the web and opens a web view in the app. Pendo supports Cordova and Ionic apps via the web agent.
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 implementing Pendo using the install script.
Build 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.
- Add the browser platform to your Cordova application:
cordova platform add browser. - 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.
Tag 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.
Track 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);