Top
Mixpanel

Mixpanel JS Library Integration with Ionic

Mixpanel is an extremely powerful analytics tool for mobile and web. If you want to do deep analysis, generate real-time data, funnel analysis, and be able to do things like cohort analysis (retention) then you should strongly consider Mixpanel. The toolset comes with in-app A/B tests and user survey forms. But around 2013, Mixpanel claimed to track around 48 billion actions per month from their users.

Key Advantages of Using Mixpanel Analytics Tools

  • ACTIONS SPEAK LOUDER THAN PAGE VIEWS
    Mixpanel focuses on letting you measure what customers do in your app.
  • FUNNELS
    Funnels can help answer questions like:

    • “Where do users drop-off in the purchase process?”
    • “What percentage of invited customers sign-up?”
  • SEGMENTATION
    Some of the example questions Segmetation:

    • “How many male visitors who search for flights end up booking a hotel room instead, that maybe 3 stars or better?”
    • “Which of our Google Adwords keywords generates – the most paying users who login every day, leave product reviews, or share our app to at least 2 others.”
    • “What is unique about users who take the time to leave reviews?”
    • How many of our customers who click on the “chat with sales” button on our site, end up upgrading?
  • RETENTION
    Retention can help answer questions like:

    • “How many users login 4 weeks after registering?”
    • “How does a new design affect customer activity?”
    • “How do flash-sales affect long-term user retention?”
  • NOTIFICATIONS
    Using the Mixpanel, a marketing department can send a message based on what customers are doing in an app. Because notifications are sent through Mixpanel, the success of a marketing campaign can be measured in any Mixpanel report.

Mixpanel can be integrated into a cross-platform mobile application with Ionic Framework. There are two ways to integrate Mixpanel Javascript Library in an app with the ionic framework.

  1. Mixpanel Javascript Library Integration from Mixpanel Website
  2. Add Cordova Plugin that wraps Mixpanel sdk for Android and iOS to app with ionic framework

Note: The Mixpanel JS Library was built for web, rather than a mobile app. So you can get all features of web in this integration. But  in second integration, you can get extra features like push notification, sms etc.

In this blog,  I am going to demonstrate the two ways to integrate mixpanel javascript library in your app with Ionic Framework step by step.

You need to follow the steps shared below to set up mixpanel in your code.

Approach 1 : Mixpanel Javascript Library Integration from Mixpanel Website

 

Step 1: To Sign Up Visit Mixpanel Website

Before integrating mixpanel javascript library, you should sign up with the following link – https://mixpanel.com/register

Step 2: Create a New Project

After you complete  the signup process, you can proceed further.  The username is your email id, so preserve it. The project token is automatically created under the tab “My New Project” in your profile. If you want to create a new project, then the generated project token for new project will differ from default created project “My New Project”

Create Project

Create Project

Generated Project Token for New Project will differ default created Project

Generated Project Token for New Project will differ from default created project “My New Project”

Step 3: Select the Project

Select project from the drop down menu in the left of the website and click on “SETUP NOW” button.

Step 4: Copy mixpanel js library from “Install our library”

Here only copy code snippet from highlight portion and proceed into the next step.

Copy JS Snippet

Mixpanel JS Code Snippet

Step 5: Paste this snippet just before the “>/head<” tag of your  index.html in www folder

  <!-- start Mixpanel -->
  <script type="text/javascript">
  (function(e, b) {
    if (!b.__SV) {
      var a, f, 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 time_event 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.union 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 = e.createElement("script");
      a.type = "text/javascript";
      a.async = !0;
      a.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === e.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^///) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";
      f = e.getElementsByTagName("script")[0];
      f.parentNode.insertBefore(a, f)
    }
  })(document, window.mixpanel || []);
  mixpanel.init("9640f3c9cbc178003e627926979e68a5"); //mixpanel initialization with your mixpanel project token
  </script>
  <!-- end Mixpanel -->

Note: Mixpanel JavaScript Library should be initialized with mixpanel project token

To get the mixpanel project token, please follow this steps at your mixpanel account:

Account -> Projects-> Token

or

You can find your project token in the settings dialog at your mixpanel account.

Now you can add mixpanel custom tracking into your code as per your requirement to track the event of your choice, by simply calling mixpanel.track with the event name and properties.

Step 6: Build and Run App

Now, build and run your app and after that, see in segmentation or live view section of your mixpanel account.

 

Approach 2: Add Cordova Plugin that wraps Mixpanel sdk for android and ios to app with ionic framework

 

Step 1:  Add Mixpanel Cordova Plugin in your app

Go to your project directory in terminal and run the following command

cordova plugin add cordova-plugin-mixpanel

Step 2: Initialize Mixpanel JS library with your mixpanel project token

Before mixpanel tracking, mixpanel js library should be initialized with your mixpanel project token as I have explained in Approach 1 (Note)

So, to run blocks in app.js, write mixpanel.init() function. Take a look my implementation app.js

angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    mixpanel.init(“<mixpanel-project-token>”);
    ...
  });
})

Step 3: Test app with mixpanel.track()

For testing, you can check mixpanel library whether it works or not. For this, you need to write following simple code after mixpanel.init()

mixpanel.track(“Device is ready to be tracked”);

Step 4: Build and Run your App

Now, build and run your app and after that, see in segmentation or live view section of your mixpanel account.

For more details on event tracking, please click on this  link : https://mixpanel.com/help/reference/javascript

This is it. Hope it helps. Feel free to comment if you face any problem while integrating Mixpanel. Any suggestion for improvement will be appreciated.

Swarnendu De

Swarnendu is the Co-founder and Lead architect at Innofied. For the last seven years, he has been working with numerous JavaScript technologies including Backbone.js, Node.js, ExtJS, Sencha, and so on, and has developed more than 50 complex JavaScript-based applications thus far. He is the author of the book Backbone.js Patterns and Best Practices. Swarnendu regularly writes at his personal blog, Innofied Blog, the Tuts+ network, and provides support and assistance for JavaScript, Sencha and much more around the web. You can reach him through his website at http://www.swarnendude.com or via Twitter at @swarnendude

Ready to talk to us? We’d love to hear you.

Note: We'll provide a fully signed NDA for your Project's confidentiality.

[name='tags']
[name='tags']
[type='submit']
[type='submit']
[name='name']
[name='name']
[name=request-a-demo-form]
[name=request-a-demo-form]
[name='email']
[name='email']
[name='tag_free']
[name='tag_free']