教程:Google Analytics(分析)

本教程演示了如何使用 Google Analytics(分析)来跟踪扩展程序的使用情况。如果您开发的是平台应用,请参阅适用于应用的 Analytics,因为应用具有与扩展程序不同的限制。

要求

本教程要求您具备一些适用于 Google Chrome 的编写扩展程序的熟悉程度。如果您需要有关如何编写扩展程序的信息,请参阅入门教程

您还需要设置 Google Analytics(分析)帐号才能跟踪您的扩展程序。请注意,在设置帐号时,您可以在“网站网址”字段中使用任何值,因为您的扩展程序没有自己的网址。

已填写 Chrome 扩展程序信息的分析设置

添加跟踪代码

如果当前网页是使用 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(分析)数据视图

监控分析请求

如需确保扩展程序的跟踪数据会发送到 Google Analytics(分析),您可以在“开发者工具”窗口中检查扩展程序的页面(如需了解详情,请参阅调试教程)。如下图所示,如果所有设置都正确无误,您应该会看到针对 __utm.gif 文件的请求。

显示 __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(分析)视图

通过这种方法,您可以查看扩展程序的哪些部分利用率过低或过高。这些信息有助于就界面重新设计或要实现的其他功能做出决策。

如需详细了解如何使用事件跟踪,请参阅 Google Analytics(分析)开发者文档

示例代码

示例代码库中提供了一个采用这些分析法的扩展程序示例。