Javascript 将Google Analytics添加到Chrome扩展中

为了将google analytics添加到chrome扩展中，请提供以下代码段：

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

但谷歌也建议

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

在仔细遵循并使用新脚本升级内容安全策略后（从

https://ssl.google-analytics.com/ga.js

至

https://www.google-analytics.com/analytics.js

），它根本不工作，没有显示任何错误消息

---

欢迎任何建议，

尝试使用以下代码段进行异步跟踪，这里是

window.ga=window.ga | |函数（）{（ga.q=ga.q | |[]）.push（参数）}；ga.l=+新日期；
ga（“创建”、“UA-XXXXX-Y”、“自动”）；
ga（‘发送’、‘页面浏览’）；

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

---

Google Chrome extensions不会执行内嵌JS，请参见

我的解决方案基于官方文档：

但稍作修改：

(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 

---

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

从“/AnalyticsProvider”导入AnalyticsProvider；
...
返回(
...
...
);
参见谷歌分析文档中添加脚本标记和发送自定义事件，同时确保在Chrome扩展WebM父页中添加了U-ID。请考虑向您的答案添加一些解释和细节。虽然它可能会回答这个问题，但仅仅添加一些代码并不能帮助OP或未来的社区成员理解这个问题或解决方案。@locropulenton您绝对应该接受这个答案。最后两行确实起到了作用（
checkProtocolTask
并在发送
pageview
时强制设置页面路径）。不知怎的，这对我不起作用。我遇到以下错误：
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script src'self”https://www.googletagmanager.com". 启用内联执行需要'unsafe inline'关键字、哈希（'sha256-xxx'）或nonce（'nonce-…'）。拒绝加载脚本的https://www.google-analytics.com/analytics.js'因为它违反了以下内容安全策略指令：“script src'self”https://www.googletagmanager.com". 
@lzl124631x您还需要在清单中配置
内容安全策略
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;
}

import AnalyticsProvider from './AnalyticsProvider';

...

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