This my main.js file

/* Google Analytics */
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + 
      '.google-analytics/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
var _gaq = _gaq || [];

function _track(page){
    try {
        _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); /* But with my correct one */
        console.log('google analytics:' + page);
        if (page != '') {
            _gaq.push(['_trackPageview', 'Mobile: '+page]);
        } else {
            _gaq.push(['_trackPageview'],'Mobile');
        }
    } catch(err) {
        console.log(err);
    }
}

So Any time I want to track any page I use:

_track('/top-rated/');

And I can see this log:

google analytics: /top-rated/

But I can't see the log in the real time google analytics page

By the way I have in my config.xml

<access origin=".*"/>

This my main.js file

/* Google Analytics */
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + 
      '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
var _gaq = _gaq || [];

function _track(page){
    try {
        _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); /* But with my correct one */
        console.log('google analytics:' + page);
        if (page != '') {
            _gaq.push(['_trackPageview', 'Mobile: '+page]);
        } else {
            _gaq.push(['_trackPageview'],'Mobile');
        }
    } catch(err) {
        console.log(err);
    }
}

So Any time I want to track any page I use:

_track('/top-rated/');

And I can see this log:

google analytics: /top-rated/

But I can't see the log in the real time google analytics page

By the way I have in my config.xml

<access origin=".*"/>

• javascript
• cordova
• google-analytics

• blastam.com/blog/index.php/2013/07/… – Derek 朕會功夫 Commented Nov 22, 2013 at 16:58

3 Answers 3

The reason why GA does not work in device is because google analytics expects the protocol to be HTTP or HTTPS, but when you load the app the protocol is file:/// since you are opening a file from the device in WebView.

In such a case GA does not allow cookies to be stored & shuts down. Also there is a new version of ga.js called analytics.js(also called Universal Analytics), which is basically an advanced version. You can find the difference between the versions here - http://www.cardinalpath.com/which-version-of-google-analytics-is-right-for-you-determine-whether-you-should-upgrade-to-universal-analytics/

If you would like to continue using ga.js then you can use this -
https://github.com/ggendre/GALocalStorage
It is a GitHub project which resolves the file:/// problem.

If you would like to use Universal Analytics then you can use this -
http://www.blastam.com/blog/index.php/2013/07/ga-universal-analytics-phonegap-mobile-apps/
It is a guide to make it compatible with Phonegap

With Phonegap, you open With file URI, and normally that sets the origin property to null, even though it depends by browser. That property needs to be specified for most web servers to accept the request, considering the fact that it originated from an AJAX request, as in this case. It could also be a issue with cookies, which is probably the problem.

In that case, this url would work: https://github.com/ggendre/GALocalStorage. To get it to work, you have to enable localstorage for Phonegap.

If it is an issue with the request, you could add a 1 square pixel png file with no content, and that will give you an opportunity to collect data when it reaches your server. The only issue here is that this will not allow you to use Google Analytics.

To overcome this factor, you can setup a web service and change all web requests in Google Analytics to point to your server and you can proxy those requests back to the google servers in order to overcome this issue.

In your server, you need this property set to get the access from Phonegap:

 Access-Control-Allow-Origin: *

You could use something like Node.JS and the node-http-proxy available from the NPM package manager, which should be easy, considering it is all javascript. After that, you just need to convert all references to Google's Analytics Domain to point to your web server inside of your local copy of the Google Analytics file.

All you have to do is change the domain part of the urls in your Google Analytics javascript file to point to your server and take that domain and put it inside the Node.JS proxy which might not be as hard as most people think.

If you want more clarity, feel free to message me. I might be busy during Thanksgiving, but I will try to check as much as possible.

You can use a cordova plugin for that which makes life easy..

http://www.raymondcamden.com/index.cfm/2013/3/28/Google-Analytics-and-PhoneGap