Using Javascript with Bango Analytics for Smartphones

We recently had a request from a customer to use Bango Analytics to track events being triggered from javascript in a mobile site. Traditionally javascript has been a bit of a no-no for mobile because of lack of support. However many new smartphone operating systems (Android, iOS, BlackBerry 6, Windows Phone 7) have browsers which provide a great level of javascript support, on a par with or exceeding some desktop browsers. Why not harness the power of Bango Analytics to track javascript events?

Video Vote Now – the demo site

Video Vote Now! HomepageA small demo site was set-up at http://demos.bango.net/videovotenow/ (hit it on your smartphone!) with a homepage linking to three separate ‘vote’ pages. On each of the vote pages the user can click on a button to vote for the video on that page. Please note: no videos are included on the site so don’t be worried if you can’t see any! We use Bango Analytics to track page views on all of the pages of the site and also to track clicks on the vote buttons; the button clicks are handled by javascript. We don’t collect any entries into the email fields on this site since it is just a demo, you can test all the functionality without entering an email address.

Behind the scenes – the technology

Video Vote Now! Video pageSince the focus for the demo site is on smartphones, we had the advantage of using HTML5 and CSS3 to quickly prototype and build the web pages. The browsers on latest generation smartphones invariably have good support for these technologies, enabling feature-rich web-based applications, such as Gmail, which can out-perform native phone apps in many cases.

For the javascript we plugged in the jQuery library, there is a jQuery mobile project but thanks to the brilliance of modern smartphone browsers they handle the full version of jQuery just fine so we stuck with that.
Finally, for the analytics tracking we are, of course, using Bango Analytics. It’s designed and developed by us specifically for accurate measurement and in-depth reporting of analytics data from users on mobile devices. Why would you want to use anything else?

Under the hood – the code

Video Vote Now! Vote cast

The homepage and all three video vote pages have standard Bango Analytics page tracking on them. We included some quick PHP session code to pass Bango tracking parameters around the site for campaign measurement. For the video vote pages we also included the jQuery javascript library.

We added a link styled up to look like a button to track the votes and a single 1 pixel square blank gif to use as a vote counter – more on this later:

<a class="btn" href="" id="testVideoVote3">Vote!</a>
<img id="voteCounter" alt="" height="1" width="1" src="img/blank.gif" />

And we wrote a small javascript function to attach to the button and register the button clicks as votes:

<script>
function doVoting(){
// Bind to the click event of the button link
$('#testVideoVote3').bind('click', function(e){
// Set a variable with a Bango tracking image source, with appropriate url and title parameters
var src = 'http://bango.net/id/111555007849.gif?url=VideoVote3&title=Video%203%20Vote';
// Assign the variable above to the source of the blank vote counter image
// This records the vote event in Bango Analytics
$('#voteCounter').attr('src', src);
// Hide the email field and show a thank-you message
$('#voteWrap').hide();
$('#voteThanks').show();
return false;
});
}
$(document).ready(function(){
doVoting();
});
</script>

Where to go from here?

As a proof-of-concept the demo site works very nicely indeed and successfully enables tracking of javascript events with Bango Analytics. We’re doing some thinking around providing an Bango Analytics javascript API to record data, since there are an increasing number of devices on the market which will support javascript.

Naturally we’d love to hear your comments on the demo site, using javascript and the potential for a javascript analytics API. Would you find it useful? If so what sort of functionality and methods would you like to be made available from the API?


This entry was posted in Development. Bookmark the permalink.

One Response to Using Javascript with Bango Analytics for Smartphones

  1. JR says:

    We are implementing mobile apps using Sencha Touch framework, which is a single-page javascript-based framework; so the concept of a “page” is no longer physical, but logical. I understand we can use the technique you describe in this article to dynamically send “page” events to Bango using an image tag and some javascript. Are there any other considerations that we have to be aware of to ensure all the data that is required by Bango in order to properly track (e.g. unique visitors) is actually sent in our gif requests? For example, I assume you are relying on the existence of tracking cookies of some kind — I just wonder whether the gif requests are really all we need to do to make this work correctly. I would be in favor of a Bango javascript api. I am used to Google’s analytics javascript api, if that is of any use to you in terms of what developers might find useful in your api.

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