Key Advantages of Using Mixpanel Analytics Tools

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.