将 Google Analytics 添加到 Chrome 扩展程序

Question

为了将谷歌分析添加到 chrome 扩展，official docs 提供以下 sn-p：

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

但是google也推荐to migrate from ga.js to analytics.js。

ga.js 是一个遗留库。如果您要开始新的实施， 我们建议您使用此库的最新版本 analytics.js。 对于现有实现，了解如何从 ga.js 迁移到 分析.js。

仔细遵循migration guide 并使用新脚本升级内容安全策略（从https://ssl.google-analytics.com/ga.js 到https://www.google-analytics.com/analytics.js），它根本不起作用，没有显示任何错误消息。

欢迎任何建议，

Answer 1

我的解决方案基于官方文档：https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference

但稍作修改：

(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 

Answer 2

这对于那些使用 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（或您选择的任何其他页面）

import AnalyticsProvider from './AnalyticsProvider';

...

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

Answer 3

您是否确保将分析脚本放入单独的 javascript 文件中？

Google Chrome 扩展程序不会执行内联 JS，请参阅 https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution

Answer 4

[EDIT] 根据下面的 cmets，此解决方案不适用于 Manifest V3。

Chrome 扩展文档有一个说明如何执行此操作的教程：developer.chrome.com/docs/extensions/mv3/tut_analytics。

更新您的清单：

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

包括 JavaScript，如下所示：

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

像往常一样跟踪事件：

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

Answer 5

尝试使用以下 sn-p 进行异步跟踪，这里是 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>