Angular 2 has been released a few months ago and recent trends have been engaged with its OOPS relation. Now Ionic Framework version 2 documentation is updated with Angular 2 features for winning the race of cross platform app development.

One of my fellow developers asked me that how mixpanel is integrated with Ionic 2 in my previous blog. Hence, I got the motivation to write again about mixpanel integration but this time for the ionic v2. Previously, I said why mixpanel is important as analytics tools, but now I will tell about its integration with the app developed by ionic v2.

Before I start discussing how to integrate mixpanel, make sure you have created a project with ionic v2. Now follow these steps for integrating mixpanel. Well, cross platform app development with mixpanel is fun, and you will agree with me by the end of this post.

 

Step 1: Install Mixpanel Plugin in your project

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

ionic plugin add cordova-plugin-mixpanel

Step 2: Import and Initialize Mixpanel

Prior to mixpanel tracking, you should initialize an application with your mixpanel project token just like the way I have explained in Approach 1 of my previous blog.

But for using Mixpanel first, you should import the whole thing to app.component.ts in src/app/ directory as per OOPs concept.

After that shift it to platform .ready () function block in app.component.ts, write Mixpanel.init () function. Take a look at my implementation app.component.ts below.

 

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen, Mixpanel } from 'ionic-native'; //import Mixpanel as per OOPS  
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
      
      /**
      * Mixpanel Initialization
      **/
      var onSuccess = function (success) {
        console.log('Initiated', success);
      },
      onError = function (error) {
        console.log('Initialization Error', error);
      },
      mixpanelToken = ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’;  

      Mixpanel.init(mixpanelToken)
              .then(onSuccess)
              .catch(onError);

      /** End **/
    });
  }
}

 

 

Step 3: Test the track event, this is the tried and tested method.

Path:: src/pages/home/home.html

 

<div padding>
        <button block ion-button (click)="logMixpanelEvent($event)">Mixpanel Integrated in Ionic 2</button>
</div>

 

Path:: src/pages/home/home.ts

 

import { Component } from '@angular/core';
import { Mixpanel } from 'ionic-native'; // import Mixpanel as per OOPS  
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    
  }

  logMixpanelEvent(event) {
    console.log('Mixpanel Track Button Clicked');
    Mixpanel.track('Mixpanel Integrated in Ionic 2');
  }

}

Step 4: Build and Run the Application

Again go to the project directory in terminal and run the command shared below:

Install Node Modules dependencies

npm install

Build Latest Code

npm run build

Build in Android/iOS

ionic plugin add (add all required plugin ref: package.json)

ionic platform add andorid/ios

ionic build android/ios

 

Now, build and run your app. You can watch it in your Mixpanel segmentation or live view section.

 

 

For more details on event tracking, please click on this link JavaScript API Integration, mixpanel native plugin and follow the steps as instructed.

 

What’s Your Take?

Now the last blog gave rise to series of question in the mind of my readers and fellow developers when it came to cross platform app development with Mixpanel. Hope I am able to solve all their queries and have given what they were exactly looking for. 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.