Edit on November 18, 2014: Please read carefully. Since the time this entry was written, some things have changed. Thanks to readers (see comments below), we know now that we should use App, not Site, as I describe towards the bottom of the post.
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:
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'
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).
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. See my note on top.
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.
Hi Raymond! Thanks for your article. According JSON error in android. I get same error in trackEvent when don't set last eventValue parameter. When I set it to any number - all work fine.
Oh thank you - I didn't get a chance to try with DDMS and Android. So - now I'm curious. If you look at my code, I do send an event. As I said in the notes at the end, I should not have used new Date(), but it is still a value. Is that what you changed?
I don't change your code. After reading article, I add gaplugin in my sencha phonegap app and receive same error in android when use trackEvent without last param - trackEvent( success, failure, "load", "data", "test"). When change to trackEvent( success, failure, "load", "data", "test", 1) error disappear and I see this event in realtime analytics.
But, I didn't forget the last one. Unless new Date() is screwing things up. Monday I'll try with 1 and see if it works better in Android.
I have successfully implemented GA plugin for iOS for Cordova 2.2, but unable to do so for the Android.
I know this blog is for phonegap Build, but I would appreciate any heads up or direction for the same.
Did you use this one (https://github.com/phonegap... instead of the one linked to from the docs?
I maintain an Android version of the GA plugin (https://github.com/DoersGui..., and I thought you might want to give it a try.
I've built this one based on the documentation for GA "App" SDK, so I'm not sure if it'll work with your "site" account. Do let me know if it does.
Thanks and Regards,
I didn't set up my analytics as a website. I set it up as an app which is how you are supposed to do it according to Google. I have real time analytics showing up. However, I didn't use Build.
In GAPlugin.java, trackEvent requires the last value to be an int type. If not, it throws JSON_EXCEPTION: line 39. Thus 1 works, and not new Date(). That param refers to: https://developers.google.c...
Thanks a lot for this article. The setup with web instead of app in GA saved our ass.
Hi Raymond. Thank you for documenting this. Do you have any experience with using GA with Phonegap in offline mode? So data is only registered on your GA account once you go online?
Good question, Kim. Off the top of my head, I'd say you would want to create a queue of events. When you detect you are back online, fire them. Unfortunately, the dates will be incorrect for the events, but they will be in the right order chronologically. I'd also maybe check their (Google) API to see if they support overriding the timestamp. You would think they would for offline apps.
I'd like to build a demo of this so I'll keep this comment around but I won't have free time till next week.
Following up on my initial question: I am in need of making offline tracking happen using Phonegap and iOS. We have tried around a bit, but are not able to find a solution. Any help would be very appreciated.
HAve you had the chance to try this out?
Not yet. It is still in my queue to look at, but, I'm in the middle of a huge set of conferences. I'm on the road quite a bit. Sorry. I still want to do this, but can't promise it soon.
According to this blog post from Phonegap Build (https://build.phonegap.com/..., Google has updated the Analytics SDK recently and there are some minor changes in using the GAPlugin.
What also did change is that when you are creating a site on Google Analytics to track Events or Pages on a mobile application, you now have to choose 'App' and not 'Website' anymore..
Thanks for sharing this Anna. I'm still planning an update, and this will help.
We have followed your steps and it didn't work, then we realized that actually we had to create an Google Analytics App not a WebSite.. it is quite strange that for you didn't work but it worked for us.
Yep, see the comment 2 above yours. :)
Hi, I've been able to make it run on Phonegap 3.1, but just on iOS, no way to make it work on Android...
I've got it modifying AndroidManifest.xml and adding
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
I show through adb logcat that this was missing...
Hi Raymond, I know you're a Ripple fan, but that Ripple does not support GAPlugin. Do you have any tips to at least make Ripple not complain when you're running GAPlugin?
I don't think you can tell Ripple to ignore it. You could wrap your GA plugin code in something that checks for Ripple (http://www.raymondcamden.co....
I believe David meant:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
with the underscores. That or it's changed since his comment.
Good article.. wish I knew if it were still relevant with all the phonegap & universal analytics changes, etc.
Nevermind your comment form is removing the underscores.
Yeah, sorry - I use it for italics. In the future, you could just use a URL for to a Gist. (Or pastebin.)
No worries. Though you should look into your subscribe to comments plugin, as it wasn't an email that brought me back here but rather problems with this plugin.
Noticed you're from Lafayette. I actually grew up in Thibodaux though now reside in Baton Rouge. Oddly enough I only noticed that in your source code while checking to see if you really had a 5 digit analytics ID haha. That has to be pretty close to the urchin days.
Thanks for the post. New to JS and jQm, so any info to help avoid tracking exclusively with events is helpful.
Thanks for the warning about the subscribe. It does work in general, afaik, but sometimes emails get stuck.
Just what I needed, was using a different plugin that wasn't reporting any data.
Switched to this one and all working fine, real time data showing straight away.
I'm also using an App not a Website in GA, as pointed out by Anna
I'm a newbie to GA. I've created an account for GA, afterwards, I've created a Mobile App property and then used https://github.com/danwilso... Cordova plugin to integrate GA for my Phonegap app, I can now see all screen-views, events in my Real-Time preview but not sure how to track things when app is offline, I heard that Universal analytics will help us to track activities when app is offline, but don't know how to do this, can you please elaborate the steps of how I can achieve this using GAPlugin plugin ?
I'm using cordova 3.5. I installed the gaplugin last night. I followed instruction on the github page, but couldn't get ga to work.
I've installed all the plugins ga needs, network-info, geolocation...,
and when I see your post today, I try to create a "site" account(previously is "app"), and switch the tracking id in my code, but still, cannot see anything in the real-time panel. So I just wait, wait, search, wait, and just to see nothing changes.
and my network is on.
Hope you could give me a reply if you got the answer. Thanks.
Finally get this problem soved!
For short: include GAPlugin.js after cordova.js . This is the answer to my specific issue.
(my gaplugin version is 2.3.1, "site' account will not work, "app" does)
Normally when I install a phonegap plugin, I would type
"phonegap plugin add https://github.com/xxxxxx.git"
in my command line then hit enter and do nothing else, and, normally, the plugin I installed this way would work just fine. But this time,when I do the same thing with gaPlugin, it never works however I configure my app or google account. When I saw this post and example.html here("https://github.com/bobeast/..."). I found that they both include the GAPlugin.js after cordova.js. I saw(and ignored) this before, but this time, I decided to give it a try. And it excited me when I switch to my google real-time panel--"big green".
What's more, (cordova 3.5, android) I've tried to create a "site" account to test this functionality, it doesn't seem to work. So you might need to create "app" account to use this plugin.
Vincent, thank you for sharing what solved your problem!
Thanks Vincent ... switching GA back to "app" got GA working for me too - using [https://github.com/phonegap...].
I'm going to edit the entry now so folks don't miss this.
Any chance anyone has an idea when the GAplugin will support arm64? Kind of painful atm because you can't build to device with GAplugin right now.
hi, any idea to make it work with phonegap build? none i've tried is working
*How* is it not working, you didn't say?
put events in a queue (array) of yours and then fire them on "online" event?
don't think so, i detect ripple:
window.has_ripple = true && window.parent && window.parent.ripple;
and if found i don't start any GA calls using a semaphore: windows.has_GA
Hi Raymond. Thank you very much for the thorough explanation
When i load the app i get alert: "value <time> at 3 of type java.lang.string cannot be converted to long"
same happens when i click test.
GA doesnt track my usage unless i press the fake page button. when i press it, it shows fake page event ok and GA shows me as an active user. can you suggest what i should do?
Best I can suggest is to file a bug report on the plugin. It looks like an issue at that level, and not in my code. (I could be wrong though!)
I have a question - Since we are choosing the website option and putting in a fake URL, how do we handle the in-page analytics? I am not sure but it does not come up if we choose App option - comments?
You should be using the *App* option, not Website.
Is there a way to display all these charts within the app using google analytic embedded api?
Did you try? :) I don't know how well their Embedded API works on mobile.
I have been looking at this
and there are many issues ; such as
So I had to use rectify a lot of things. Thought still not over.
Cool - well - let me know.
Whats the best plugin for google analytic in cordova?
I found the following three; have you implemented any one successfully:
Sorry - I haven't used any of them.
sir can you send project zip file on firstname.lastname@example.org
No - I've included the code above - that should be all you need.