Supporting tools for your Sencha Touch based mobile websites


Problem Statement

Whenever we think of designing and developing mobile website, we often think of ensuring following:

  • Follow standard conventions (native experience) specific to different devices
  • Keep things simple
  • Meet most of the expectations of the major segment (core users) of the users
  • Consider dominant reading pattern while finalizing layout
  • Keep the designs / icons consistent and don’t change their meaning
  • Ensure clear navigation with backbutton / home / menu support wherever suitable
  • Ensure fast response
  • Save battery life, be miser with thumbnail size, etc.
  • etc.

While the above guidelines do enable you to create a nice app and get the user do what you want them to do. What you don’t know is if you have really understood what the end customer wants to do? If you want to understand them better then how can you achieve the same? And, this is where the mobile analytics will be helpful. With mobile analytics in place, you will be able to do following:

  • Segmentation across generic stuff like locations, devices, browsers, etc
  • Segmentation across specific information like gender, customer type, product type, age group, business partner, social profile data, etc
  • Defining cohorts, funnels, etc and measuring user journey towards desired result; specifically calculating conversion rates
  • Define and view various kind of reports on top of the user level events data
  • View the trace at the user level and take appropriate proactive action (for example – sending an email to a user who has not signed-in for more than week, or informing a user about the earned discounts, etc) to improve the overall engagement
  • Calculating the customer cost, retention, lifetime revenue and overall revenue
  • Understand how the advertisements are doing
  • Etc.

Well, of course above list has “Etc” in the end. Moreover there are various companies providing similar analytics (possibly with certain variation) and that further makes things overwhelming for the business user.

In addition, as a business you need to enable your customer to be able to talk to you (online / offline) or your representative from wherever they are in the app or at least from the screens where you would expect them to be able to reach you with ease. Sometimes you may like to send specific message to a segment of customer to improve your retention / customer engagement. This is where you need to either build or use certain existing communication solutions.

Finally, you would like to be proactive in identifying the failure points, performance issues, exceptions, etc. and take proactive action. This is where you need tools which enables you to monitor and maintain your application in better ways.

In this article I am going to list out some of the example tools that you can make use of to meet your mobile analytics need and achieve higher level of customer engagement / satisfaction. Also, I will be focussing on how you can switch between tools with similar capability without actually changing your application code.

Pre-requisites

  • Basic understanding of Sencha Touch
  • Familiarity with most commonly used analytics like google analytics

How to do?

Before we proceed with putting the integration code from different analytic engine into our code, let’s understand their basic nature. There are two broad categories of data that the analytic engine use to give you the required analytics capability

  • Generic data
  • User level data

Engines like google analytics don’t capture user specific details due to privacy reason and hence you may not be able to define some of the user level metrics. For such things you will have to depend on the complementing analytic engines like mixpanel, kissmetrics, etc. Similarly, if you want to effectively monitor your site and manage advertisements then you may need to try out the suitable tools in that area.

Functional groups and related tools

For the sake of ease, I have grouped various available tools into different functional groups. Following image shows a sample categorization:

Analytics

Now this definitely looks overwhelming. While creating the functional website itself was a task for the business, working with above list of tools to meet their supporting need is definitely a daunting task. This is where business need to pause, think and proceed.

Common steps while using analytics

Let’s first understand that in general the steps to use any analytic engine are

  1. Install the generated scripts
  2. Identify the user and provide the required traits about the user
  3. Track events
  4. Create alias, which combines previously unassociated identities
  5. Define and view ratios and reports
  6. Define and use engagement and communication rules

Of course different engine may have different names for similar things and that is where Segment.io has created abstraction for you. You don’t always need to write engine specific code into your application to view the desired report. Refer to below link on Segment.io to setup segment.io in your project:
https://segment.io/libraries/analytics.js/

For Sencha Touch application, I have put below code inside the script tag, just before the end of header tag :

var analytics = analytics || [];
    (function () {
        var e = ["identify", "track", "trackLink", "trackForm", "trackClick", "trackSubmit", "page", "pageview", "ab", "alias", "ready", "group"],
            t = function (e) {
                return function () {
                    analytics.push([e].concat(Array.prototype.slice.call(arguments, 0)))
                }
            };
        for (var n = 0; n < e.length; n++) analytics[e[n]] = t(e[n])
    })(), analytics.load = function (e) {
        var t = document.createElement("script");
        t.type = "text/javascript", t.async = !0, t.src = ("https:" === document.location.protocol ? "https://" : "http://") + "d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/" + e + "/analytics.min.js";
        var n = document.getElementsByTagName("script")[0];
        n.parentNode.insertBefore(t, n)
    };
    analytics.load("Your API Key");

Enabling one or more services

Once you have segment.io set up, you can be confident that you don’t have to litter your application code all the time to meet your supporting needs. However, you need to understand one general philosophy – “You must not try to measure everything“. You need to exactly understand “what do you want to measure” and then measure that and act on the measurement. Based on your identified need, you need to identify the most suitable tool. If the tool is supported by Segment.io (and in general the Segment.io team tries their best to provide support for most of the popular tools) then you must feel lucky and proceed with subscription and configuration. Yes, you can do all these things without talking to your developer; unless you need to capture any new and specific data. Assuming that you have the Segment.io configured in your website, you need to visit following link to turn on / off any new service:

SegmentIO

An example integration

Assume that we have following need

  • we want to track certain custom events and build reports on them using mixpanel
  • use intercom.io to message your users

In this example we will add two services without actually changing any code in the application.

Configuring Mixpanel

Refer to below article on mixpanel for details description:

http://blogs.walkingtree.in/2013/06/05/using-mixpanel-in-sencha-touch-based-application/

If you are taking the path of Segment.io then in above article, you don’t need to put anything in app.html. All you need to do is setup following values on Segment.io’s setup page:

mixpanel

Following image shows the data received inside mixpanel through Segment.io:

mixpaneldata

Configuring Intercom

Similar to mixpanel, you can also configure intercom.io (as shown in below image):

intercom

Below image shows the data received in intercom.io through Segment.io:

intercomdata

Now that you have seen your events on mixpanel and intercom, let’s check Segment.io dashboard:

SegmentIODashboard The Segment.io dashboard just tells you the statistics of different events captured for your project. Based on the analytics services enabled for your project at any given moment, the Segment.io takes care of pushing the events details to respective engines.

Summary

In this article, I have explained the supporting and often ignored business needs. We have found that in order to be able to acquire and retain the customer the supporting environment is as important as the core product itself. To help the business user as well as the implementers to understand the related supporting requirements, I have talked about setting up Segment.io to streamline your integration need to be able to use different engines and demonstrated a sample example by integrating mixpanel and intercom. I hope this article gives you a holistic view about your overall business need and this helps you in taking a better decision.

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

Related Article

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
2 comments on “Supporting tools for your Sencha Touch based mobile websites
  1. Ranjit says:

    Thanks Alok for nice article.

    By referring your article I am able to set up segment.io + GA + Mixpanel easily and saves lot of time.

    Thanks

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: