Gau*_* T. 11 javascript google-analytics google-chrome-extension manifest.json
是否可以使用清单 v3 将谷歌分析添加到 Chrome 扩展中？我怎样才能做到这一点 ？
我从 stackoverflow 找到了这篇文章：Add Google Analytics to a Chrome Extension，所以我尝试将代码放入接受的答案中，
"content_security_policy": {
"extension_pages": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}
进入我的manifest.json，但是当我加载我的扩展时，我收到了这个错误： 'content_security_policy.extension_pages': Insecure CSP value "https://ssl.google-analytics.com" in directive 'script-src'.
我觉得现在不可能将谷歌分析与 chrome 扩展一起使用，但这很奇怪，因为在 chrome 网上商店仪表板中，我们可以看到这个字段： https: //i.stack.imgur.com/RVv59.jpg
我错过了什么 ？
要将 google Analytics 与 mv3 结合使用，最简单的方法是使用测量协议。简而言之，它允许您通过正常的 POST 调用将事件跟踪发送到 Google Analytics。
这是我用来跟踪点击/其他事件的设置：
用户单击扩展中的按钮 内容 script/popup.html 使用消息传递向服务工作线程 (background.js) 发送一条消息，说明应记录该事件。Service Worker 使用 fetch() 将事件发布到 Google Analytics，下面是在 Service Worker 中运行的一些示例代码：
const ANALYTICS_PATH = "https://www.google-analytics.com/collect";
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST',
mode: 'no-cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: data
});
}
var gaParams = new URLSearchParams();
gaParams.append("v", 1);
gaParams.append("tid", "UA-XXXX-X");
gaParams.append("cid", xxxxx);
gaParams.append("t", "event");
gaParams.append("ec", "myEventCategory");
gaParams.append("ea", "myEventAction");
postData(ANALYTICS_PATH, gaParams)
注意：- 如果出现问题，此 api 不会给出响应代码，不应直接在产品上使用https://www.google-analytics.com/mp/collect，而应首先尝试https://www.google-analytics .com/debug/mp/collect。
附言。我从对此来源的评论中找到了这个解决方案：- https://www.indiehackers.com/post/how-to-add-google-analytics-with-manifest-v3-468f1750dc
我用这种方式将谷歌分析添加到清单V3中override.html(chrome_url_overrides)或popup.html在清单V3中：
override.html:
<head>
// 1- Download from 'https://ssl.google-analytics.com/ga.js' and use locally
<script src="./ga.js"></script>
// 2- Instead of use 'content_security_policy' property in 'manifest.json' add this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' http://www.google-analytics.com https://example.com ;style-src 'self' 'unsafe-inline' http://www.google-analytics.com https://example.com; media-src *;img-src *">
// or
<meta http-equiv="Content-Security-Policy" content="default-src *;img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;style-src 'self' 'unsafe-inline' *">
</head>
3-创建analytics-override.js：
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-01234567-89"]);
_gaq.push(["_trackPageview", "/override.html"]);
4进override.js：
window.onload = function(){
const scriptTag = document.createElement("script");
scriptTag.src = chrome.runtime.getURL("./analytics-override.js");
scriptTag.type = "text/javascript";
document.head.appendChild(scriptTag);
}
我希望它对你有帮助。
| 归档时间： |
|
| 查看次数： |
5224 次 |
| 最近记录： |