Using mixpanel in sencha touch based application


Problem Statement

Measuring each and every action of the user and becoming proactive has become the need of the hour. There were times when you were considered good, if you pick phone call from your customer and assist them or resolve their query. However, the expectations have changed. The customer has multiple options and there is a cut-throat competition. Today, you need to be proactive and you need to understand your customer better.

This is where product like Mixpanel assists you. While page views related statistics remains relevant, Mixpanel enables you to measure user engagement (actions by the user) with your product / site. The engagement metric at user level enables you to achieve the items listed below (of course this list is not comprehensive):

  • Define funnel and measure progress including answering questions about the past using retroactive funnels
  • Drilling down to identify specific segment of customers (for example set of customers of specific area who has not purchased any product for over one month – key for Customer Retention! )
  • Make use of Cohorts to group the customers (subject) on certain criteria (e.g. date of joining) and analyze their behavior for same activity (e.g. change in site / product)
  • Send emails whenever certain criteria gets satisfied (For example if a user has not signed in for more than two weeks then send him an email saying that we are missing you)
  • Interact with the customer whenever they come to your mobile / desktop website (push notification) and meets certain criteria (for example – showing the customer the other related information like the % discounts / reward points earned)
  • View the customer’s activity feed, which in turn enables you to focus on any specific customer, which enables you to see where he is stuck
  • Finally, calculate customer’s lifetime value, which will enable you to formulate further strategy on acquiring / retaining customers

As part of this article, I would explain how you can get started with Mixpanel from your Sencha Touch based mobile website.

Pre-requisite

  • Mixpanel Sign-up
  • You have a working mobile website built using Sencha Touch (for example I have used WeatherApp, which has been explained in one of the previous blogs).

Scope

Of course Mixpanel is a fulfledged product and I would be covering minimal set of items which will enable you to get started with Mixpanel in your Sencha Touch / ExtJS based applications / sites. I have covered following points in this article

  • Steps to setup mixpanel
  • Tracking your events and using properties
  • Hiding the events data that you were tracking
  • Using calculations
  • Creating a funnel and measuring the progress
  • Viewing streams and user activity feed

How to do?

Steps to set up mixpanel

Step 1: Register on mixpanel

By clicking on the below link you can register and get on mixpanel:

https://mixpanel.com/people/register/#1

Step 2 : Install Mixpanel Library

Mixpanel, like google analytics and similar analytic engine, gives you a generated code which you need to insert into your Sencha Touch based website. They recommend you to put below code (you will get unique token value which you need to use) inside a script tag (type=”text/javascript”), just before the end of the header tag:

    (function (e, b) {
            if (!b.__SV) {
                var a, f, i, g;
                window.mixpanel = b;
                a = e.createElement("script");
                a.type = "text/javascript";
                a.async = !0;
                a.src = ("https:" === e.location.protocol ? "https:" : "http:") + '//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';
                f = e.getElementsByTagName("script")[0];
                f.parentNode.insertBefore(a, f);
                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 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.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
            }
        })(document, window.mixpanel || []);
    mixpanel.init("Your Project Specific Token");

Step 3: Identify your user and set properties

Since you are using mixpanel, most likely you want to track events at user level. So, identification becomes important. Mixpanel provides indentify method for that. Also, to understand your users better, you need to store few key information like email, name, created date, gender, etc.

For the sample application, I have modified app.js to have below launch function:

launch: function() {
		var randomNumber = Math.floor( ( Math.random() * 10 ) + 1 );
		mixpanel.identify( 'wtc' + randomNumber );
		mixpanel.people.set({ 
			"$name" : "wtc" + randomNumber,
			"$email": "wtc" + randomNumber + "@walkingtree.in",
			"$created": "2013-05-16 16:53:54",
			"$last_login": new Date(),
			"$phone" : "919848473539",
			"gender": randomNumber % 2 === 0 ? "Male" : "Female"
		} );		Ext.create('MyApp.view.WeatherView', { fullscreen : true } );
	}

While the logic related to gender and name / email are irrelevant, what you need to understand is that you need to put similar set of code in a desired area of your program (not necessarily inside launch method). With this in place, you are ready to start tracking your events.

