Community Tip: Integrating Mixpanel with Cordova - Mixpanel
Blog Post

Community Tip: Integrating Mixpanel with Cordova

In this Community Tip, we will share a couple technical best practices for integrating Mixpanel’s JavaScript library into cross-platform apps built with Apache Cordova. While high level strategy for a Mixpanel implementation varies depending on your industry and business model, these best practices for Cordova along with a simple sample app will give developers a jumpstart on their implementations.

Host Mixpanel Locally

We pride ourselves on the ease with which our JavaScript library can be implemented on the web. Cordova, however, requires a little bit of custom configuration. First, it is necessary to host our library locally. Since version 2.1.0 of Cordova, all domains are whitelisted by default. This means you can load the JavaScript library from our CDN, but in the course of our testing, we found that hosting the library locally provides a much more stable experience. (N.B. Users of Cordova < 2.1 will need to whitelist Mixpanel.)

alttext

You can always find our most up to date JavaScript library on GitHub.

Following the example in the sample app, you can 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.

Mind the Queue

Tracking data on mobile devices presents unique challenges with regard to connectivity. Our native mobile SDKs for iOS and Android automatically queue events when a device is not connected to the internet. However, our JavaScript library does not. This means that 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. Note, it’s a best practice to limit the number of calls at 40 per batch to ensure all calls are successful (as in our iOS Library).

Need more help? Just ask!

By storing the Mixpanel library locally, and building your own queuing system to manage offline events, Mixpanel can be a powerful asset to any Cordova app. If you have any further questions or want further clarification, don’t hesitate to get in touch with us at support@mixpanel.com and speak with someone smart, quickly!

Get the latest from Mixpanel
This field is required.