The solution to get mixpanel-js to work in your cordova app

javascript, growthhacking, mixpanel, cordova, analytics, app, mobile

By Cyprien ,

I updated mixpanel-js to support localStorage and proper cordova support. This code is available on my fork and I submitted a pull request. It's likely to be merged soon. Let's discover together why and how mixpanel-js is a better approach than an additional plugin.

Current state

So, what is available to us today?

Cordova plugins

Mixpanel has native SDKs for iOS and Android. They do not have one for Windows Phone, but thanks to our friends at Deezer there is a pretty complete one available.

Since there are native SDKs there must be some kind of cordova plugin, no? Yes there are :

  • cordova-mixpanel: This one looks pretty feature complete but lacks android (and windows phone) support. Actually, they are looking for contributors to do it! So if you feel in the mood, feel free to contribute.
  • cordova-mixpanel-plugin: This is much more cross platform since it already has both android and ios SDK. Great, but it still lacks Windows Phone support. In addition, it's not feature complete since basic thing like people operations and alias are not yet available.

I don't think my solution relies there. In addition, our app already has way too much plugins and each cordova plugin being a matter of Mo., I feel like we are going to be obese really fast following that path.

Mixpanel-js

I'm building a cordova app, which means I'm building it with Html/Css and Javascript. I should prefer a js client don't you think? And Mixpanel do have a js SDK.

It is small (<50ko) and supported by mixpanel itself. Great! But... there is a but. Actually there are two but(t)s.

  • mixpanel-js relies on cookies, which don't play nice with cordova
  • mixpanel-js does not support offline scenarios

Cry baby !

Let's kick some but(t)s

Basically, there is no nice solution today, but mixpanel-js is on github, so we can go where we want with that lib. localStorage definitely provides an alternative to cookie and can also be used to build an offline event store.

So one of the first thing I did was to contact mixpanel-js on github to know if they have plans for such features and if they would accept contributions. And I must say I was surprised that my idea was so warmly welcomed. When you read this you might think "You're stupid, you offer free work, that's obvious they will accept it". Yes but no! I'm facing a similar issue with another service provider and I must say they made me feel like Don Quixote. In addition, they'll have to maintain this so if they don't find value in it, they won't accept it. But they did and I'm very happy with that.

Current state and what's next

I opened a pull request a few days ago, which brings localStorage as an alternative to cookie.

Offline support is not yet added. But I plan to work on it soon and I will update this post when a pull request will be available.

Update (May 05 2015): Mixpanel has tested and improved my initial pull request which is now available in there repository.

How to

The setup is preatty easy:

  • Download mixpanel.js from my fork
  • Add it to your app
  • Copy the snippet and add it to your index.html header
<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="vendors/js/mixpanel/mixpanel.js";e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(a,e)}})(document,window.mixpanel||[]);
</script>
  • Don't forget to update the src path in your snippet so it points to the place where you put your mixpanel.js file.
  • Initialize Mixpanel with localStorage option:
    ~~
mixpanel.init('YOUR_MIXPANEL_TOKEN', {storage: 'localStorage'});

~~
Update (May 12 2015)

mixpanel.init('YOUR_MIXPANEL_TOKEN', {persistence: 'localStorage'});

And you're all set, you can start tracking events:

mixpanel.track("I support LocalStorage");

Let's wrap it up

I really like the open source approach and current mindset of mixpanel. You can start using mixpanel-js in your cordova apps today and offline support will come soon. I'll keep this post updated. Meanwhile, I would be very happy to hear your feedbacks or suggestions.