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 wondering if it was possible to get Google Analytics by treating the app like a normal webpage and putting some javascript in the head of my page.

Is there a better way to do this? and is the Phonegap Google Analytics THAT much better than what I'm trying to do?

Answer 1

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 2

[edit] Google Analytics now works with localstorage in hybrid apps.

Google Analytics now have an options explained here to use LocalStorage instead of cookies and there is also a hack to make it work in webviews (file:// urls). So instead of using the code I suggested before, you can just do this :

// THIS IS FOR LOCALSTORAGE
var GA_LOCAL_STORAGE_KEY = 'ga:clientId';
ga('create', 'UA-XXXXX-Y', {
  'storage': 'none',
  'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
});
ga(function(tracker) {
  localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
});

// THIS IS FOR FILE URL SUPPORT
ga('set', 'checkProtocolTask', function(){ /* noop */});

// And then as usual...
ga('send', 'pageview');

previous answer content :

The pokki solution suggested by Alex is working fine with a few adjustments to remove the need of Pokki.

I created a git project for this cleaned-up version here :

https://github.com/ggendre/GALocalStorage

Works great on android 4.1 and ios6, I will test more device very soon. Hope this helps ! :)

Answer 3

This is February 2017 and there is no need to edit analytics.js, nor for a library or plugin anymore, or at least I had no need for them. Many things that were said in the past years are deprecated or just obsolete, so here is my up-to-date comprehensive guide.

1. The config.xml file

In your config.xml, you must allow the cross-site request:

<access origin="https://www.google-analytics.com" />

2. The HTML

In your CSP meta tag, if you choose to have one, you must also allow calls to Google. It may look like:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' https://ssl.gstatic.com https://www.google-analytics.com;">

3. The javascript

Here is the commented code for a webapp that can run both in the browser and in a Cordova packaged app. You can ignore the else block if you don't care about the browser.

// the default GA code, nothing to change
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

var fields = {
  // note: you can use a single tracking id for both the app and the website,
  // don't worry it won't mix the data. More about this in the 3rd section
  trackingId: 'UA-XXXXXXXX-Y'
};

// if we are in the app (the protocol will be file://)
if(document.URL.indexOf('http://') !== 0){

  // we store and provide the clientId ourselves in localstorage since there are no
  // cookies in Cordova
  fields.clientId = localStorage.getItem('ga:clientId');
  // disable GA's cookie storage functions
  fields.storage = 'none';

  ga('create', fields);

  // prevent tasks that would abort tracking
  ga('set', {
    // don't abort if the protocol is not http(s)
    checkProtocolTask: null,
    // don't expect cookies to be enabled
    checkStorageTask: null
  });

  // a callback function to get the clientId and store it ourselves
  ga(function(tracker){
    localStorage.setItem('ga:clientId', tracker.get('clientId'));
  });

  // send a screenview event
  ga('send', {
    // these are the three required properties, check GA's doc for the optional ones
    hitType: 'screenview',
    // you can edit these two values as you wish
    screenName: '/index.html',
    appName: 'YourAppName'
  });
}
// if we are in a browser
else {

  ga('create', fields);

  // send a pageview event
  ga('send', {
    // this is required, there are optional properties too if you want them
    hitType: 'pageview'
  });
}

3. Your GA account

• To monitor the traffic of the mobile app, create a view of the App type.

If you don't need to monitor the traffic of your web app from a website, you can stop reading here, otherwise read on. I assume you are using a single account for the tracking of both the website and the app.

• Apply the custom filter named "Application? => yes" on the created view so that it will only show the screenview hits. There is an official guide here
• Then, to track the traffic from the website, create a second view of the Website type. Apply a custom filter "Application? => no" on it.
• If you want a merged view of your traffic online and in-app, create a third view of the App type. By default (without filter), it will show all data.

Additional notes

• Everything goes over https now, no need for the http protocol anymore in your <access> and CSP
• Be aware that writing *.google-analytics.com in the CSP would not work. Although that policy works in Chrome (56), it doesn't in Cordova (5.6.0)
• Google analytics does not require any application permissions like ACCESS_NETWORK_STATE or ACCESS_WIFI_STATE like I've read elsewhere
• All of this was tested with an Android app (I expect it to work in iOS apps as well), with the Crosswalk plugin installed