Tracking your events and using properties

Using the “track” method of the mixpanel object, you can track your desired event. The track method has following parameters

  • Mandatory event_name
  • Optional properties (a json object)
  • Optional callback function

Refer to below link for exact parameter definition:

Following is the sample screen of my application:

SampleAppScreen

I have defined following events (which I will be using later in this article to define funnel and formula):

  • Inside launch function
    • mixpanel.track(“App Launched”);
  • Inside support button handler
    • mixpanel.track(“Support Link Clicked”);
  • Inside Favorites button handler
    • mixpanel.track(“Favorite”, { randomWeight : Math.floor( ( Math.random() * 100 ) + 1 ) } );
  • Inside Refresh button handler
    • mixpanel.track(“Refresh”);
  • Inside an ajax call when the call returns failure
    • mixpanel.track(“WOEID Calculation Failed”);

With the tracking code inside the application logic, you shall be able to see your events inside the mixpanel. For example if we want to see the trends of what the user is doing on your site and its comparison over a period then you may like to follow below steps:

  • Login into mixpanel
  • Click on your project name
  • Click on Trends tab underneath Activity menu

Following is the sample trends for the events captured by the sample program used by me:

EventsTrends

Refer to below link from mixpanel to understand how you can make use of trends report, book mark one or more snapshot and get them sent to your email based on desired frequence:

http://www.youtube.com/watch?v=ItjKom1X9Po

Note

For tracking links (track_links) and form submission (track_forms) the mixpanel have separate methods and I have not covered that in this article.

Hiding the events data that you were tracking

Many times you may have a need to hide the data from a given event to make sure that reports are not skewed. Mixpanel allows you to manage your data through “Data Management” interface. Following are the steps:

  • Click on “Update project settings” button on left bottom corner
  • Select “Data Management” tab
  • Select the event that you want to hide and
  • click on the hide button

When I hide the “WOEID Calculation Failed” event, it shows following events data:

EventsDataHidden

Using calculations

Often you will have a need to come up with certain custom calculation, specifically ratios. For example – if your product is relying on virality then you would like to calculate virality coefficient based on invitation and registration related data. Mixpanel provides you an interface to define formula on your event data. For example, in the below screenshot, I am defining a ratio called “Favorite vs Launched” ratio to know how often people taps on favorite button:

favoritevslaunched

After saving the formula, you can see the calculated ratio as shown in below screenshot:

RatioLineChart

which is completely as per the data captured for the events used in the calculation, as shown below:

EventData

Creating a funnel and measuring the progress

Funnel is a standard way of measuring user journey – specifically from the perspective of what you want the user to eventually do with your product and see where they abandon their journey. Mixpanel comes up with nice interface which allows you to define funnels using the events data captured by your application.

CreateFunnel

After saving the funnel you shall be able to view the funnel report as shown in below screenshot:

FunnelReport

Viewing streams and user activity feed

Finally, you would like to see the user activity stream and see what any specific user is doing on your site. Mixpanel allows you to do both (as shown in below screen):

UserFeed

Summary

In this article I have explained how to setup mixpanel, identify user, track user events and build reports / funnels on top of the captured events. I hope by going through this article you are able to get started with mixpanel in your mobile website built using Sencha Touch. Of course mixpanel provides much more powerful analytics than what I have demonstrated in this article. You may like to go through some of the mixpanel’s articles / videos to know more about their offering.

At Walking Tree we practice and recommend Sencha Products like ExtJS and Sencha Touch to build amazing web / touch apps. In case you are looking for training or professional assistance, contact us by visiting our website.

References

Related Articles

Alok is co-founder of Walking Tree, a company which acts as a product engineering team of the customers across the globe and delivers end-to-end products / solutions to ensure "Great Experience". Walking Tree provides Design, Development, QA, Maintenance and Support, Consulting, Training and Skill Augmentation services around Ext JS, Sencha Touch, Angular JS, Xamarin, Native Android, Native iOS, MongoDB, Cassandra, Hadoop, Pentaho, etc. | Twitter

Tagged with: , ,
Posted in Sencha Touch

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: