Gathering usage analytics and engaging users on mobile apps with TrackToAct and PhoneGap

As most of you know, the mobile application (app) market is huge and is growing by the day. Mobile app development brings with it a host of different challenges that traditional desktop and web developers need to face, but one challenge remains the same: How do users use my app and how do I gain insight into app usage?

Fortunately, TrackToAct gives you the ability to not only gain incredible insight into how users use your app but also to enable you to act on the information to keep users engaged until they purchase your application.

As I’ve mentioned in my previous article “A sneak peek at TrackToAct’s in-app messaging”, you can keep your users engaged by sending them in-app messages to guide them in using your app or to provide them with special offers.

In this article, I’ll show you how to build a fairly simple Android application using PhoneGap and how to incorporate TrackToAct into this app.

Creating the PhoneGap Project

Head over to the PhoneGap “Getting Started guide for Android” if you do not have the necessary tools installed for Android development yet. After you’ve followed the instructions and created your first Android app, open it in Eclipse.

Since we’re using PhoneGap for this project we’ll only be interested in the assets/www folder.

The sample app will use the free GeoNames web services to perform a number of geographical lookups. Our app will have two versions, namely free and paid. The free version will allow the user to lookup United States postal codes, whereas with the paid version they’ll be able to find nearby Points of interest as well as street information..

We’ll be using a number of libraries to make the task easier:

jQuery Mobile is a library that makes it very easy to build apps for most popular smartphone and tablet devices and jeoQuery is a very handy jQuery library for accessing the GeoNames web services.

Open the index.html file in your favourite HTML editor and change its mark-up to the following:

<!DOCTYPE html>
<html>
<head>
    <title>Geo App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="js/jeoquery.js"></script>
     <script type="text/javascript" src="js/cordova-2.2.0.js"></script>
 </head>

 <body id="mainBody">

     <div data-role="page">

         <div data-role="header">
             <h1>Geo Lookup</h1>
         </div>

         <div data-role="content">
             <div class="ui-grid-a" style="margin-top: 10px;">
                 <div align="center" class="ui-block-a">
                     <div style="height: 120px">
                         <a onclick="trackToAct.logEvent('Trial', 'ZIPSearch');" href="postalCodes.html" rel="external">
                             <img src="img/PostalCode.png" />
                         </a>
                         <p><strong>Zip Codes</strong></p>
                     </div>
                 </div>
                 <div align="center" class="ui-block-b">
                     <div style="height: 120px">
                         <a onclick="trackToAct.logEvent('Trial', 'POISearch');" href="BuyNow.html">
                             <img src="img/Poi.png" />
                         </a>
                         <p><strong>Points of Interest</strong></p>
                     </div>
                 </div>
                 <div align="center" class="ui-block-a">
                     <div style="height: 120px">
                         <a onclick="trackToAct.logEvent('Trial', 'StreetSearch');" href="BuyNow.html">
                             <img src="img/Streets.png" />
                         </a>
                         <p><strong>Nearby Streets</strong></p>
                     </div>
                 </div>
                 <div align="center" class="ui-block-b">
                     <div style="height: 120px">
                         <a onclick="trackToAct.logEvent('Trial', 'BuyNow');" href="BuyNow.html">
                             <img src="img/BuyNow.png" />
                         </a>
                         <p><strong>Buy Full Version!</strong></p>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </body>
 <script type='text/javascript' language='javascript'>
     var getSiteObjOverride = function (siteid) { return { "idsite": "–YOURSITEID–", "main_url": "http://pieter@email.com/MyFirstApp" } }; var JSINCLUDEOBJECT_AUTOSTART = true; var JSINCLUDEOBJECT_APPID = "–YOURAPPID–"; var trackToAct = false; document.write(unescape("%3Cscript src='http://tracktoact.com/p1/sdk/jssnippet.js' type='text/javascript'%3E%3C/script%3E"));
 </script>

 </html>

You’ll notice that I’ve added references to all the jQuery libraries we’re going to use in this project as well as the PhoneGap/Cordova JavaScript library.

