试图在聚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
创建完account ,会得到对应的Google Tag Manager代码
3、在Chrome扩展页面包含Google Tag Manager代码
以下GTM-XXXXXXX 为自己对应的账号
以下代码拷贝到单独的JavaScript代码,例如gtm.js 中
<!-- 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
<script src="/js/gtm.js" type="text/javascript"></script>
注意:之所以要单独放到一个js文件中,因为chrome扩展禁止inline JavaScript。
以下代码拷贝到页面的<body>后面
// Additionally, paste this code immediately after the opening <body> tag: <!-- 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页面结构大致如下
<head> ... <script type="text/javascript" src="gtm.js"></script> </head> <body> <!-- 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) --> ...
4、调整manifest.json文件
主要在content_security_policy 的 script-src 部分增加google tag manager和google-analytics.com的访问权限
{ "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
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中做了任何调整操作后,一定要注意记得发布操作。
然后可以在Google Analytics中实时查看Chrome扩展的的统计数据了。
转载请注明:虚拟号之家 » Chrome 扩展增加Google Analytics支持