如何为Chrome扩展添加Google Analytics？及ga.js迁移至analytics.js指南

嘿，我来帮你搞定Chrome扩展里Google Analytics的迁移问题！官方早就建议从旧的ga.js升级到analytics.js了——毕竟ga.js已经是停止维护的旧库，analytics.js不仅性能更好，功能更全，还更适配现在的浏览器和扩展环境。

下面我把迁移的关键步骤和注意事项整理清楚，都是实际操作里踩过的坑，放心用：

一、先搞懂新旧代码的核心差异 #

原来的ga.js代码是这样的：

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

而新版analytics.js的代码结构完全不同，而且要适配Chrome扩展的特殊环境，不能直接用普通网页的代码。

二、迁移的具体步骤 #

1. 替换追踪代码 #

把旧代码换成下面的新版代码，注意两个关键点：

• 设置cookieDomain: 'none'：因为Chrome扩展的页面用的是chrome-extension://协议，常规的Cookie域名规则不适用，必须设为none才能正常追踪。
• 确保脚本来源是https://www.google-analytics.com/analytics.js，不要用http的，避免CSP报错。

新版代码示例：

(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-XXXXXXXX-X', {
  'cookieDomain': 'none'
});
ga('send', 'pageview');

2. 配置Chrome扩展的内容安全策略（CSP） #

在你的manifest.json里必须添加CSP规则，允许加载Google Analytics的脚本和发送数据，否则扩展会直接阻止请求。示例配置：

{
  "manifest_version": 3, // 如果你用的是manifest v2，把这里改成2就行
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://www.google-analytics.com; object-src 'self'"
  },
  // 其他扩展配置...
}

注意：如果是Manifest V2，CSP的写法是直接写字符串："content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"

3. 验证迁移是否成功 #

可以用Chrome的开发者工具（Application面板 -> Analytics）查看是否有正常的追踪请求发送，或者直接去Google Analytics的实时报告里看是否有数据进来。

三、额外注意事项 #

• 如果你有自定义事件追踪，比如按钮点击、功能使用统计，原来的_gaq.push(['_trackEvent', ...])要改成ga('send', 'event', ...)，比如：

  // 旧写法
  _gaq.push(['_trackEvent', 'Button', 'Click', 'Download']);
  // 新写法
  ga('send', 'event', 'Button', 'Click', 'Download');
  

• 如果你用的是Manifest V3，因为V3限制了远程脚本的加载，除了Google Analytics这种官方允许的，其他远程脚本都不能直接加载，不过analytics.js是被允许的，放心用。

内容的提问来源于stack exchange，提问作者locropulenton