Step by step to get Google Analytics working in PhoneGap 1.2.0 on iOS (phonegapalytics)

Question

How do I install Google Analytics in PhoneGap 1.2.0 in iOS?

Answer 1

First and foremost I have to give a lot of credit to the guys here. Their blog was of tremendous help but I still had to do a few more things to finally get it to work.

I’m going to go through it step by step so that you can get it to work at a very basic level and then you can take it from there. I found that even the slightest mistake can mess things up.

I am assuming you have installed PhoneGap 1.2.0 and are using Xcode 4.2

---

PART A

Get a basic PhoneGap app working. Follow the PhoneGap guide and get that working.

---

PART B

Download the PhoneGap Google Analytics Plugin. I find the easiest thing to do is just download the zip file from here. You get a pile of things you don't need but it doesn't matter.

Expand the file in your download directory. Go into the expanded directory.. into the iPhone folder and you should see the GoogleAnalytics folder.

In Xcode, right click on project (the blue block thing at the top) and choose 'Add files to '. Navigate to the expanded folder. Click on the 'GoogleAnalytics' folder. Make sure the 'copy files into destination group's folder (if necessary)' is selected and that its added to the target. Click 'Add'. Drag the files in the folder in Xcode to the Plugins folder.

Go back to Finder and open the project directory. Copy the GoogleAnalyticsPlugin.js from the GoogleAnalytics folder to the 'www' folder. Xcode will give a warning about re-saving the file.. Just click Close.

Go to the index.html file. In function onDeviceReady() add the following line to the start of the function.

window.plugins.googleAnalyticsPlugin.startTrackerWithAccountID("YOUR UA CODE");

Next add the following function under the onDeviceReady function (inside the same script block)

function trackpage(id)
{
    console.log("start trackpage: " + id);
    window.plugins.googleAnalyticsPlugin.trackPageview(id);
    console.log("end trackpage: " + id);
}

Now, still in the index.html file, find the line

<li>Check your console log for any white-list rejection errors.</li>

(remember this is phonegap 1.2.0)

add the following line after it.

<li class="arrow"><a href="javascript:trackpage('/TEST');">test analytics</a></li>

This gives a link you can click on in the test app.

NB. You MUST have a forward slash (/) in the page your are tracking. So javascript:trackpage('/TEST') will work while javascript:trackpage('TEST') will NOT.

Finally, still in the index.html add the following line

<script type="text/javascript" charset="utf-8" src="GoogleAnalyticsPlugin.js"></script> 

below

<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>

Don't bother trying to run it yet. It won't work.

---

PART C

Next goto the GoogleAnalytics.h file. Just wipe it.. There are a pile of problems here. JSON seems to be now JSONKit and PhoneGapCommand is now PGPlugin.. Just paste this in. The PhoneGap documentation seems to be all over the place.

#import <Foundation/Foundation.h>

#ifdef PHONEGAP_FRAMEWORK
#import <PhoneGap/PGPlugin.h>
#import <PhoneGap/NSData+Base64.h>
#import <PhoneGap/JSONKit.h> 
#else
#import "PGPlugin.h"
#import "NSData+Base64.h"
#import "JSONKit.h" 
#endif

#import "GANTracker.h"

@interface GoogleAnalyticsPlugin : PGPlugin<GANTrackerDelegate> {

}

- (void) startTrackerWithAccountID:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
- (void) trackEvent:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
- (void) trackPageview:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

@end

---

PART D

Next add the Google Analytics part to the project. This is the part which Google provides but its conveniently included in the phonegap ios GoogleAnalytics/GoogSDK plugin folder.

In Xcode, go to the GoogleAnalytics/GoogSDK folder and drag the GANTracker.h and libGoogleAnalytics.a files to the Plugins directory.

Basically you need to copy them from the ‘blue’ GoogleAnalytics/GoogSDK folder into a ‘yellow’ folder so they can be found by header files.

---

PART E

Next we need to add sqlite (where Google Analytics stores data when not online) and CFNetwork (so Google Analytics can upload the data) to the project.

In Xcode click on the project (the blue thing at the top of the file). Click on the main target. Then click on the Build Phases. The 3rd item on the list is the “Link Binary with Libraries”. Note there are two of these.. choose the top one. Open it and click on the + sign. Add libsqlite3.0.dylib then add CFNetwork.framework.

---

PART F

Finally (almost there) we need to setup the plugin. Go to the PhoneGap.plist file. Under Plugins add another entry with the key as googleAnalyticsPlugin (the javascript name) and the value as GoogleAnalyticsPlugin (the Obj-C part).

Under ExternalHosts add a * entry

Now try and run. Fingers crossed it will work.

The best way to test it to run the program and then use the new Google Analytics Real Time (BETA) mode as you can see pages being tracked live.

You need to change to the new version of Google Analytics (it should be an obvious link at the top to move to the new version). Open the GA account, go to Home..REAL_TIME... Overview. You should see the TEST page track coming in within a few seconds.

Note: You can't track events in realtime. You need to wait for them to be processed.

ISSUES

I had some problems when looking at the Compile Sources and Link Binary With Libraries. The GoogleAnalytics parts would show up in red. If they are in red it means your project can't find them and I think how you resolve this depends on your version of Xcode so you might need to google about a bit to resolve that. What I did was to remove the GoogleAnalytics (press the - sign) then drag the file in. If it shows up as a "proper icon" (as opposed to a red box) it should have worked.

Doing it on Android also?

I assume if you are using Phonegap you are probably doing an Android version also. If this is case you may want to check out this comparison Q+A for the differences.

Answer 2

Thanks so much for your great work, my only confusion was with this block:

function trackpage(id)
{
    console.log("start trackpage: " + id);
    window.plugins.googleAnalyticsPlugin.trackPageview(id);
    console.log("end trackpage: " + id);
}

Had to put it outside the onready function for it to work in my app.