How do you integrate Universal Analytics in to Chrome Extensions?

Question

The chrome extension guide has a tutorial for the old analytics install: https://developer.chrome.com/extensions/tut_analytics.html

The instructions just say to link to the https version and update the manifest to allow loading scripts from that URL. So those should still apply to the new version. And in fact I can see the script loading from the server.

Once the script loads analytics does not properly initialize it self and never processes it's internal queue (ga.f) to send those events to the server. There is no error in the console. It's just quietly does nothing.

My guess is that the new Universal Analytics is just not set up to run in the the extension environment but the universal docs make no mention of that: https://developers.google.com/analytics/devguides/collection/analyticsjs/

does anyone know if it's even possible to add Universal Analytics to an extension yet and when that might be added?

Answer 1

I wrote up a blog post on this - How to add Google’s Universal Analytics tracking to a Chrome extension

Here's the guts of it:

// Standard Google Universal Analytics code
(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'); // Note: https protocol here

ga('create', 'UA-XXXXX-YY', 'auto');
ga('set', 'checkProtocolTask', function(){}); 
ga('send', 'pageview', '/options.html');

There are 3 points I’d particularly like to highlight:

• Specify “https” at the start of the script address to match with the listing in the manifest.json file
• Override checkProtocolTask with an empty function
• Send a virtual pageview by specifying the path – /options.html – otherwise Google Analytics will reject a URL in the format chrome-extension://gdocgfhmbfbbbmhnhmmejncjdcbjkhfc/options.html

Answer 2

There's an issue for that on Google code: The solution is to pass analytics your own protocol check function or simply null for no checking, in an official way.

This has to come after ga('create', ...) :

ga('set', 'checkProtocolTask', null); // Disable file protocol checking.

So you don't need to modify the original analytics.js script. Just include the standard tracking code snippet (dont' forget to add the "https:" prefix) and add "https://www.google-analytics.com" to your Content Security Policy.

A note to ayal gelles' solution: It is not necessary to add chrome-extension://... to the Content Security Policy since it's already included in the 'self' statement. Also, instead of loading the script via hardcoded URL you should use chrome.runtime.getURL("path/to/analytics.js"). This way you don't need to know your extension's ID, Chrome will fill it in for you.

Answer 3

Regarding new analytics.js (as opposite to old ga.js) this example works for me:

function setupGoogleAnalytics() {
  if (!window.ga) {
    (function(){
      window.ga = function() {
        (window.ga.q = window.ga.q || []).push(arguments);
      }, window.ga.l = 1 * new Date();
      var tag = 'script';
      var a = document.createElement(tag);
      var m = document.getElementsByTagName(tag)[0];
      a.async = 1;
      a.src = 'https://www.google-analytics.com/analytics.js';
      m.parentNode.insertBefore(a, m);
    })();
    ga('create', 'UA-XXXXXXX-Y', 'auto');
    ga('set', 'checkProtocolTask', null);
  }
}

Please note that you need to add following content_security_policy snippet to the manifest.json:

{
...
  "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"
...
}

Answer 4

I managed to get Google Analytics up and running using Chrome Platform Analytics (CPA). The only confusing part is how to set up a property in the administration console of GA. I had to create a Mobile Application property, which is not too intuitive.

Also, I created an options page that lets users disable analytics if desired, to comply with the opt-out requirements.

I hope that helps!

Answer 5

I just encountered this and seem to have hacked my way through. This might break at some point or not be fully functional, but here goes:

• Download the GA uglified+minified source code from here: https://www.google-analytics.com/analytics.js, put in your chrome extension folder, where it could be later loaded by the background page.

• In it, find a function that looks something like this:

function Oa(){var a=M[B][E];if("http:"!=a&&"https:"!=a)throw"abort";}. 

This is the "point of failure" since our "protocol" is "chrome-extension:" and not either of the two.

• So.. change this function to be something like:

function Oa(){var a=M[B][E];if("chrome-extension:"!=a&&"http:"!=a&&"https:"!=a)throw"abort";}

• add a "Content Security Policy" of this sort to your manifest file, make sure it points to YOUR LOCAL version of analytics.js you have just modified:

"content_security_policy": "script-src 'self'  chrome-extension://EXTENSIONID/path/to/analytics.js;  object-src 'self'",

• Change the GA snippet to ALSO point to that same file, something like this:

(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','chrome-extension://EXTENSIONID/path/to/analytics.js','ga');

hope this helps.

Answer 6

There's a way to use the Measurement Protocol to communicate with Google Analytics. I have developed a script for that :

https://github.com/melalj/universal-ga-extension