Google Analytics and PhoneGap

This post is more than 2 years old.

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:

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.

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. 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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Nikolay posted on 3/30/2013 at 5:11 PM

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.

Comment 2 by Raymond Camden posted on 3/30/2013 at 5:13 PM

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?

Comment 3 by Nikolay posted on 3/30/2013 at 5:35 PM

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.

Comment 4 by Raymond Camden posted on 3/30/2013 at 5:49 PM

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.

Comment 5 by Nikhil posted on 4/1/2013 at 6:10 PM

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.

Many Thanks
Nikhil

Comment 6 by Raymond Camden posted on 4/1/2013 at 6:11 PM

Did you use this one (https://github.com/phonegap... instead of the one linked to from the docs?

Comment 7 by Sathvik posted on 4/5/2013 at 7:30 PM

Hey Raymond,

Interesting post.
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,

Sathvik

Comment 8 by Michael posted on 4/8/2013 at 9:33 PM

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.

Comment 9 by Tri Noensie posted on 5/8/2013 at 12:46 AM

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.

Comment 10 by kim posted on 5/13/2013 at 5:04 PM

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?

Comment 11 by Raymond Camden posted on 5/13/2013 at 6:23 PM

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.

Comment 12 by Kim posted on 5/21/2013 at 6:24 PM

Hi Raymond,

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?

Comment 13 by Raymond Camden posted on 5/21/2013 at 9:27 PM

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.

Comment 14 by Anna Mund posted on 5/28/2013 at 3:59 PM

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..

Comment 15 by Raymond Camden posted on 5/28/2013 at 4:07 PM

Thanks for sharing this Anna. I'm still planning an update, and this will help.

Comment 16 by Javito Hertfy posted on 8/8/2013 at 7:18 PM

Hi Raymon,

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.

Comment 17 by Raymond Camden posted on 8/8/2013 at 8:53 PM

Yep, see the comment 2 above yours. :)

Comment 18 by David posted on 1/14/2014 at 10:20 PM

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...

Comment 19 by David posted on 1/14/2014 at 10:32 PM

Me again.

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...

Cheers

Comment 20 by Christopher G Johnson posted on 1/27/2014 at 12:07 AM

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?

Comment 21 by Raymond Camden posted on 1/27/2014 at 7:24 AM

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....

Comment 22 by Kb posted on 3/11/2014 at 6:45 AM

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.

Is it?

Subscribed

Comment 23 by Kb posted on 3/11/2014 at 6:45 AM

Nevermind your comment form is removing the underscores.

Comment 24 by Raymond Camden posted on 3/11/2014 at 2:15 PM

Yeah, sorry - I use it for italics. In the future, you could just use a URL for to a Gist. (Or pastebin.)

Comment 25 by Kyle B posted on 3/11/2014 at 9:46 PM

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.

Comment 26 by Raymond Camden posted on 3/11/2014 at 9:55 PM

Thanks for the warning about the subscribe. It does work in general, afaik, but sometimes emails get stuck.

Comment 27 by Pete Williamson posted on 7/3/2014 at 11:09 AM

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

Comment 28 by Mohammad Umer Ashraf posted on 10/1/2014 at 2:25 PM

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 ?

Thanks

Comment 29 by Vincent Row posted on 10/24/2014 at 12:59 PM

Hi, Raymond,

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.

Comment 30 by Vincent Row posted on 10/24/2014 at 1:57 PM

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)

info:
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.

Comment 31 by Raymond Camden posted on 10/25/2014 at 1:33 AM

Vincent, thank you for sharing what solved your problem!

Comment 32 by Chris posted on 11/17/2014 at 11:29 PM

Thanks Vincent ... switching GA back to "app" got GA working for me too - using [https://github.com/phonegap...].

Comment 33 by Raymond Camden posted on 11/18/2014 at 4:56 PM

I'm going to edit the entry now so folks don't miss this.

Comment 34 by Chris posted on 11/19/2014 at 1:48 AM

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.

http://community.phonegap.c...

Comment 35 by Kong posted on 2/9/2015 at 1:39 AM

hi, any idea to make it work with phonegap build? none i've tried is working

Comment 36 (In reply to #35) by Raymond Camden posted on 2/10/2015 at 11:32 AM

*How* is it not working, you didn't say?

Comment 37 (In reply to #10) by Antonio Gallo posted on 7/7/2015 at 10:26 PM

put events in a queue (array) of yours and then fire them on "online" event?

Comment 38 (In reply to #20) by Antonio Gallo posted on 7/7/2015 at 10:27 PM

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

Comment 39 by Itzik Elyahou posted on 4/29/2016 at 3:51 PM

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?

Comment 40 (In reply to #39) by Raymond Camden posted on 4/29/2016 at 8:29 PM

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!)

Comment 41 by Harpi posted on 5/2/2016 at 1:03 PM

Hi Ray,
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?

Thanks!

Comment 42 (In reply to #41) by Raymond Camden posted on 5/2/2016 at 1:07 PM

You should be using the *App* option, not Website.

Comment 43 by Akash Pal posted on 5/16/2016 at 9:23 AM

Is there a way to display all these charts within the app using google analytic embedded api?

Comment 44 (In reply to #43) by Raymond Camden posted on 5/16/2016 at 10:22 AM

Did you try? :) I don't know how well their Embedded API works on mobile.

Comment 45 (In reply to #44) by Akash Pal posted on 5/16/2016 at 1:27 PM

I have been looking at this
https://ga-dev-tools.appspo...
and there are many issues ; such as
https://github.com/googlean...
So I had to use rectify a lot of things. Thought still not over.

Comment 46 (In reply to #45) by Raymond Camden posted on 5/16/2016 at 2:21 PM

Cool - well - let me know.

Comment 47 by Akash Pal posted on 5/30/2016 at 6:02 AM

Whats the best plugin for google analytic in cordova?
I found the following three; have you implemented any one successfully:

https://github.com/phonegap...

https://github.com/cmackay/...

https://github.com/danwilso...

Comment 48 (In reply to #47) by Raymond Camden posted on 5/30/2016 at 6:06 PM

Sorry - I haven't used any of them.

Comment 49 by ASK2GURUJI posted on 9/1/2017 at 11:24 AM

sir can you send project zip file on ashokpunethaa@gmail.com

Comment 50 (In reply to #49) by Raymond Camden posted on 9/1/2017 at 1:52 PM

No - I've included the code above - that should be all you need.