本教程演示了如何使用 Google Analytics(分析)来跟踪扩展程序的使用情况。如果您开发的是平台应用,请参阅适用于应用的 Analytics,因为应用具有与扩展程序不同的限制。
要求
本教程要求您具备一些适用于 Google Chrome 的编写扩展程序的熟悉程度。如果您需要有关如何编写扩展程序的信息,请参阅入门教程。
您还需要设置 Google Analytics(分析)帐号才能跟踪您的扩展程序。请注意,在设置帐号时,您可以在“网站网址”字段中使用任何值,因为您的扩展程序没有自己的网址。
添加跟踪代码
如果当前网页是使用 https://
协议加载的,则标准 Google Analytics(分析)跟踪代码段会从受 SSL 保护的网址中提取名为 ga.js
的文件。Chrome 扩展程序和应用只能使用受 SSL 保护的 ga.js
版本。Chrome 的默认内容安全政策不允许通过不安全的 HTTP 加载 ga.js
。除了 Chrome 扩展程序托管在 chrome-extension://
架构下这一事实外,还需要对常规跟踪代码段稍作修改,以直接从 https://ssl.google-analytics.com/ga.js
(而非默认位置)提取 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'",
...
}
下方显示的是弹出页面 (popup.html
),其中通过外部 JavaScript 文件 (popup.js
) 加载异步跟踪代码,并跟踪单次网页浏览:
<!DOCTYPE html>
<html>
<head>
...
<script src="popup.js"></script>
</head>
<body>
...
</body>
</html>
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);
})();
请注意,字符串 UA-XXXXXXXX-X
应替换为您自己的 Google Analytics(分析)帐号。
跟踪网页浏览量
_gaq.push(['_trackPageview']);
代码将跟踪单次网页浏览。此代码可以在您的扩展程序的任何页面上使用。放置在后台网页上时,它会为每个浏览器会话注册一次视图。如果放置在弹出式窗口中,则会在每次打开弹出式窗口时注册一次视图。
通过查看扩展程序中每个网页的网页浏览量数据,您可以了解用户在每次浏览器会话中与您的扩展程序互动的次数:
监控分析请求
如需确保扩展程序的跟踪数据会发送到 Google Analytics(分析),您可以在“开发者工具”窗口中检查扩展程序的页面(如需了解详情,请参阅调试教程)。如下图所示,如果所有设置都正确无误,您应该会看到针对 __utm.gif 文件的请求。
跟踪事件
通过配置事件跟踪,您可以确定用户最常与扩展程序的哪些部分进行互动。例如,如果您有三个按钮,用户可能会点击:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>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(分析)事件跟踪概览页面将为您提供有关每个按钮被点击的次数的指标:
通过这种方法,您可以查看扩展程序的哪些部分利用率过低或过高。这些信息有助于就界面重新设计或要实现的其他功能做出决策。
如需详细了解如何使用事件跟踪,请参阅 Google Analytics(分析)开发者文档。
示例代码
示例代码库中提供了一个采用这些分析法的扩展程序示例。