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

Answer 1

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

Answer 2

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 3

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 4

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 5

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 6

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