HTML5 Zone is brought to you in partnership with:

Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile development and Cold Fusion. He's a published author and presents at conferences and user groups on a variety of topics. He is the happily married proud father of three kids and is somewhat of a Star Wars nut. Raymond can be reached via his blog at www.raymondcamden.com or via email at raymondcamden@gmail.com Raymond is a DZone MVB and is not an employee of DZone and has posted 216 posts at DZone. You can read more from them at their website. View Full User Profile

Google Analytics and PhoneGap

04.01.2013
| 4255 views |
  • submit to reddit

Today I decided to try out the Google Analytics plugin with PhoneGap, and more specifically, PhoneGap Build. It is one of the plugins supported by PhoneGap Build and being somewhat of a data nerd, I was curious to see how well it worked. Unfortunately, my "quick little experiment" turned out pretty horrid so I thought I'd write up my experiences to help others avoid the same mistakes I made.

Based on the docs for PhoneGap Build and this plugin, I was directed to the plugin's README file. The API to initialize, and track, events was rather darn simple. It's all asynchronous, but in most cases, you can probably just ignore the results. You want to log crap and forget about it. You've got support to register events and pages, and set up custom data as well. (Note that free accounts are limited to 4 custom variables.)

I whipped up a sample application that would let me test custom events and pages. I didn't want to bother setting up jQuery Mobile or a custom Single Page Architecture, I decided to just fake everything. So here is the index.html file:

<!doctype html>
<html lang="en">
  <head>
		<script src="cordova.js"></script>
		<script src="GAPlugin.js"></script>
		<script src="js/main.js"></script>
		<link rel="stylesheet" href="app.css" type="text/css" />
	</head>
	
	<body>
		<h1>Google Analytics Test!</h1>

		<button id="testButton">Test</button>		
		<button id="testFakePage">Test Fake Page</button>		

		<div id="testDiv"></div>

	</body>
</html>

Note the two buttons. I'm going to use one to trigger an event and one to trigger a page load. Now let's look at the JavaScript.

document.addEventListener("deviceready", init, false);
var myAnalyticsAccount = "UA-70863-18";

var testDiv;

function errorHandler(e) {
  //Lame - do nothing	
	alert(e.toString());
}

function init() {
	console.log("init fired");

	testDiv = document.querySelector("#testDiv");

	testDiv.innerHTML += "init fired<br>";

	gaPlugin = window.plugins.gaPlugin;
	gaPlugin.init(gaInit, errorHandler, myAnalyticsAccount, 10);	
	testDiv.innerHTML += "Main init<br/>";
	
	//Records a fake event
	document.querySelector("#testButton").addEventListener("touchend", function(e) {

		e.preventDefault();
		
		//Track an open event
		gaPlugin.trackEvent(function() {
			testDiv.innerHTML += "Button event ok<br/>";
			
		}, errorHandler, "Button", "Click", "Main Button", new Date());	

	});

	//Records a fake page load
	document.querySelector("#testFakePage").addEventListener("touchend", function(e) {

		e.preventDefault();
		
		//Track an open event
		gaPlugin.trackPage(function() {
			testDiv.innerHTML += "Fake Page Event ok<br/>";
			
		}, errorHandler, "/fake1.html");
		
		
	});
	
}

function gaInit() {
	testDiv.innerHTML += "GA init<br/>";
	
	//Track an open event
	gaPlugin.trackEvent(function() {
		testDiv.innerHTML += "Track event ok<br/>";
		
	}, errorHandler, "App", "Open", "App", new Date());	
}

Again, fairly simple. You can see the initialization, you can see the button event handlers, etc. In theory, that should be it, right?

The Google Analytics number came from, well, Google Analytics of course. I created a new site and used the "App" setting (since I was building a mobile app):

Easy peasy. I pushed up my bits to PhoneGap Build, pointed my iDevice at the QR code (they do have a purpose), ran the app, and everything worked great. And by that I mean I didn't see the error handler firing. I went over to Google Analytics, switched to the Real-Time view, and waited.

And waited some more.

I knew Google Analytics, in general, took some time to process crap, but Real-Time is supposed to be, well, real time! I put it aside, did some other stuff, and every now and then I'd run the app, click some buttons with my fat fingers, check the Google Analytics site, and curse.

Eventually I began to Google around for some solutions. By some random luck I found this page on the PhoneGap Build support site: Build 2.3 and Analytics Plugin . Specifically, one of the support folks posted a link to a GitHub demo of the feature in action (amirudin / pgb-analytic), and right there in the README was...

1- When creating new Analytics account, choose 'Website' under 'What do you like to track'

*sigh*

So.... yeah... that's frustrating. I created a new GA site, put in a fake URL as they suggested, switched the GA variable in my code, and voila - I began to see data immediately.

Surprisingly - or maybe I shouldn't be surprised - the geo data was right as well.

That orange blob isn't terribly accurate, but I do live inside of it. Actually, and I just found this, it did get more accurate over time:

If I had to guess, I'd say it took about one hour before data showed up in the non-Real-Time portion, but once it did, it seemed to update rather quickly. I tested on my Android device (more on that in the notes below) and it showed up pretty quickly.

Also, both my events and page data were recorded. As I don't have a lot of either, I won't bother to show a screen shot, but they are showing up.

So - it works.... but I've got some issues (as well as general questions out there for anyone who wants to help).

1) Number one thing is to ensure you make a GA account for a site, not an app. I've already got an email out to the PhoneGap team to see if we can document that better. I can see a lot of people making that mistake.

2) This is probably covered in the Google Analytics docs, but I'm pretty sure I screwed up by sending "new Date()" as my event value. First, GA already knows when an event occurs. So that's kinda dumb on my part. Secondly, it looks like the dates were converted into milliseconds since epoch. I've got some wonky big values for them in the GA dashboard. I'm thinking that if my intent was just to log the "event" of hitting a UI item, I'd be ok with a value of 1 there. If the event was something like, submitting a form for the # of beers you drank, then the value could be dynamic.

3) I tried to use the plugin locally - the one linked to from the PhoneGap Build docs. It never worked, and apparently is dead. But this isn't documented, and the PhoneGap Build docs link to it, so it... yeah... confusing. I was told that this is the new site for the repo: https://github.com/phonegap-build/GAPlugin. I haven't tried these bits.

4) Unfortunately, the Android version of this is throwing errors. Immediately on loading up the error handler is thrown, but all I get is a "JSON Error". Yeah, that's it. At the same time, some functionality worked (you can see in the screenshot above the device was recorded). My plan is to hook up DDMS (or whatever they call it now) and see if I can figure out the issue there.

5) I think you could do some interesting stuff with the variables aspect, especially if you have a paid account. You could make use of the device API and the connection API to log some additional information about your users.




Published at DZone with permission of Raymond Camden, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)