Twitter: raymondcamden


Address: Lafayette, LA, USA

Google Analytics and PhoneGap

03-28-2013 20,357 views Mobile, Development 27 Comments

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.

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.

27 Comments

  • 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.ACCESSNETWORKSTATE" />

    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.ACCESSNETWORKSTATE" />
    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

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty