试图在聚BT浏览器扩展中增加Google Analytics支持,以方便对流量进行统计分析。
按照普通网站的套路,在页面中引用Google Analytics的远程js代码。发现没反应。
想起Chrome扩展对引用远程脚本有限制,再manifest.json中content_security_policy 的
script-src 部分增加把 https://www.googletagmanager.com
https://www.google-analytics.com 加入。仍然没反应。
查看官方文档、stackoverflow.com 搜索找了半天,还是未找到答案。
后来在 Deploy GTM In Your Chrome Extension 这篇文章找到了答案,是通过Google Tag Manager实现的。但文章对具体操作步骤说得不是很清楚,应该是假定目标用户对Google Tag Manager很熟悉。
为什么在Chrome 扩展中直接使用Google Analytics不管用?
由于Chrome 扩展中的页面的前缀都为 chrome-extension://,也即协议为 chrome-extension://
。而Google Analytics缺省只支持 http、https协议。因此直接在Chrome扩展的页面中使用Google
Analytics,对应的数据会被抛弃掉。
核心思路:
1、在 Google Tag Manager 增加新的账号和Tag,增加对 chrome-extension:// 的支持
2、在Google Tag Manager关联对应的Google Analytics
3、在Chrome扩展页面引用GTM脚本
4、在Google Analytics实时查看统计数据
具体操作步骤:
1、登录 Google Tag Manager
Google Tag Manager(GTM)主要用于广告商对多种渠道的广告代码进行统一管理和部署。
官网:https://tagmanager.google.com
2、在Google Tag Manager中新增Account
![](https://www.yeeach.com/wp-content/uploads/2020/11/04037d89e4cb3d976355.jpg)
创建完account ,会得到对应的Google Tag Manager代码
3、在Chrome扩展页面包含Google Tag Manager代码
以下GTM-XXXXXXX 为自己对应的账号
以下代码拷贝到单独的JavaScript代码,例如gtm.js 中
1 2 3 4 5 6 7 | <!-- Google Tag Manager -->
( function (w,d,s,l,i){w[l]=w[l]||[];w[l].push({ 'gtm.start' :
new Date().getTime(),event: 'gtm.js' }); var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!= 'dataLayer' ? '&l=' +l: '' ;j.async= true ;j.src=
'https://www.googletagmanager.com/gtm.js?id=' +i+dl;f.parentNode.insertBefore(j,f);
})(window,document, 'script' , 'dataLayer' , 'GTM-XXXXXXX' );
<!-- End Google Tag Manager -->
|
然后在chrome扩展的对应页面的<head>中包含gtm.js
1 | <script src= "/js/gtm.js" type= "text/javascript" ></script>
|
注意:之所以要单独放到一个js文件中,因为chrome扩展禁止inline JavaScript。
以下代码拷贝到页面的<body>后面
1 2 3 4 5 | <!-- Google Tag Manager (noscript) -->
<noscript><iframe src= "https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height= "0" width= "0" style= "display:none;visibility:hidden" ></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
|
最终chrome扩展的html页面结构大致如下
1 2 3 4 5 6 7 8 9 10 | < head >
...
< script type = "text/javascript" src = "gtm.js" ></ script >
</ head >
< body >
< noscript >< iframe src = "https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height = "0" width = "0" style = "display:none;visibility:hidden" ></ iframe ></ noscript >
...
|
4、调整manifest.json文件
主要在content_security_policy 的 script-src 部分增加google tag manager和google-analytics.com的访问权限
1 2 3 4 5 6 7 8 | {
"manifest_version": 2,
"name": "...",
"version": "...",
"content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com; object-src 'self'",
"description": "...",
...
}
|
5、新增TAG
Add a new Tag->Tag Configuration 的模板Type选择 Google Analytics:Universal Analytics
也可以选择其他模板,例如:Google Analytics:GA4 Configuration
![](https://www.yeeach.com/wp-content/uploads/2020/11/1ae89c82cf91852114fa.jpg)
Track Type:Page View
Google Analytics Settings:根据需要自定义一个
Tracking ID:这里填写对应Google Analytics账号的ID,从而与Google Analytics关联上。
在More Settings->Fields to set 栏目,新增 checkProtocolTask Field
Field Name: checkProtocolTask
Value: false
此参数,让Google Analytics 不检查请求协议类型,缺省情况下 Google Analytics只接收http、https协议的请求,而Chrome扩展页面的请求协议为chrome-extension://
在More Settings->Fields to set 栏目,新增 page Field
Field Name: page
Value: /some-custom-page-path/
value值可以直接写死为对应的URL,也可以使用Google Tag Manager内置的系统变量,其中
{{Page Path}} 为 Page Path
{{Page URL}} 为Page URL
{{Page Hostname}} 为Page Hostname
{{Referrer}} 为Referrer
例如对聚BT扩展的搜索页面:chrome-extension://ebcjepefognpfjhangkchdkloplllegh/results.html?from=popup
- protocol 为chrome-extension://
- hostname 为 ebcjepefognpfjhangkchdkloplllegh
- page path 为 /results.html?
- query parameters 为?from=popup
6、发布更新
在Google Tag Manager中做了任何调整操作后,一定要注意记得发布操作。
![](https://www.yeeach.com/wp-content/uploads/2020/11/e7d48f0b41ab452d5bb2.jpg)
然后可以在Google Analytics中实时查看Chrome扩展的的统计数据了。