Chrome 扩展增加Google Analytics支持

jubt 2020-11-19 3705

试图在聚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扩展的的统计数据了。


最新回复 (0)
返回
发新帖