Answer 4

I was using Ionic app (based on cordova) as a mobile website and GA was working for it. When I shipped the same app to native ios, it stopped working.

Issue 1.
On checking the logs of simulator, found that GA was not being loaded correctly. It was trying the load file://. To fix this, I prepended https: to GA url under

(window,document,'script','//www.google-analytics.com/analytics.js','ga')

Issue 2. Google by default aborts the request if the page protocol is not http or https. To fix this

ga('set', 'checkProtocolTask', null);

And you should be set. After making these changes, I was able to confirm the events on GA. Hope it helps you too.

Answer 5

The year is 2019 the month November, Google keeps updating their APIs, "best" pratices and etc. without ANY good documentation or backward compatibility.

Here is what I did for my solution I used combination from two of the answers here.

Before I start IF you are reading this and you are having problem with cordova's google analytics/ firebase plugins JUST LEAVE THEM, when using webview you don't need any of the plugins.

1) First you have to go to the Google Analytics and create a new "Property" that will measure "Website" activity (who knows by the time you are reading this how those will be called but everything should be in the "Admin" part of the panel).

One of the questions that comes to mind here is "But it wants url, I don't have url I am making Cordova App"

And yes you are right, for the URL I used my app's API (Which means most likely any url you enter there will work)

2) Then Follow the instructions in the answer of @Louis Ameline which is this one With that you will have the script loaded in your app and ready for usage.

3) By this time now if you run your app in browser everything should be fine and you probably will be able to see in the "Live analytics" that there is 1 online user.

4) Now for this to work in Webview you should follow the answer of @Guillaume Gendre (the updated one) here. I just copy pasted the code (of course with my trackingId) and now when I build the application and run it on my Android it works as expected and the analytics are sent.

---

I hope my solution actually helps someone and saves some time. Just leave all plugins because they lead to a deep hole of unsuccessful builds that just does not end because of version problems.

Also my App is React based but that should not matter at all, it should work with all frameworks and libraries because this is pure js. I suggest you use that kind of solution for this type of problems because it is not connected to any specific libraries.

Answer 6

Didn't work for me. The problem that google code uses cookies and it doesn't work with file:// urls.

I found good implementation that uses localStorage in place of cookies: https://developers.pokki.com/docs/tutorials.php

Answer 7

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 8

this phonegap plugin will help to integrate the google analytics in phonegap app. Read this blog to learn more how to integrate google analytics in phonegap. you can also download the working demo code from here.

Answer 9

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.

Answer 10

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 11

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 12

NOTE: Google Analytics Client Traking ID generated for mobile platform only supports for IOS and Android.So if you want to Track your google analytics,Be Sure you have Created it for website. Only Tracking ID for website work with phone gap all platform apps. You can then Simply download GALocalStorage from below link and then place it in you js folder under www folder

www
 |__
    js
      |__
          GALocalStorage.js

Then write the below code under your < head> tag,and its start showing Realtime active Users in your dashboards.

https://github.com/ggendre/GALocalStorage

       <script>
        ga_storage._setAccount('UA-XXXXXXXX-X'); //Replace with your own
        ga_storage._trackPageview('Home Screen');
        </script>

Answer 13

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 14

I would like to add my 2 cents. As everybody here I had no luck with analytics plugins, so started to look for pure javascript solution.

I followed this answer and it is working for me. Means, I can see in Google Analytics Realtime separated user activity from browser and from iOS simulator. (Have not tested Android yet.)

I changed script a little.

1)

// if we are in the app (the protocol will be file://)
if(document.URL.indexOf('http://') !== 0){

changed to be

if(document.URL.indexOf('http') !== 0){

to include https case.

2) Unrelated to where I am: in browser or mobile app, I track events like this:

ga('send', 'event', '<myAppName>', '<eventName>');

so I can track different applications under same Analytics Property.

In Google Analytics I created one Property and under this Property three Views. One of type Web and two of type Mobile.

Applied custom filter(s) to each view:

To iOS view applied Include filter on field Operating System with value iOS

To Android view applied Include filter on field Operating System with value Android

To Web view applied two Exclude filters on field Operating System with values Android and iOS

Happy cordoving!