Add Google Analytics to a Chrome Extension

Question

In order to add google analytics to a chrome extension the official docs provide the following snippet:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;   ga.src = 'https://ssl.google-analytics.com/ga.js';   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();

But google also recommends to migrate from ga.js to analytics.js.

ga.js is a legacy library. If you are starting a new implementation, we recommend you use the latest version of this library, analytics.js. For existing implementations, learn how to migrate from ga.js to analytics.js.

After following carefully the migration guide and upgrading the content security policy with the new script ( from https://ssl.google-analytics.com/ga.js to https://www.google-analytics.com/analytics.js ), it simply didn't work, without showing any error message.

Any suggestion welcome,

Oblast

See the Google Analytics documentation for adding the script tag and sending custom events, developers.google.com/analytics/devguides/collection/… Also make sure that you have added the UA-ID in your chrome extension webmaster page. – Servais

https://mcmap.net/q/746183/-content-script-tracking-with-google-analytics – Mehta

this is the official documentation from google themselves for this. – Bidle

Answer 1

My solution is based on the official docs: https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference

But slightly modified:

(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');

ga('create', 'UA-XXXXX-Y', 'auto');

// Modifications: 
ga('set', 'checkProtocolTask', null); // Disables file protocol checking.
ga('send', 'pageview', '/popup'); // Set page, avoiding rejection due to chrome-extension protocol 

Hotchpot

@Oblast you should definitely accept this answer. The last two lines really did the trick (checkProtocolTask and forcing a page path when sending pageview). – Imide

Somehow this doesn't work for me. I got the following error: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://www.googletagmanager.com". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx'), or a nonce ('nonce-...') is required to enable inline execution. Refused to load the script 'https://www.google-analytics.com/analytics.js' because it violates the following Content Security Policy directive: "script-src 'self' https://www.googletagmanager.com". – Edie

@Edie You need to configure also content_security_policy in your manifest – Hotchpot

Unfortunately, Google Analytics v4 (GA4) does not support setting checkProtocolTask yet. More info - issuetracker.google.com/issues/174954288 – Theater

Answer 2

This will work great for those of you using react: https://github.com/lxieyang/chrome-extension-boilerplate-react

// manifest.json

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

// AnalyticsProvider.jsx

import { useEffect } from 'react';

export default function AnalyticsProvider() {
  const initAnalytics = () => {
    setTimeout(() => {
      const gaPlugin = _gaq || [];
      gaPlugin.push(['_setAccount', 'XX-XXXXXXXXXX-X']);
      gaPlugin.push(['_trackPageview']);
    }, 2000);
  };

  useEffect(() => {
    (function() {
      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = 'https://ssl.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
      initAnalytics();
    })();
  }, []);

  return null;
}

// Popup.jsx (or any other page you choose)

import AnalyticsProvider from './AnalyticsProvider';

...

return (
    <div className={classes.root}>
    ...
      <AnalyticsProvider />
    ...
    </div>
  );

Atwood

Please consider adding some explanation and details to your answer. While it might answer the question, just adding some code does not help OP or future community members understand the issue or solution. – Negotiation

FYI, this was throwing a Uncaught ReferenceError: _gaq is not defined in my console. I added a var _gaq = _gaq || []; just before the const gaPlugin cand that seemed to clear it. – Strainer

Answer 3

Did you make sure to put the analytics script into a separate javascript file?

Google Chrome extensions won't execute inline JS, see https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution

Weariful

Answer 4

For using google analytics with mv3 the easiest way is to use measurement protocol. In short, it allows you to send event tracking to Google Analytics through a normal POST call.

Check this answer - https://mcmap.net/q/746184/-add-google-analytics-into-a-chrome-extension-using-manifest-v3

Locke

Answer 5

Try to use the following snippet for async tracking, here the docs

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

Anabel

Answer 6

[EDIT] As per the comments below, this solution does not work with Manifest V3.

The Chrome Extensions documentation has a tutorial explaining how to do this: developer.chrome.com/docs/extensions/mv3/tut_analytics.

Update your manifest:

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

Include JavaScript like the following:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Track events as usual:

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

Emirate

This does not work. To begin with, the CSP format is wrong. in V3 it is an object as opposed to a string, as explained here: developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/… – Pelaga

You're right — and unbundled scripts aren't allowed in Manifest V3: developer.chrome.com/docs/webstore/program_policies/…. I've added a note to my answer. – Emirate