I’ve also added a JavaScript snippet at the bottom of the page. This snippet is available to you in your TrackToAct account and enables you to send usage data to your TrackToAct event stream. The snippet is invoked when the user clicks on one of the icons on the main menu. As you can see, by changing the event and value parameter we can track the user’s application usage e.g:

onclick\="trackToAct.logEvent('Trial', 'BuyNow');"

When I test the application in an Android emulator the start-up screen looks like the following image:

In the trial version, the only feature that is enabled is the Zip Code search. This links to another page called postalCodes.html. The source listing for this page is:

<!DOCTYPE html>
<html>
<head>
    <title>Find Zip Codes</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <script src="js/jquery.min.js"></script>
     <script src="js/jquery.mobile-1.2.0.min.js"></script>
     <script type="text/javascript" src="js/jeoquery.js"></script>
     <script type="text/javascript" src="cordova-2.2.0.js"></script>
     <script type="text/javascript" src="js/postalCodes.js"></script>
 </head>

 <body>
     <div id="pages">
         <div data-role="page">
             <div data-role="header">
                 <a href="index.html" data-icon="home">Home</a>
                 <h1>Zip Codes</h1>
             </div>
             <div id="content" data-role="content">
                 <label for="basic">Zip Code:</label>
                 <input type="text" name="poCode" id="poCode" data-mini="true" />

                 <fieldset class="ui-grid-a">
                     <div class="ui-block-a">
                         <a href="index.html" id="Cancel" data-role="button" data-mini="true">Cancel</a>
                     </div>
                     <div class="ui-block-b">
                         <button id="lookup" data-mini="true" data-theme="a" class="ui-btn-hidden" aria-disabled="false">Lookup</button>
                     </div>
                 </fieldset>
                 <div id="poResults" style="margin-bottom: 50px;">

                 </div>
                 <ul id="codeList" data-role="listview"></ul>
             </div>
         </div>
     </div>
 </body>

 </html>

On this page, the user can enter a United States zip code and lookup the place and State name associated with the postal code. The page references an external JavaScript file called postalCodes.js, and the code for this file looks like follows:

$(document).ready(function () {
    $('#lookup').click(function () {
        var postalCode = $('#poCode').val();
        $('#poResults').append('Fetching…');
        jeoquery.userName = 'demo';
        jeoquery.postalCodeSearch(geoCallback, postalCode, '', '', 'US', '', 10, '', '', '', '');
    });

});

 function geoCallback(data) {
     $('#poResults').empty();
     $('#codeList').empty();
     $.each(data.postalCodes, function (index, pcode) {
         $('#codeList').append('<li><a href="BuyNow.html">' + pcode.placeName + '<br/> ' + pcode.adminName1 + ', ' + pcode.countryCode + '<br/>' + pcode.postalCode + '</a></li>');
     });

     $('#codeList').listview('refresh');
 }

The JavaScript calls the postalCodeSearch function in the jeoQuery library and returns a list of US Zip codes/place names and adds it to a jQuery Mobile list view.

You’ll notice that all the other pages were redirected to the BuyNow.html page. This page is used to encourage the user to buy the app in order to be able to access all of its features. By adding the TrackToAct JavaScript snippet we can establish which features users click on the most before they decide to buy the full app, which will enable us to focus our development efforts on the more popular features.

As I’ve mentioned earlier, you also have the option to send messages to the user whilst they are using the app and keep them on the happy path towards buying or upgrading to the full version, by mentioning that upgrading unlocks more features.

An important new feature I would also like to mention is the ability to integrate with CRM systems e.g. Infusionsoft and Salesforce. What this means is you are able to send in-app messages to anonymous users from your CRM system!

By adding the anonymous user and their message history to your CRM, by the time the users buys the application you will already have a full usage and message/engagement history for that particular user.

Thank you for reading. Remember to try TrackToAct by signing up for a fee account!

This was a paid-for article brought to you by TrackToAct.