使用 manifest v3 将 Google Analytics 添加到 Chrome 扩展程序中

Question

使用 manifest v3 将 Google Analytics 添加到 Chrome 扩展程序中

javascriptgoogle-chrome-extensiongoogle-analyticsmanifest.json

11

有没有可能在使用manifest v3的Chrome扩展中添加Google Analytics？我该怎么做？

我在stackoverflow上找到了这篇文章：Add Google Analytics to a Chrome Extension，所以我尝试了被接受答案中提供的代码，使用了

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

我将“https://ssl.google-analytics.com”添加到我的manifest.json中，但是在加载扩展程序时出现错误：'content_security_policy.extension_pages'：指令'script-src'中的不安全CSP值“https://ssl.google-analytics.com”。

我感觉目前似乎无法使用谷歌分析工具来跟踪Chrome扩展程序，但很奇怪的是，在Chrome网上商店的控制台中，我们可以看到这个字段：https://imgur.com/a/PBHGOvu

我错过了什么吗？

- Gauthier T.

你是在尝试在service_worker或content_script中使用GA吗？ - Kenny Lim

我正在使用Manifest V3，因此它是一个service_worker。Manifest V3不允许content_script。 - Gauthier T.

1

MV3不允许后台脚本，但它支持content_script。 - Kenny Lim

对不起，我之前混淆了background_script和content_script。我必须使用service_worker，因为我的扩展程序不与网页交互，并且应该在Chrome处于后台时运行。 - Gauthier T.

顺便提一下，所提到的截图仅适用于Chrome网上应用店，这意味着它跟踪扩展安装/卸载的次数以及用户来自哪些操作系统和国家/地区，但是仅限于此。它不会跟踪扩展本身或任何其他后台/内容脚本中的事件，因此，此字段仅适用于您的扩展程序的Chrome网上应用店。 - user7607751

这是来自谷歌官方的官方文档。 - Gangula

2个回答

4

我使用以下方式将Google Analytics添加到override.html（chrome_url_overrides）或popup.html中，适用于Manifest 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);
}

我希望这对你有所帮助。

- Morteza Ebrahimi

还在工作吗？我担心本地的ga.js文件会在一段时间后与Google Analytics服务器不匹配。 - Dee

1

是的，我会定期更新 ga.js。 - Morteza Ebrahimi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sanuj Bansal · Accepted Answer

为了在mv3中使用Google Analytics，最简单的方法是使用测量协议(Measurement Protocol)。简而言之，它允许您通过普通的POST调用向Google Analytics发送事件跟踪信息。

以下是我用来跟踪点击/其他事件的设置：

1. 用户在扩展中点击按钮 2. 内容脚本/popup.html通过消息传递(Message Passing)将要记录的事件发送给服务工作者(background.js)。 3. 服务工作者使用fetch()将事件发布到Google Analytics

以下是运行在服务工作者中的一些示例代码：

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。