本教程演示如何使用Google Analytics(分析)来追踪您的扩展程序的使用情况
本教程要求对编写 Google Chrome 浏览器的扩展程序有一定的了解。 如果需要有关如何编写扩展程序的信息, 请阅读 入门教程 。
还需要设置一个 Google Analytics (分析)帐户 来追踪您的扩展程序。
Note
注意
Warning
(#_#)
标准的分析追踪代码段是 https:// 协议网址下载由 SSL 保护的 ga.js , Chrome 扩展应用 只能 使用 SSL 保护 ga.js 版本, 通过不安全的 HTTP 加载 ga.js 是为默认 内容安全策略(CSP) 不允许的!
另外 Chrome 扩展协议 chrome-extension:// 中, 需要略作修订,直接从 https://ssl.google-analytics.com/ga.js 加载, 而不能使用默认的文件位置.
如下是一个修改过的代码片段,用于 异步跟踪API :
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js'; // <-- 就这行!
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
同时,还要配合放松默认的安全策略,以便扩展可以加载对应资源. 在 manifest.json 中配置成类似如下:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
Here is a popup page (popup.html) which loads the asynchronous tracking code via an external JavaScript file (popup.js) and tracks a single page view: 以下便是弹出窗口 (popup.html) 配合外部 JavaScript 代码(popup.js) 进行异步追踪的示例:
popup.js:
=========
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
popup.html:
===========
<!DOCTYPE html>
<html>
<head>
...
<script src="popup.js"></script>
</head>
<body>
...
</body>
</html>
Keep in mind that the string
_gaq.push([‘_trackPageview’]); 代码将跟踪单个页面访问,这一代码可以用在扩展程序中的任何一个页面中。
通过查看我们扩展程序中的每一个页面的访问数据, 就可以了解用户每一次浏览器会话与扩展程序有多少次交互。
要确保来自我们扩展程序的跟踪数据发送到了Google Analytics(分析), 可以在开发人员工具窗口中审查我们扩展程序中的页面(有关更多信息请参见 调试 教程)。
如下图所示,如果一切设置妥当,应该看到文件名为 __utm.gif 的请求。
通过配置事件跟踪,我们可以追踪用户与扩展程序的哪一部分交互最多。
例如,如果扩展里有三个按钮供用户单击:
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
编写函式,向Google Analytics(分析)发送单击事件:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
对所有按钮绑定点击的事件句柄:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
Google Analytics(分析)事件跟踪概览页面将提供每一个按钮单击次数的度量:
使用这种方法,我们可以看到扩展程序的哪些部分利用太多或太少, 这一信息可以帮助我们, 决策有关重新设计用户界面或者实现额外功能。
更多有关事件跟踪API的使用信息,参见Google Analytics(分析)的 开发者文档 。
使用这些技术的示例扩展程序在Chromium源代码树中的以下位置