Add Google Analytics To A Chrome Extension

October 26, 2023 Post a Comment

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.pus

Solution 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*newDate();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

Solution 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';

exportdefaultfunctionAnalyticsProvider() {
  constinitAnalytics = () => {
    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();
    })();
  }, []);

  returnnull;
}

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

importAnalyticsProviderfrom'./AnalyticsProvider';

...

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

Solution 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

Solution 4:

[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:

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

Solution 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=+newDate;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script><scriptasyncsrc='https://www.google-analytics.com/analytics.js'></script>

javascript dox