Using Google Analytics on a Chrome extension

I recently built a Chrome extension called Linksmith (more information here) and hooked it up to Google Analytics for some very basic usage information. It turned out to be a bit trickier than previous times I’ve added Analytics to websites as Chrome extensions are a bit different (security settings and the ‘chrome://’ protocol).

There’s an official tutorial available that you should use to get going. If it works for you, congrats! I wasn’t so lucky though. I saw a back and forth with the service under the debugger, but the request to get the critical __utm.gif file wasn’t happening. If you find yourself in the same boat, read on in case the code I ended up using works for you as it did for me.

First, add the following line to your extension’s manifest.json file:

"content_security_policy": "script-src 'self' https://www.google-analytics.com; img-src *; object-src 'self'",

Next up is the JavaScript code. This is the code that ended up working for me:

var telemetry = linksmith.factory('telemetry', function () {

  /* jshint ignore:start */ 
  (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');
  /* jshint ignore:end */

  ga('create','UA-00000000-0', 'auto');
  ga('set', 'checkProtocolTask', function(){});

  return {
    logPageView: logPageView,
    logEvent: logEvent
  };

  function logPageView(pageFileName) {
    ga('send', 'pageview', pageFileName);
  }

  function logEvent(eventName) {
    ga('send', 'event', 'category', eventName);
  }
});

Some things to note:

  • The call to set the ‘checkProtocolTask’ function is something I learned from David Simpson’s post on this same topic. His post was key for me to get it working. Thanks, David!
  • The URL to the GA script isn’t the one recommended in Google’s tutorial (‘https://ssl.google-analytics.com/ga.js’). I just couldn’t get that one to work. However, note that the URL that did work is using https.
  • I had to add img-src *; to the line in the manifest file.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.