PhoneGap 1.x, Google Analytics, and XCode 4.2
So I was working on a PhoneGap app for the Lehigh/Lafayette Challenge and realized it might be wise to include an analytics package so we'd have something to work from for next year. A quick Google search yielded me this blog post on including Google Analytics in a PhoneGap app.
The problem is, the instructions are outdated...and the package docs on github are also out of date. Commence headdesk. Bang. I don't know the first thing about Xcode or Objective-C, so this was quite an adventure!
Here's what you need to do to use this in an iOS PhoneGap app (jQueryMobile 1.0RC2, PhoneGap 1.1, Xcode 4.2) so that the plugin works with the PhoneGap 1.x plugin architecture. Guaranteed to work as of right this second with these versions. I'm sure it'll break again soon :-)
- Go get the code from the PurpleCabbage Github site
- Drop GANTracker.h, GoogleAnalyticsPlugin.h, GoogleAnalyticsPlugin.m, and libGoogleAnalytics.a in the Plugins folder in your Xcode project. Right click on Plugins, Add Files to
, select 'em, make sure "Copy items into.." is selected, and click "Add". 
- Modify GoogleAnalyticsPlugin.h to comply with the new plugin architecture
- Drop the GoogleAnalyticsPlugin.js file in the www folder for your project. I put my stuff in a subdirectory (assets/js) just to keep things neat.
- Don't forget to include it in index.html with a script tag!
- Now setup your app startup scripts to initialize the GA code too
- You'll probably also want to track every jQuery Mobile "page" view too. I just hooked in to the 'pageshow' event. You can track pageviews (which I'm clearly faking here) and "events" (better explained here).
- This will save you some hair pulling: the Android PG/GA plugin uses a js method named "trackPageView". The iOS version is named "trackPageview". Yeah...case sensitivity strikes again. Save yourself hours of screaming by watching for that.
- Now we have to make PhoneGap aware of the plugin. This is the undocumented part.
- In your /Resources/PROJECTNAME.plist file, open up the Plugins area and add a new item. The name is "googleAnalyticsPlugin" (which is the name of Javascript object). The value is "GoogleAnalyticsPlugin" (which is the name of the Obj-C object). This took a ton of trial and error.
- Last step: allow the app to reach external hosts. You could list each one individually, but I wildcarded it for this project. Under ExternalHosts in that same PROJECTNAME.plist file, add a line, and set the value to "*". You can see it in the screenshot above.
#import <Foundation/Foundation.h>
#import "PhoneGapCommand.h"
#import "GANTracker.h"
@interface GoogleAnalyticsPlugin : PhoneGapCommand<GANTrackerDelegate> {
}
/* Replace all of that with this */
#import <Foundation/Foundation.h>
#ifdef PHONEGAP_FRAMEWORK
#import <PhoneGap/PGPlugin.h>
#import <PhoneGap/NSData+Base64.h>
#import <PhoneGap/JSON.h>
#else
#import "PGPlugin.h"
#import "NSData+Base64.h"
#import "JSON.h"
#endif
#import "GANTracker.h"
@interface GoogleAnalyticsPlugin : PGPlugin<GANTrackerDelegate> {
}
<script type="text/javascript" charset="utf-8" src="assets/js/GoogleAnalyticsPlugin.js"></script>
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
/* PhoneGap is ready to be used! */
function onDeviceReady() {
window.plugins.googleAnalyticsPlugin.startTrackerWithAccountID("UA-YOUR-GOOGLE-SITE-CODE");
/* i like to throw a startup event in there just to know how many launches we get */
window.plugins.googleAnalyticsPlugin.trackPageview("startup");
/* other startup code here */
}
/* track page views */
$('div').live('pageshow', function(event, ui){
var pagename = $(this).attr('id');
window.plugins.googleAnalyticsPlugin.trackPageview(pagename);
return true;
});
});
So from this point forward, you should be able to see pages being logged in Google Analytics from your mobile app. Hope this helps!
So Friday night around 11:30 I sat down with 
