Add Google Analytics to a Chrome Extension

问题

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,

回答1:

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>

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/48560583/add-google-analytics-to-a-chrome-extension

标签

javascript

google-chrome-extension

google-analytics