Top

Mixpanel Push Notification Integration with Ionic

 

Push notification is one of the feature of smartphone that makes it more smart. A service that constantly feed us with information from variety of apps. From Facebook Mentions to Instagram tags, from email to system notifications -the daily dose of information is designed to keep us updated and increase productivity.

And when developers asked to give their take on push notifications they start looking for the best integrators. Mixpanel is one such, which developers use for push notification integration.

In previous blog, I have explained Mixpanel Library Integration with Ionic, So I assumed to set up my second approach of Mixpanel Library Integration for Push Notification.

Note:- To provide some background on how push notifications work in Mixpanel, push notifications are sent based on a user’s device token. This token is specific to a user’s device and app instance and required by Apple/Google to deliver a push notification. Without this token, you will not be able to send a push

For Push Notification service, you should follow the below steps carefully –

Step 1: Add phonegap-plugin-push in your app

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

Note:- SENDER_ID: Google Sender ID (12 digit number which project number of newly created project in Google Developer Console)

Step 2: Initialize the phonegap-plugin-push and register to receive device token or Push ID from GCM and APNS based on Android and iOS devices

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

Step 3: Update Android GCM API Key and Apple Push Certificate to Mixpanel

 

For mixpanel, here is Apple’s guidemixpanel-notifications-key-set-up for creating a Universal Push Notification Client SSL Certificate that will work for development and production:

https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/

Before proceed to Step 4, Please keep in mind that we need a people profile with the associated device token in order to send a push notification. This requires calling identify to identify a specific user and then setting a people property for the device token.

If you create a people profile and set the appropriate devices property with the user’s device token, then we will be able to send a push notification to their device.

Step 4: Create a people profile and set the appropriate device property while registration of the user in app

Step 5: Build and Run your App

If you start from scratch, then you just need to add platform, otherwise, first you remove platform and then add platform. Now, build your app and after that, install the app in your device by following process –

  1. Remove the old build from your iphone/Android
  2. Install the latest build in your device
  3. While you will do install app will ask for permission for push notification. Please allow this (iPhone)
  4. Login with your registered email. Then wait for a while before go to the next step; sometimes Mixpanel takes the time to update the device info.

Step 6: Send Push Notification based on user activity

Send Push Notification by following process –

  1.  Check Mixpanel > Explore section that, your account details section, you are logged in or not. Just to confirm before go into next step to test push notification.
  2. Send push notification from Mixpanel for testing account.

This is it. Hope it helps. Feel free to comment if you face any problem while integrating Push Notification Service with 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.

  • I managed to get a registration id with the help of your tutorial, I saw it in the Mixpanel’s People Explore board, but I didn’t receive any push notification when trying to send it. I am using an Ionic app, running on iOS. What might have possibly gone wrong?

  • I’ve fixed it by myself, but anyway, thank you for the good tutorial.

    • Amos Megidish

      what did you do to make it work?

  • Amos Megidish

    i am using ionic app => i can see the user in the mixpanel bat canot recive push’
    // project token number (12 digit) is mixpanel project token, yes?

    • Amos Megidish

      it is like mixpanel not connected to firebase