Using KISSmetrics in sencha touch based mobile website


Sencha Touch with KISSmetrics

Problem Statement

Google Analytics is widely accepted tool for analyzing the visitor’s behavior on a website. However, there are few things where it lacks due to unavailability of features and their policy of not capturing user specific data. Some of the business need where google analytics is falling behind are:

  • It is not able to distinguish the information at the user level
  • Further, if the same user is logging in from different browsers and different machines / devices then they consider them as different (hence unique) visitor. Which may lead you to believe that you are getting more unique visitors, while the fact could be otherwise (may be you have 3-5 times less unique visitors than what GA shows)
  • Add to that the need for keeping track of the anonymous user (who has not yet signed-up with your website) and later linking them with their user detail (when they sign-up) and GA doesn’t even seem to be attempting to solve that problem yet

This is where Kissmetrics fits in really nicely. While Google Analytics and KISSmetrics both use first party cookies and similar logic to determine the number of unique visitors to your site, and how many times they start a browsing session. The KissMetrics goes beyond “What Happened” and they tell you “Who did it”. With this information in place, the users of Sencha Touch / ExtJS based applications will be able to understand their customer (very easily).

As part of this article, I will be explaining how to setup KissMetrics and use them in a mobile website. Following two screens will be used for the demonstration purpose:

Weather App

Weather App

Prerequisites

  • 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).
  • You have signed-up with KISSMetrics

How to do?

Setup

Go to Settings and create new site (follow the getting started steps on kissmetrics):

Create New Site

Create New Site

You can decide to get a teaser or start setting up straight away. In this article I have provided the steps that you go through in case you decide to choose “Start Setup”.

Step 1 : Answer to questionnaire

Questionnaire

Step 2 : Add events

Events

Step 3 : Integrate Code

You can integrate the code yourself or ask for professional help. In this case I have selected “My developer will integrate the code”:
Integrate Code
Add following Kissmetrics javascript (similar to GA script) into your code (I have added this in app.html):
KMCode
Identify your users
For the sake of ease – I have used random number to define user as wtc1, wtc2, etc. We will use them for identification purpose. Following is the sample identification code:

IdentifyUser

Of course you may like to use the identify call whenever you have the appropriate identification information available to you. In addition, you may like to refer to KM’s best practices regarding how to use identify for multi-page sites.

As part of this article, I have just used identify method, while KM also provide other methods, which provides you further tracking capability:

KMMethods

Track your event

Now that you have put KISSMetrics code into your mobile website, you need to setup events that you want to track. Here I am tracking click event on the Favorites button

NewEvent

Note that KM expect you to mention either the class name or the id name. I have used id as “Favorites” as shown in below code

{
	xtype: 'button',
	iconCls: 'favorites',
	iconMask: true,
	text: 'Favorites',
	id : 'Favorites',
	handler : function () {
		Ext.Msg.alert('Favorite', 'It is good to be favorite of ' + getUserName(), Ext.emptyFn);
	}
}

In case you are not sure about how to find id (in case you are a pure business user), you may find it easier to inspect the button element and see the id that is being used, as shown in below image:
InspectElement

Overall I have created 3 events and the event library looks as shown below:

ThreeEvents

Now that you have setup KISSMetrics and configured few events as well let’s look at some live action before we jump onto reports and metrics.

Live Action

Following screen shows the real time events that you have decided to track:

RealTimeEvents

Here we are able to see the real time events by different users. Further, if I am interested in any specific user then by clicking on that user’s name I can keep track of that particular user (as shown below):

UserEvent

Viewing Reports

By going to the reports tab of KISSMetrics, you can view the default reports (as shown in below image).

Reports

Below is a sample event summary report
EventSummary
KM of course allows you to create new funnel and cohort report.

Configuring metrics

KM provides following broad category of metrics that you can define:

Metrics

You can click on one of the above predefined or click on “Add new metric” to introduce your own custom metric. For this article, I have selected “Avg Time to Conversion”. Basically, it calculates the average amount of time between two configured events for a given time range. Here I am calculating the average time between Refresh event and Favorites event.

AvgTimeToConversion

In case you do have a need for introducing an additional metrics (which is not predefined) then you can click on “Add new metric” and select one of the metric type below:

NewMetrics

I have selected “Average Number of Times Event Happened Per Person”. Click on “Continue with this metrics” and after configuring the required event, save your metrics.

SaveNewMetric

Review the metrics dashboard and check your new metrics:

ReviewMetrics

Viewing metrics

By clicking on the Metrics tab, you can view the metrics summary. And, by clicking on specific metrics you can see the related details. Following screenshot shows the “Over time comparison”

ComparisonReport

Summary

As part of this article you were introduced to KISSMetrics and its capability to complement Google Analytics. I have explained how to set up KM, setup event to be captured and metrics that you want to track. We have also seen that if you are not happy with predefined metrics then you can very well create your own. I hope you found this article helpful and you will be able to make use of KISSMetrics in Sencha Touch based mobile website. KM has huge set of documents and active support team to further enable you to use their product without any hiccups.

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.

Reference

Tagged with: , , , , ,
Posted in Sencha Touch
One comment on “Using KISSmetrics in sencha touch based mobile website
  1. manojparida says:

    Fabulous feature 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: