高级配置 - 网络跟踪 (analytics.js)

本文档概要介绍了 analytics.js 数据收集库。

JavaScript 代码段

要在您的网站上启用 Google Analytics(分析),您应在页面上的 </head> 结束标记前添加一段 JavaScript 代码。以下是代码段的一部分:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

代码段运行时,首先会新建一个名为 ga 的全局函数。接着,代码段会以异步方式将 analytics.js 库加载到页面上。

ga 全局函数是您与 analytics.js 库互动的主要方式。该函数会接受一个序列的参数,其中第一个参数代表 Google Analytics(分析)命令。例如,在下面的默认代码段中:

ga('create', 'UA-XXXX-Y', 'auto');  // Creates a tracker.
ga('send', 'pageview');             // Sends a pageview.

第一行会调用 create 命令,而第二行会调用 send 命令。

虽然 JavaScript 是以异步方式加载 analytics.js 库,但 ga 函数应在库加载之前使用。当您开始执行命令时,每个命令都会添加至队列中。库完成加载后,系统就会执行队列中的所有命令,然后立即执行新命令。这可让开发者忽略 Google Analytics(分析)的异步性质,从而专注于使用 ga 函数。

重命名全局对象

在一些情况下,ga 这个变量名称可能已经被您页面上的某个现有对象占用。为避免覆盖现有对象,您可以重命名 ga 函数,例如改为 __gaTracker。为此,您只需替换上述代码段中的 ga 参数:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');


这样,在调用命令时您就可以使用 __gaTracker 而非 ga

__gaTracker('create', 'UA-XXXX-Y', 'auto');
__gaTracker('send', 'pageview');

JavaScript 代码段参考

以下参考显示的是添加了注释和空格的基本 JavaScript 代码段:

<!-- Google Analytics -->
<script>
/**
 * Creates a temporary global ga object and loads analy  tics.js.
 * Paramenters o, a, and m are all used internally.  They could have been declared using 'var',
 * instead they are declared as parameters to save 4 bytes ('var ').
 *
 * @param {Window}      i The global context object.
 * @param {Document}    s The DOM document object.
 * @param {string}      o Must be 'script'.
 * @param {string}      g URL of the analytics.js script. Inherits protocol from page.
 * @param {string}      r Global name of analytics object.  Defaults to 'ga'.
 * @param {DOMElement?} a Async script tag.
 * @param {DOMElement?} m First script tag in document.
 */
(function(i, s, o, g, r, a, m){
  i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.

  // Creates an initial ga() function.  The queued commands will be executed once analytics.js loads.
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  },

  // Sets the time (as an integer) this tag was executed.  Used for timing hits.
  i[r].l = 1 * new Date();

  // Insert the script tag asynchronously.  Inserts above current tag to prevent blocking in
  // addition to using the async attribute.
  a = s.createElement(o),
  m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-XXXX-Y', 'auto'); // Creates the tracker with default parameters.
ga('send', 'pageview');            // Sends a pageview hit.
</script>
<!-- End Google Analytics -->

备用异步代码段

虽然上述规范的 analytics.js 代码段可确保在所有浏览器上,都能以异步方式加载和执行脚本,但是它的缺点是,不允许新型浏览器预加载脚本。

下面的备用代码段增加了对预加载的支持,从而有助于在新型浏览器中实现小幅的性能提升,但在 IE 9 以及不识别 async 属性的旧版移动浏览器中,会降级至异步加载和执行脚本。建议您在访问者主要使用新型浏览器访问您的网站时,使用该代码段。

<!-- Google Analytics -->
<script async src='//www.google-analytics.com/analytics.js'></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

创建跟踪器对象

要发送数据至 Google Analytics(分析),您必须创建跟踪对象。每个跟踪对象只能向一个 Google Analytics(分析)网络媒体资源发送数据。为了创建跟踪对象,默认代码段使用了以下代码:

ga('create', 'UA-XXXX-Y', 'auto');

其中传送至 ga 函数的第一个参数是 create 命令,第二个参数是数据到达的目标网络媒体资源的 ID。

自定义跟踪器对象

所有跟踪对象自定义工作都必须在最初创建对象时完成,方法是向 ga 函数传递一个配置对象作为其最后一个参数。例如,要覆盖部分 Cookie 设置,您可以使用:

ga('create', 'UA-12345-6', {
   'cookieDomain': 'foo.example.com',
   'cookieName': 'myNewName',
   'cookieExpires': 20000
});

在上面的示例中,Cookie 的网域、名称和过期时间都已通过可选的配置对象进行了修改。

如需详细了解可在 create 命令中配置的所有字段的完整信息,请参阅“字段参考”文档中的 create 专有的字段

在 localhost 上测试

在一些情况下,您可能要在运行于 localhost 上的网络服务器中测试 analytics.js。要设置 analytics.js Cookie,您需要使用以下代码停用默认的 Cookie 网域:

ga('create', 'UA-XXXX-Y', {
  'cookieDomain': 'none'
});

发送数据

在创建跟踪对象并将其关联至网络媒体资源后,您可以使用 send 命令发送数据到该网络媒体资源。您发送到 Google Analytics(分析)的数据称为 Hit(匹配),analytics.js 库允许您通过指定 hitType 来发送不同类型的数据。使用 send 命令时,您还必须指定您要发送的数据的 hitType

例如,要发送网页浏览匹配,您可以使用:

ga('send', 'pageview');

这会发送默认网址的数据给 Google Analytics(分析)。

字段名称对象

在一些情况下,您可能要覆盖作为同一项网页浏览数据发送的多个值。analytics.js 库允许您将字段名称对象作为 send 命令中的最后一个参数来传递。这非常实用,因为它可让您设置许多额外的网页浏览属性,例如网页标题:

ga('send', 'pageview', {
  'page': '/my-new-page',
  'title': 'My New Page Title'
});

如需详细了解配置跟踪器对象的全部方法,请参阅字段参考文档。

设置匹配回调

在一些情况下(例如当您跟踪出站链接时),您可能想要知道跟踪器何时完成数据传送。如此,您就可以确保只在系统已将用户的点击报告给 Google Analytics(分析)之后,才将用户送至他们的目的地。要满足此要求,您可以使用 send 命令在字段名称对象中指定于 analytics.js 完成数据发送后马上执行的 hitCallback 函数。您可以按如下所示来设置 hitCallback 函数:

ga('send', 'pageview', {
  'page': '/my-new-page',
  'hitCallback': function() {
    alert('analytics.js done sending data');
  }
});

在此示例中,字段名称对象会配置 page 参数并设置 hitCallback。一旦跟踪器完成数据发送,系统就会向用户显示提醒框。

设置在多个 Send 命令中使用的参数

在一些情况下,您可能想要设置一个参数并让该参数的值在多个 send 命令中存续。例如,假设您要在一个网页上跟踪一种网页浏览和两种事件,这种情况下如果您想使用自己的自定义路径覆盖每个匹配的网页路径,您就可以在每个 send命令中设置新路径,或者按如下所示使用 set 方法:

ga('set', 'page', '/my-custom-page');

ga('send', 'pageview');
ga('send', 'event', 'image1', 'clicked');
ga('send', 'event', 'image2', 'clicked');

在以上代码执行后,系统会为所有 3 个 send 命令发送覆盖后的 /my-custom-page 页面。

使用 useBeacon 发送匹配数

要使用 navigator.sendBeacon 发送匹配数,应将 useBeacon 参数设置为 truenavigator.sendBeacon 方法可确保数据完成传输,即使用户离开您的网页或在请求未完成前关闭浏览器,也不例外。这对于以下情况非常有帮助:您希望在用户即将离开您的网站之前跟踪某个事件,同时不延迟用户的导航操作。

ga('send', 'event', 'click', 'download-me', {useBeacon: true});

推送函数

有时候,您可能只想在 analytics.js 库加载后执行代码。为此,您可以将函数作为参数传递给 ga 函数。

ga(function() {
  alert('library done loading');
});

在库完成加载后,用户将看到提醒框。

获取参数

通过 analytics.js,您可以使用 get 命令获取在跟踪对象中设置的任何值。由于系统只在库加载后才会创建跟踪器对象,因此您必须在已推送的函数内获取参数。

ga(function(tracker) {
  var defaultPage = tracker.get('page');
});

在以上示例中,函数使用了名为 tracker 的参数。在库加载完毕后,该函数即会执行,tracker 的值将是通过运行第一个 create 命令创建的默认跟踪对象。随后,系统将使用 tracker 获取默认的网页值。

强制采用 SSL (HTTPS)

默认情况下,Google Analytics(分析)在发送出站请求时会匹配主机页面的协议。要强制 Google Analytics(分析)总是使用 SSL 发送数据(即使是从非安全的 HTTP 页面发送时也是如此),请将 forceSSL 字段设为 true

ga('create', 'UA-XXXX-Y', 'auto');
ga('set', 'forceSSL', true);        // Send all data using SSL, even from insecure (HTTP) pages.
ga('send', 'pageview');

使用多个跟踪对象

在一些情况下,您可能想要从单个页面发送数据到多个网络媒体资源。这对由多名负责人分别管理各个版块的网站非常有用;每名负责人都可以查看自己的网络媒体资源。

要满足这一要求,您必须为您要向其发送数据的每个网络媒体资源创建一个跟踪对象:

ga('create', 'UA-XXXX-Y', 'auto');
ga('create', 'UA-12345-6', 'auto', {'name': 'newTracker'});  // New tracker.

一旦运行,系统就会创建两个跟踪器对象。第一个跟踪器将成为默认跟踪对象,且没有名称。第二个跟踪器将命名为“newTracker”。

要使用这两个跟踪器发送网页浏览数据,您应将跟踪器名称作为前缀添加到命令开头并紧跟着前缀再添加一个句点。比如:

ga('send', 'pageview');
ga('newTracker.send', 'pageview'); // Send page view for new tracker.

这就会将网页浏览数据同时发送给默认跟踪器和新跟踪器。

要在函数内按名称访问跟踪器对象,您可以使用 getByName方法:

ga(function() {
  var newTracker = ga.getByName('newTracker');
});

要获取已配置的所有跟踪器的列表,请使用 getAll 方法:

ga(function() {
  var allTrackers = ga.getAll();
});

增强的链接归因功能会自动使用 link 元素 ID 区别单个页面上指向相同网址的多个链接,从而提高网页内分析报告的准确性。

要启用增强的链接归因,请执行以下操作:

  1. 在 Google Analytics(分析)帐户的管理界面中启用增强的链接归因
  2. 在每个页面上更新代码以加载“增强的链接归因”插件,示例如下:
ga('create', 'UA-XXXX-Y', 'auto');
ga('require', 'linkid');   // Load the plug-in. Note: this call will block until the plug-in is loaded.
ga('send', 'pageview');

增强的链接归因插件会使用链接(或父级元素)的元素 ID 和 Cookie 区分指向相同网址的链接。您可以在加载插件时提供配置选项,自定义插件在 DOM 的多大范围内查找元素 ID,以及自定义此 Cookie 的行为。

ga('create', 'UA-XXXX-Y', 'auto');
ga('require', 'linkid', {
           'cookieName': '_ela',        // Cookie name. _gali by default.
           'duration': 45,              // Cookie duration. 30 seconds by default.
           'levels': 5});               // Max DOM levels from link to look for element ID. 3 by default.
ga('send', 'pageview');

IP 匿名化

在一些情况下,您可能需要对发送给 Google Analytics(分析)的匹配(HTTP 请求)的 IP 地址做匿名化处理。您可以使用 set 命令并将 anonymizeIp 字段设为 true,为来自某个页面的所有匹配匿名化 IP 地址(在跟踪器对象的生命周期内):

ga('set', 'anonymizeIp', true);

要匿名化单个匹配的 IP 地址,您可为该匹配在可选配置对象中设置 anonymizeIp 字段:

ga('send', 'pageview', {
  'anonymizeIp': true
});

要详细了解 IP 匿名化的工作原理,请参阅帮助中心内的 Google Analytics(分析)中的 IP 匿名化一文。

用户选择停用

有时候,您可能需要在不删除 JavaScript 代码段的情况下,停用页面上的 Google Analytics(分析)跟踪代码。例如,如果网站上的隐私权政策允许用户选择停用 Google Analytics(分析)跟踪,您可能就需要这样做。

analytics.js 库现已添加一个窗口属性,您只要将其设为 true,就可以禁止 analytics.js 发送数据给 Google Analytics(分析)。当 Google Analytics(分析)尝试设置 Cookie 或发回数据到 Google Analytics(分析)服务器时,它会检查此属性是否设为了 true。如果是,其效果相当于用户安装了“停用 Google Analytics(分析)”浏览器插件

要停用跟踪,请将以下窗口属性设为 true

window['ga-disable-UA-XXXX-Y'] = true;

其中,值 UA-XXXX-Y 对应于您要停用跟踪的网络媒体资源的ID。

此窗口属性必须在系统调用跟踪代码之前设置,且您必须在您要停用 Google Analytics(分析)跟踪的每个页面上设置此属性。如果不设置此属性,或将其设为“false”,则跟踪功能将无法正常工作。

示例

以下是一段可用于为用户提供选择停用功能的简单代码示例。

首先,添加新的 HTML 链接到您的网站以执行选择停用逻辑:

<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>

然后在 analytics.js 代码段的前面添加以下代码段。请务必将 gaProperty 的值从 UA-XXXX-Y 替换为您网站上所用的媒体资源。这个值应与您传递给 create 命令的相同。

<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';

// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}

// Opt-out function
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}
</script>

当用户点击选择停用 HTML 链接时,自定义的 gaOptout 函数就会执行。该函数会设置在未来很长一段时间内有效的 Cookie,并停用 analytics.js 数据收集。当用户回访此网站时,上述脚本将检查其是否设置了选择停用 Cookie。如果是,系统就会停用 analytics.js 数据收集。

调试

您可以使用 analytics_debug.js 启用 analytics.js 的调试版本:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics_debug.js','ga');
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

最好只是临时或在开发期间使用该调试版本,因为 analytics_debug.js 代码段较大,而且会造成 google-analytics.com 的匹配延迟。

跟踪调试

跟踪调试会向控制台输出更冗长的信息。要启用跟踪调试,请在代码段前加入 https://www.google-analytics.com/analytics_debug.js 及以下这行代码。

window.ga_debug = {trace: true};