Using google analytics in Sencha Touch based mobile website


Google Analytics with Sencha Touch

Problem Statement

For mobile website or mobile App, Sencha Touch is becoming the platform of choice and day-by-day it is achieving the “De Facto” status to take an obvious lead. Also, since more and more business are making their services available through mobile / tablets, the need of being able to analyze its usage has increased more than ever.
In case a business has published mobile website for its end user, the google analytics provide huge set of statistics which is greatly helpful. Following is the list of some of the commonly desired statistics provided by GA:

  • Demographics based statistics which provides you visits details based on language, region, city, state, country and continent
  • Behavioral statistics like “New Vs Returning” visitors, Frequency & Recency, User engagement “visit duration” and “page depth”
  • Technological statistics like  “Operating System”, “Screen Resolution”, “Screen Colors”, “Service Provider”, “Hostname”, etc
  • The mobile / desktop devices and their information like “Mobile Device Info”, “Device Branding”, “Service Provider”, “Input Selector”, “Operating System”, “Screen Resolution”
  • Traffic Source – direct / indirect, referral details, campaign information, keywords used for reaching the content, SEO tracking, advertisement tracking, tracking of social statistics like – social impacts, conversions, referral sources, on-site user engagement, social data hub statistics, and measuring social value
  • Content level statistics like page visits statistics for specific page, page load time (on different browsers and from different locations),  user timing statistics, content search statistics (including refinements and search depth) across different search category, search terms used, site usage, in-page analytics of goas, etc.
  • Defining and tracking goals for specific page / event and tracking of conversion time and path
  • Get ecommerce data including revenue, product sales, quantity and more when you configure Google Analytics to provide ecommerce reporting.
  • Multi-channel funnels show you which marketing efforts contributed to driving visitors
  • Real-time analytics gives you a glimpse of certain real time data
  • Ability to create custom report and dashboard is added advantage

While the intention is not to just list down the important capability of google analytics, as a business user, you will be excited to know how much you can gain by asking your developer to include an insignificant piece of effort into the project work to provide you a huge set of values. Similarly, as a developer you can be generous with your customer and provide him a lot of values (which any ways exist – after a small effort from you). Here is one of the sample dashboard image which shall act as a further teaser for the business as well as the developers:
GA_Overview
As part of this article, I will show how you can configure google analytics inside your mobile website to be able to avail the great analytics provided by Google Analytic engine.

Pre-requisite

Registering your mobile website with Google Analytics (GA):
Before you get started with tracking, you must register with GA and obtain an API key. Following page allows you to create a new account for google analytics:

New Account

New Account

The GA will provide a code similar to below code, which you shall be able to access to put this inside your html code (app.html):

// <![CDATA[
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', <<Your Key>>']);
	_gaq.push(['_trackPageview']);

	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
// ]]>

You must visit “Tracking Info” tab in the Admin section  to get the required javascript code:

Tracking Info

Tracking Info

Understanding of my previous blog:
https://wtcindia.wordpress.com/2013/02/08/using-yahoo-weather-api-in-sencha-touch/

How do we do?

(Assumption is that you are using the most popular framework, Sencha Touch, to build your mobile website)
To keep things in perspective, I have just extended my previous example on Weather App (another mobile website).
You need to add  GA specific code into app.html, following is the sample app.html file after this change:

GA Code

GA Code

In case your mobile website has certain server side code (i.e. instead of app.html you are accessing it through index.php) then you need to put above code in corresponding file. Once you are done with above settings, you are all set to enjoy the analytic capability of GA. Following is one of the sample analytics which you may be often interested in:

Audience

Audience

Summary

Google Analytics not only lets you measure sales and conversions, but also gives you fresh insights into how visitors use your site, how they arrived on your site, and how you can keep them coming back. In this article we saw that by including the few lines of code (that too generated by GA itself), you are able to access tremendous amount of statistics for your mobile website. While I have listed very limited functionalities being offered by google, it is imperative to go through their feature documents. This article is one of the list of articles that we will be writing on website data analytics.
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
4 comments on “Using google analytics in Sencha Touch based mobile website
  1. Nate Balcom says:

    Just curious. I’ve only used Google Analytics for following web properties. This would be for tracking an application running on EXTJS. It was just nice to see this is an option. I’ll be finding out soon enough how well or how poorly the results are.

  2. Nate Balcom says:

    Excellent I was just looking for something like this. How is the tracking working out for you? That is how reliable is it? I just started working with EXTJS and was asked if there was some way to do this. Looks like this is a step in the right direction. Thanks.

    • Alok Ranjan says:

      Tracking works reasonably well. GA gives you a good insight and that too free of cost. If this doesn’t meet your need then you may like to check mixpanel / kissmetrics.

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: