Saturday, November 26, 2011

Using Google Analytics with HTML5 or PhoneGap apps


   Hello all, this time I am back after so many days and have brought with me some cool stuff related to HTML5 and PhoneGap mobile web applications. I had been going thorugh Google Analytics SDK for Android and figured out that they have a really cool way of tracking app usage of Native android apps.

   What about mobile web apps developed using HTML5, CSS and Javascript or say PhoneGap.?

:(  :(  ;(   .... !#*"&!)£+=$;^"%.... developers cry.

Putting the javascript code provided by Analytics Dashboard does not work in case of Android web applications. I have already tried it.

    So I begun my challenge of achieving this. I wrote a simple app which had a couple of couple of HTML pages in it. To get such an app running into the Android mobile device, we essentially create a WebView component and then load the first HTML page of the app into this webview. Then the user is good to play with your application.

   Now getting back to the Analytics tracking of this web app, I used the code provided by Google here.
   So the code becomes somewhat like this.

public class  myWebApp  extends Activity{

      Webview mWebview;
      GoogleAnalyticsTracker tracker;

  protected void onCreate(Bundle savedInstanceState) {

        tracker = GoogleAnalyticsTracker.getInstance();

        // Start the tracker in manual dispatch mode. The following UA-xxxxxxx-x code must be replaced by //your web property ID.

       tracker.startNewSession("UA-xxxxxxx-x", this);

       mWebview = new WebView(this);
       mWebview .setWebViewClient(new myWebViewClient());
       mWebview .loadUrl("file:///android_asset/www/index.html"); 
  



    private class myWebViewClient extends WebViewClient
    {
        
        //After the user visits a particular page, send the tracking notification to GoogleAnalytics.
         @Override
         public void onPageStarted(WebView view, String url, Bitmap favicon)
         {
tracker.trackPageView( mWebview.getUrl());
tracker.dispatch();
         }
      }

   }


On the similar lines, PhoneGap also uses the WebView component to get the app running in Android. So the same code(or little bit modified) can be used to track user engagement in the PhoneGap applications.

    This feature should be used to determine the user engagement into your application and nothing more than that. It will help you figure out which features of your application are used more by your user and enhance the user experience, user interface of such features.


Note: You should ensure that your application conforms to the terms and policies of Google Analytics.

4 comments:

  1. So if I read this right, you modify the Java a bit, and then that's it? Any way you can share a zip of a full project (full as in all the bits, I don't mean any real code, even just Hello World).

    ReplyDelete
  2. Hi, a this looks good but is there any chance of you posting an example for Phonegap? Thank you.

    ReplyDelete
  3. Yes, I will soon post a working code of some simple application using Phonegap and also without using Phonegap.

    Keep visiting.

    ReplyDelete
  4. Functional weblog ... wow!

    Stop by my homepage :: affilate ()

    ReplyDelete

LinkWithin

Related Posts Plugin for WordPress, Blogger...

Share This

Share |