Cordova: Integration

Use this guide to integrate Mixpanel’s JavaScript library into cross-platform apps that are built with Apache Cordova. 

If you would like to employ the help of a third-party Cordova plugin, see the Cordova-Mixpanel plugin.  

Host Mixpanel Locally

It is necessary to host Mixpanel's library locally. Since version 2.1.0 of Cordova, all domains are whitelisted by default.

As a result, you can load the JavaScript library from Mixpanel's CDN, but host the library locally provides a much more stable experience. For Mixpanel's most up to date JavaScript library, see GitHub.

Load the Mixpanel library from your local device with the following code:

<!-- start Mixpanel -->
<script type="text/javascript">(function(f,b){if(!b.__SV){var a,e,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=f.createElement("script");a.type="text/javascript";a.async=!0;a.src="js/mixpanel.min.js";e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(a,e)}})(document,window.mixpanel||[]);
mixpanel.init("MYTOKEN");</script>
<!-- end Mixpanel -->

Note the only difference between the snippet above and the typical minified snippet is the file location for the Mixpanel library.

Setting Up Push Notifications

All notifications that work for JavaScript library will work as expected in Cordova. In-apps will have no problem with Cordova - you just need to target and identify your users within the app. You should also be able to get push functionality, albeit with some caveats.

Mixpanel's methods for initializing push notifications are specific to our mobile SDK's, and will grab the device token and append it to the list properties $ios_device()or $android_device.

To replicate this logic either grab and set these properties from your backend, or include client-side logic to add this property through a mixpanel.people.append() call. Without the device tokens appended as a list property, Mixpanel won't be able to target users for push notifications.

Once you have the device tokens correctly uploaded, you'll need to generate your iOS push cert and GCM API key.

At this point you should be able to send out iOS push notifications from your Mixpanel Notifications dashboard. Android may be a little more complicated, as Mixpanel's Webapp generates pushes with JSON keys that are specific to the Mixpanel GCM receiver.

Mind the Queue

Tracking data on mobile devices presents unique challenges with regard to connectivity.

Mixpanel's native mobile SDKs for iOS and Android automatically queue events when a device is not connected to the internet. However, Mixpanel's JavaScript library does not.

As a result, it is important that you build your own queueing system to store events that are triggered by users when they are not connected to the internet.

When a device reconnects, send events to Mixpanel in batches. Fortunately, Cordova has a variety of methods for storing data locally.

In the event that the connection to Mixpanel fails to be established, API calls made from Mixpanel's Javascript library will be dropped.

With this in mind, the custom queuing functionality that you'd need to set-up on your end should account for when an end-user does not have an active connection on the phone.  

So events intended to be sent when the device does not have connection should be added to a local queue to be sent in the future.  

Your queuing system should periodically check to see if a connection is established, before emptying the queue if and when there is a connection.

In regards to the time associated with these queued events, you will want to make sure you are time-stamping them correctly as you queue them. If they arrive at Mixpanel's /track API endpoints out of order, they will be stored under the correct time.  

Note that it is best practice to limit the number of calls at 40 per batch to ensure all calls are successful (as in Mixpanel's iOS Library).