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

    Mixpanel focuses on letting you measure what customers do in your app.
    Funnels can help answer questions like:

    • “Where do users drop-off in the purchase process?”
    • “What percentage of invited customers sign-up?”
    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 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?”
    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 –

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

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


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

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

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()

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 :

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.

Goutam Singha

Goutam Singha is working on Website Development with CMS framework WordPress in Innofied Solution Pvt. Ltd. and side by side he looks after Web App Development with Angular JS (1&2), Cross Platform Mobile App Development with Ionic Framework (1&2). He is a die hard tech enthusiast and loves to accept the challenge in the development and makes a feasible solution with his intuitive mind. He is also a quick learner and analyzer. He spends his time reading blogs and explores new technologies. He is an expertise in the realm of the front end development as well as website development.

  • Why would I go with approach 2? I tried approach 1 but it’s not working. Not sure why. I added Mixpanel locally and my project token. Then called track from a template.

    mixpanel.track(“Viewed home”);

    Thanks for the article!

  • Why would I go with approach 2?

  • Dipesh Parmar

    Dear Goutam

    I have tried with the first approach you have given but unfortunately that did not work for me.

    Can you please let me know what else should i take care of ?

    My aim is to get push and in app notification to work using Cordova in both iOS and Android.

    I have set all data like GCM API, PUSH Certification etc.


    • Goutam Singha

      For achieving your aim, you should go with my second approach to get push notification in your app. In my next blog, I will be explaining push notification integration with Mixpanel. I hope my coming blog will clear your doubts. You will be notified once my blog is posted.

      • Dipesh Parmar

        Yes i have tried with the second approach when i loose hope from first one, but i think that Cordova plugin needs latest version of Cordova-ios which breaks my older plugins. So is there any work around?

        • Goutam Singha

          Please let me know the exact issue and how did you know that this plugin needs the latest version of cordova-ios?

          • Dipesh Parmar

            I did tried installing that and i got error like ” To install this plugin you might need to consider updating cordova-ios@4.0.0 ” And plugin was not installed. I double checked this part.

            Let me know if i am making mistake or i need to use downgrade version of plugin.

            Can you please provide me your skype or contact number so i can reach you ? You have my email right? Please do share your details there.

            Thank You

          • Goutam Singha

            Please remove the iOS platform and try adding it again.
            ionic platform remove ios
            ionic platform add ios@4.1.0

            Let me know, if that works for you.

          • Dipesh Parmar

            well actually i did that but as i mentioned it breaks my older plugin as they are not compatible with newer version. So i cant take risk to upgrade those as well.

          • Goutam Singha

            For solving this issue, you can apply recursive strategy

            Step 1: First, you backup all plugin in somewhere.

            Step 2: After that see which plugin did not compatible with that cordova-version and go to that plugin’s github link and see which new changes are commited with that cordova-version. If new changes are there, please change your code according to new version of that plugin. After that remove that plugin and adding again in cli. Then again remove platform and add platform.

            Step 3: if still it did not work, apply step 2 again.

            Hope it helps to sort out your problems and let me know what happens.

          • Dipesh Parmar

            i cant take such risk as we already spent tons of time in solving Android issues. Because we also made some native call plugins which are developed by on our own.

  • Pingback: Mixpanel Push Notification Integration with Ionic Innofied()

  • De

    Hi where is your ionic article… please add that again… i had to use cordova-mixpanel-plugin (stable branch) . But it doesn’t get push notification…

  • Aakash Desai

    Question – Will this work if I push the app onto ionic View?

    • Goutam Singha

      Please explain your question in details.

  • murali

    How to added the mixpanel in ionic 2

    • Goutam Singha

      Very Interesting Question. I will write the another blog for adding mixpanel in ionic 2. Stay tuned. If you need it urgent, then give your mail id for get update on this immediately. 🙂

    • Goutam Singha

      Here is my latest blog for mixpanel integration with ionic 2 —