Chrome 扩展增加Google Analytics支持
试图在聚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 中
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 | // 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页面结构大致如下
1 2 3 4 5 6 7 8 9 10 | <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的访问权限
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
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扩展的的统计数据了。