How do you integrate Universal Analytics in to Chrome Extensions?

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

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.

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.