How to use Google Analytics with Phonegap without a plugin?

Question

I am making an app and I want to get analytics from the users. I tried to use the Phonegap Plugin, but I didn\'t have any luck trying to implement it.

I was wonderin

Answer 1

I have implemented the segment.io - analytics.js library in a HTML5/meteor application.

I have no analytics plugin in phonegap (3.1). Worked immediately for iOS.

After implementation, analytics from the Android app did not display for about 4 hours. It then started working without changes to phonegap or meteor settings.

Hopefully this helps someone avoid a few hours of looking for a mystery bug.

Note: Make sure correct access origin is set up e.g. add

Answer 2

Quick and dirty solution. Use can use a light-hidden iframe like this;

<iframe src="http://www.yourwebsite.com/userControls/GoogleAnalytics.html?param=extraParamHere" style="visibility: hidden"></iframe>

And every time you request a page in the PhoneGap app, reload this iframe to initialize the track.

Answer 3

You can use GALocalstorage library, and it works fine on mobile devices

It's easy to setup

<script type="text/javascript" src="js/libs/GALocalStorage.js"></script>
<script>
    ga_storage._setAccount('UA-37167XXX-1'); //Replace with your own
    ga_storage._trackPageview('/index.html');

</script>

and that is it, no modification or anything else.

You need to create Website Account in Google analytics to use this library

Library on GitHub

Answer 4

For me it turned out that no plugin is needed! I have Angular 8 app wrapped in Cordova (so similar use case as with Ionic) I registered new web site in Google Analytics. I modified code form GA to look like this:

const gaScript = document.createElement('script');
        gaScript.src = "https://www.google-analytics.com/analytics.js";
        gaScript.type = "text/javascript";
        document.getElementsByTagName('head')[0].appendChild(gaScript);
        gaScript.onload = (ev: Event) => {
            const GA_LOCAL_STORAGE_KEY = 'ga:clientId';
            window['ga']('create', 'XXXX-XXXXX', {
                'storage': 'none',
                'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
            });
            window['ga'](function(tracker) {
                localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
            });

            // THIS IS FOR FILE URL SUPPORT
            window['ga']('set', 'checkProtocolTask', function(){ /* noop */});
            console.log('GA OK!')
        }

And then I can use GA in regular way: window['ga']('send', 'pageview', screenName); This is because there is no automatic tracking of page changes while serving using file:// protocol.

This solution is very handy as it is DRY, because I have just one way to embed Google Analytics in my app for both hybrid and hosted versions.

Answer 5

Check out the video to see it in action:

http://screencast.com/t/6vkWlZOp

After some research, I found a solution. I came across this thread on the Phonegap Google Group: https://groups.google.com/forum/#!msg/phonegap/uqYjTmd4w_E/YD1QPmLSxf4J (thanks TimW and Dan Levine!) In this thread I found that it is possible to use Google Analytics without a plugin. All you have to do is download the ga.js file from Google http://www.google-analytics.com/ga.js (just save the page into your www folder)

Then modify the ga.js file by adding one character to it. Search the ga.js file for the word "file:" and replace it with "_file:".

In the thread I linked to above, "TimW" explains the reasoning for this:

Essentially, Google Analytics won't work if its being used from a file:/// url. In iOS/PhoneGap this is the case. In order to solve this problem you must first download the ga.js file from google and include it as part of your local build. You'll notice the this file is obfuscated. Search the file for the string "file:" which should occur only once. When you find it, add an underscore to the beginning (so it becomes "_file:"). This prevents it matching the protocol of the page location (which is "file:").

After you added one character to the ga.js file, simply include this following in the top of your page:

<script type="text/javascript" src="ga.js"></script>
    <script>
 var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-YOUR_ID_HERE']);
    _gaq.push(['_setDomainName', 'none']);
    _gaq.push(['_trackPageview', 'NAME_OF_PAGE']);
    </script>

I tested this on the simulator, and I got a proof that it was working using the Real-Time view in Google Analytics. The simulator was working on iOS 5.0. My phone is still on iOS 4.2, and when I tested it on my device, it didn't show up on the Real Time tracking.

In the thread, someone mentioned the same issues with Android 4.0+... Hopefully there will be a better solution for this in the future but for now this is the easiest and least complicated way to get basic analytics for my app. It can't do offline tracking, but that's kinda creepy anyways.

Even though iOS 4 and Android users are a minority in the market (see pie chart):

http://static7.businessinsider.com/image/4fd65fac6bb3f7925700000f/chart-of-the-day-ios-vs-android-june-2012.jpg

I would stil like to get data from all OS's.

Answer 6

For anyone running into problems with Guillaume Gendre's great solution on Android 4.1 or another specific platform, this might solve them.

If your Android console logs show "Unknown Chromium error: 0", it's likely that you need to refine your access permissions in config.xml. I fixed my problem and described it here.