Twitter: raymondcamden


Address: Lafayette, LA, USA

Google Analytics and PhoneGap

03-28-2013 22,205 views Mobile, Development 34 Comments

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.

34 Comments

These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • Nikolay #
    Commented on 03-30-2013 at 8:11 AM
    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.
  • Commented on 03-30-2013 at 8:13 AM
    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?
  • Nikolay #
    Commented on 03-30-2013 at 8:35 AM
    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.
  • Commented on 03-30-2013 at 8:49 AM
    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.
  • Commented on 04-01-2013 at 9:10 AM
    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
  • Commented on 04-01-2013 at 9:11 AM
    Did you use this one (https://github.com/phonegap-build/GAPlugin) instead of the one linked to from the docs?
  • Commented on 04-05-2013 at 10:30 AM
    Hey Raymond,

    Interesting post.
    I maintain an Android version of the GA plugin (https://github.com/DoersGuild/Cordova-Android-Anal...), 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
  • Michael #
    Commented on 04-08-2013 at 12: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.
  • Commented on 05-07-2013 at 3:46 PM
    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.com/analytics/devguides/...

    Thanks a lot for this article. The setup with web instead of app in GA saved our ass.
  • kim #
    Commented on 05-13-2013 at 8:04 AM
    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?
  • Commented on 05-13-2013 at 9:23 AM
    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.
  • Kim #
    Commented on 05-21-2013 at 9:24 AM
    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?
  • Commented on 05-21-2013 at 12: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.
  • Anna Mund #
    Commented on 05-28-2013 at 6:59 AM
    According to this blog post from Phonegap Build (https://build.phonegap.com/blog/important-update-t...), 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..
  • Commented on 05-28-2013 at 7:07 AM
    Thanks for sharing this Anna. I'm still planning an update, and this will help.
  • Javito Hertfy #
    Commented on 08-08-2013 at 10:18 AM
    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.
  • Commented on 08-08-2013 at 11:53 AM
    Yep, see the comment 2 above yours. :)
  • Commented on 01-14-2014 at 11:20 AM
    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...
  • Commented on 01-14-2014 at 11:32 AM
    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
  • Commented on 01-26-2014 at 1:07 PM
    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?
  • Commented on 01-26-2014 at 8:24 PM
    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.com/index.cfm/2014/1/22/Q...).
  • Kb #
    Commented on 03-10-2014 at 9:45 PM
    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
  • Kb #
    Commented on 03-10-2014 at 9:45 PM
    Nevermind your comment form is removing the underscores.
  • Commented on 03-11-2014 at 5:15 AM
    Yeah, sorry - I use it for italics. In the future, you could just use a URL for to a Gist. (Or pastebin.)
  • Kyle B #
    Commented on 03-11-2014 at 12: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.
  • Commented on 03-11-2014 at 12:55 PM
    Thanks for the warning about the subscribe. It does work in general, afaik, but sometimes emails get stuck.
  • Commented on 07-03-2014 at 2: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
  • Mohammad Umer Ashraf #
    Commented on 10-01-2014 at 5:25 AM
    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/danwilson/google-analytics-plug... 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
  • Vincent Row #
    Commented on 10-24-2014 at 3:59 AM
    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.
  • Vincent Row #
    Commented on 10-24-2014 at 4:57 AM
    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/GAPlugin/";). 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.
  • Commented on 10-24-2014 at 4:33 PM
    Vincent, thank you for sharing what solved your problem!
  • Commented on 11-17-2014 at 12:29 PM
    Thanks Vincent ... switching GA back to "app" got GA working for me too - using [https://github.com/phonegap-build/GAPlugin].
  • Commented on 11-18-2014 at 5:56 AM
    I'm going to edit the entry now so folks don't miss this.
  • Commented on 11-18-2014 at 2:48 PM
    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.com/nitobi/topics/gaplug...