GoogleAnalytics文档

来源:互联网 发布:flash cs6软件 编辑:程序博客网 时间:2024/06/11 13:40

将 analytics.js 添加到网站中

Analytics.js 库是一种可用于衡量用户与您网站的互动情况的 JavaScript 库。本文介绍如何将 analytics.js 添加到您的网站。

JavaScript 跟踪代码段

将以下代码(也称为“JavaScript 跟踪代码段”)添加到您的网站模板是着手使用 analytics.js 的最简单方法。

应该将此代码添加在结束标记 </head> 之前,并用您希望跟踪的 Google Analytics(分析)媒体资源 ID(也称为“跟踪 ID”)替换字符串 ‘UA-XXXXX-Y’。

提示:如果您不知道您的媒体资源 ID,可以使用帐户浏览器来查找。

<!-- Google Analytics --><script>(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','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-XXXXX-Y', 'auto');ga('send', 'pageview');</script><!-- End Google Analytics -->

以上代码进行了以下四项操作:

  1. 创建了一个 <script> 元素,并开始从 https://www.google-analytics.com/analytics.js 异步下载 analytics.js JavaScript 库。
  2. 初始化了一个全局函数 ga(也称为 ga() 命令队列),您可以通过该函数来安排要在 analytics.js 库加载完毕可供使用时执行的命令。
  3. ga() 命令队列中添加一条命令,为通过 'UA-XXXXX-Y' 参数指定的媒体资源创建一个新的跟踪器对象。
  4. ga() 命令队列中添加另一条命令,为当前页面向 Google Analytics(分析)发送网页浏览数据。

自定义实现时可能需要修改 JavaScript 跟踪代码段的最后两行(create 和 send 命令)或添加更多代码来跟踪更多互动。但不应该更改加载 analytics.js 库或初始化 ga() 命令队列函数的代码。

备用异步跟踪代码段

虽然上述 JavaScript 跟踪代码段可以确保该脚本在所有浏览器中加载和异步执行,但不足之处是不能让新型浏览器预加载该脚本。

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

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

跟踪代码段可以捕获哪些数据?

当您在网站中添加了上述任何一种跟踪代码段之后,就会针对用户访问的每个页面发送网页浏览数据。Google Analytics(分析)通过处理此数据可以推导出大量信息,其中包括:

  • 用户总共在您网站上停留了多少时间。
  • 用户在每个网页上停留的时间以及用户查看这些网页的次序。
  • 用户点击了哪些内部链接(根据下一个网页浏览的网址得到)。

此外,IP 地址、用户代理字符串以及 analytics.js 在创建新跟踪器时查看的初始网页可用于确定以下这类信息:

  • 用户的地理位置。
  • 用户使用的浏览器和操作系统。
  • 屏幕尺寸以及是否安装了 Flash 或 Java。
  • 引荐网站。

后续步骤

对于基本的报表需求,通过 JavaScript 跟踪代码段收集数据已经足够,但在许多情况下,您还需要解决与用户相关的其他问题。

本网站上的指南介绍了如何使用 analytics.js 来跟踪您所关心的互动,但在您实现具体功能之前,我们强烈建议您阅读左侧导航栏中“基础知识”部分列出的相关指南。这些指南可以帮助您概要了解 analytics.js 库和更好地理解本网站中的所有代码示例。

analytics.js 的工作原理

您需要使用 analytics.js 进行的所有跟踪几乎都可以使用 ga() 命令队列完成。本指南介绍什么是命令队列、其工作原理以及如何执行命令来跟踪用户互动。

ga 命令队列

JavaScript 跟踪代码段定义了一个称为“命令队列”的全局函数 ga。之所以称其为命令队列,是因为该函数不会立即执行其中的命令,而是将这些命令加入到队列中,将这些命令的执行被延迟 analytics.js 库加载完成后进行。

在 JavaScript 中,函数也是对象,这意味着函数中也可以包含属性。跟踪代码段在 ga 函数对象上定义了一个值为空数据的 q 属性。在 analytics.js 库尚未加载完成之前,调用 ga() 函数会将传递给 ga() 函数的参数列表附加到 q 数组的尾部。

例如,如果您运行跟踪代码段并立即将 ga.q 中的内容写入控制台日志,就会看到一个数组,其中有两个元素,分别包含已传递给 ga() 函数的两组参数:

console.log(ga.q);// Outputs the following:// [//   ['create', 'UA-XXXXX-Y', 'auto'],//   ['send', 'pageview']// ]

analytics.js 加载完成后,会立即查看 ga.q 数组的内容并依次执行每条命令。然后,ga() 函数将被重新定义以立即执行之后的调用。

在这种模式下,开发者在使用 ga() 命令队列时无需担心 analytics.js 库是否已完成加载。该模式提供了一种类似于同步代码的简单接口,规避了异步代码的诸多复杂性。

将命令添加到队列

对 ga() 命令队列的所有调用都使用同一个签名。第一个参数,“命令”,是一个标识特定 analytics.js 方法的字符串。其他参数是要传递给该方法的参数。

特定命令所使用的方法可以是全局方法(例如 ga 对象的 create 方法),也可以是跟踪对象的实例方法(例如 send)。如果 ga() 命令队列收到一条它无法识别的命令,会直接将其忽略,因此,在调用 ga() 函数时请仔细慎重,因为这些调用几乎不可能报错。

要查看可通过命令队列执行的所有命令的详尽列表,请参阅 ga() 命令队列参考。

命令参数

大多数 analytics.js 命令(及其相应方法)都接受多种不同格式的参数。这是为了便于向特定方法传递常用字段。

以下面的 JavaScript 跟踪代码段中的两条命令为例:

ga('create', 'UA-XXXXX-Y', 'auto');ga('send', 'pageview');

在第一条命令中,create 接受了通过第二个、第三个和第四个可选参数指定的相应 trackingIdcookieDomainname 字段。send 命令接受通过第二个可选参数指定的 hitType

所有命令均接受普遍适用的 fieldsObject 参数,该这种参数可用于指定任何字段。例如,可将上述跟踪代码段中的两条命令改写为:

ga('create', {  trackingId: 'UA-XXXXX-Y',  cookieDomain: 'auto'});ga('send', {  hitType: 'pageview'});

要查看每个命令所允许的可选参数的详尽列表,请参阅 ga() 命令队列参考。

后续步骤

阅读本指南后,您应该对如何使用 analytics.js 执行命令以及命令队列的工作原理有了相当透彻的了解。下一篇指南将介绍如何创建跟踪器对象。

创建跟踪器

跟踪器对象(也称为“跟踪器”)指的是可以收集和存储数据并将这些数据发送给 Google Analytics(分析)的对象。

在创建新的跟踪器时,您必须指定一个跟踪 ID(与“媒体资源 ID”相同,对应于您的一个 Google Analytics(分析)媒体资源)和一个 Cookie 网域(指定如何存储 Cookie,推荐值 ‘auto’ 表示自动配置 Cookie 网域。)

如果指定了网域但无对应的 Cookie,将生成一个客户端 ID 并将其存储在新创建的 Cookie 中,同时将用户识别为“新”用户。如果存在包含客户端 ID 值的 Cookie,则在跟踪器中设置该客户端 ID,并将该用户识别为“回访”用户。

创建后,跟踪器对象还会收集关于当前浏览上下文的信息(例如页面标题和网址)、关于设备的信息(例如屏幕分辨率、视口尺寸)以及文档编码。当需要向 Google Analytics(分析)发送数据时,会将跟踪器对象中当前存储的所有信息发送出去。

create 方法

analytics.js 库提供了创建跟踪器的各种方式,最常见的方式是使用 create 命令,并将跟踪 ID 和 Cookie 网域字段分别作为第二个和第三个参数传递给该命令:

ga('create', 'UA-XXXXX-Y', 'auto');
给跟踪器命名

您还可以选择给跟踪器命名,方法是将 name 字段作为第四个参数传递给 create 命令。如果您要为相同页面创建多个跟踪器,就需要对跟踪器进行命名。详细原因,请参阅下面的使用多个跟踪器部分。

ga('create', 'UA-XXXXX-Y', 'auto', 'myTracker');

在未设置name字段的情况下创建的跟踪器也称为“默认”跟踪器。默认跟踪器具有内部名称“t0”。

在创建时指定字段值

您还可以选择传递字段对象,通过这种方式可以在创建时设置任何 analytics.js 字段,以便将这些字段存储在跟踪器中并应用于所有要发送的匹配。

ga('create', 'UA-XXXXX-Y', 'auto', 'myTracker', {  userId: '12345'});

和对 ga() 函数的所有调用一样,也可使用字段对象来同时指定所有字段:

ga('create', {  trackingId: 'UA-XXXXX-Y',  cookieDomain: 'auto',  name: 'myTracker',  userId: '12345'});

请参阅 create 方法参考,了解更为全面的详细信息。

使用多个跟踪器对象

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

要为两个不同的媒体资源跟踪数据,需要创建两个不同的跟踪器,至少其中一个必须是已命名的跟踪器。以下两条命令创建了一个默认跟踪器和一个名为“clientTracker”的跟踪器:

ga('create', 'UA-XXXXX-Y', 'auto');ga('create', 'UA-XXXXX-Z', 'auto', 'clientTracker');
针对特定跟踪器执行命令

要针对特定跟踪器执行 analytics.js 命令,需要用跟踪器名和句点给命令名添加前缀。如果不指定跟踪器名,命令就针对默认跟踪器执行。

要为上述两个跟踪器发送网页浏览量数据,需要执行以下两条命令:

ga('send', 'pageview');ga('clientTracker.send', 'pageview');

以后发布的指南会详细介绍执行特定命令的语法。您也可以参阅命令队列参考,了解所有 analytics.js 命令的详尽语法。

后续步骤

创建跟踪器后,您可能需要访问存储在该跟踪器对象中的数据。下一篇指南介绍如何获取和设置跟踪器数据。

获取和设置跟踪器数据

要获取和设置跟踪器的字段数据有时需要拥有该跟踪器对象本身的引用。由于添加到 ga() 命令队列的命令是异步执行的,不会返回值,而且跟踪器通常都是使用 create 命令创建的,因此需要等到 create 命令执行之后才能获取跟踪器对象的引用。您可以通过 ready callback 来完成这项操作。

ready callback

ready callback 是一个函数,您可以将其添加到 ga() 命令队列。当 analytics.js 库完全加载,且先前加入队列的所有命令都已执行后,系统就会立即调用此函数。

由于队列中的所有命令都是按顺序执行的,添加 create 命令后在队列中添加 ready callback 将确保 ready callback 的执行在跟踪器创建之后。如果在调用 ready callback 时默认跟踪器已创建,会将默认跟踪器作为第一个参数传递给此回调函数。

以下代码显示了如何访问默认跟踪器对象并将其写入控制台日志:

ga('create', 'UA-XXXXX-Y', 'auto');ga(function(tracker) {  // Logs the tracker created above to the console.  console.log(tracker);});

通过 ga 对象方法获取跟踪器

如果您没有使用默认跟踪器,或您在网页上使用了多个跟踪器,您可以通过一种 ga 对象方法来访问这些跟踪器。

analytics.js 库已完全加载后,会立即给 ga 对象本身添加更多方法。其中的两个方法 getByName 和 getAll 可用于访问跟踪器对象。

请注意:只有在 analytics.js 已完全加载后才能使用 ga 对象方法,因此,您应该仅在 ready callback 中引用这些方法。

getByName

如果要访问的跟踪器名称已知,可以使用 getByName 方法:

ga('create', 'UA-XXXXX-Y', 'auto', 'myTracker');ga(function() {  // Logs the "myTracker" tracker object to the console.  console.log(ga.getByName('myTracker'));});
getAll

要获取所有已创建跟踪器中的一组跟踪器,请使用 getAll 方法:

ga('create', 'UA-XXXXX-Y', 'auto', 'tracker1');ga('create', 'UA-XXXXX-Z', 'auto', 'tracker2');ga(function() {  // Logs an array of all tracker objects.  console.log(ga.getAll());});

获取跟踪器上存储的数据

只要拥有对跟踪器对象的引用,就可以使用其 get 方法来访问跟踪器上当前存储的任何字段值。

ga('create', 'UA-XXXXX-Y', 'auto');ga(function(tracker) {  // Logs the trackers name.  // (Note: default trackers are given the name "t0")  console.log(tracker.get('name'));  // Logs the client ID for the current user.  console.log(tracker.get('clientId'));  // Logs the URL of the referring site (if available).  console.log(tracker.get('referrer'));});

更新跟踪器数据

可以使用 set 方法来更新跟踪器对象。可以使用跟踪器对象本身来调用跟踪器的 set 方法,也可以通过在 ga() 命令队列中添加 set 命令来进行调用。

由于获取跟踪器对象的引用需要使用 ready callback,推荐的方式是使用 ga() 命令队列来更新跟踪器。

使用 ga() 命令队列

set 命令的调用方式有两种:一种是传递两个参数,一个是字段,另一个是相应的值;另一种是传递一个包含字段/值对的对象。

以下示例将默认跟踪器的 page 字段设为 ‘/about’:

ga('set', 'page', '/about');

下例同时设置 page 和 title 字段:

ga('set', {  page: '/about',  title: 'About Us'});
使用已命名的跟踪器

如果您要使用已命名跟踪器而不是默认跟踪器,可以在命令字符串中传递跟踪器名称。

以下调用为名为 “myTracker” 的跟踪器设置 page 字段:

ga('myTracker.set', 'page', '/about');
通过跟踪器对象本身进行调用

如果您拥有对跟踪器对象的引用,就可以直接调用该跟踪器的 set 方法:

ga(function(tracker) {  tracker.set('page', '/about');});

注意:跟踪器对象不会自行更新。如果用户更改了窗口大小,或者页面上运行的代码更新了网址,跟踪器对象就不会自动捕获这些信息。要使跟踪器对象能够反映这些更改,您必须手动对其进行更新。

“&”符号语法

跟踪器字段的获取和设置通常是使用字段名进行的。(要查看完整的 analytics.js 字段和名称列表,请参阅字段参考。)

获取和设置字段的另一种备用方法是通过其相应的 Measurement Protocol 参数名名称来引用相应字段。

例如,以下两个 console.log 表达式都将文档标题写入控制台日志:

ga(function(tracker) {  // Gets the title using the analytics.js field name.  console.log(tracker.get('title'));  // Gets the title using the measurement protocol  // parameter name, prefixed with an ampersand.  console.log(tracker.get('&dt'));});

一般不建议使用“&”语法,应该仅在用于 Measurement Protocol 参数的 analytics.js 字段名不存在时才使用这种方式(当 Measurement Protocol 中添加了 analytics.js 中尚未实现的新功能时有时会出现这种情况)。

后续步骤

至此您已了解如何创建跟踪器和更新其上存储的数据,下一步将学习如何向 Google Analytics(分析)发送数据以便进行处理。

向 Google Analytics(分析)发送数据

为向 Google Analytics(分析)发送网页浏览数据,JavaScript 跟踪代码段的最后一行在 ga() 命令队列中添加了一条 send 命令:

ga('create', 'UA-XXXXX-Y', 'auto');ga('send', 'pageview');

用于执行发送的对象是上一行代码中调度创建的跟踪器。所发送的数据是存储在该跟踪器上的数据。

本指南介绍向 Google Analytics(分析)发送数据的各种方式,并说明如何控制具体发送哪些数据。

匹配、匹配类型和 Measurement Protocol

我们将跟踪器向 Google Analytics(分析)发送数据称为发送匹配,每个匹配都必须具有匹配类型。JavaScript 跟踪代码段发送的匹配类型为 pageview;其他匹配类型包括 screenview、event、transaction、item、social、exception 和 timing。本指南概要介绍适用于所有匹配类型的基本概念和方法。您可以在左侧导航栏中的“跟踪常见用户互动”部分找到针对每种匹配类型的专题指南。

“匹配”是一个 HTTP 请求,其中包含编码成查询字符串的字段/值对,并发往 Measurement Protocol。

在加载使用了 analytics.js 的网页时,如果您已打开浏览器的开发者工具,就可以在网络标签中看到发送匹配的情况。为此只需查找发送到 google-analytics.com/collect 的请求。

发送哪些数据

在向 Measurement Protocol 发送匹配时,跟踪器发送当前存储的所有有效 Measurement Protocol 参数字段。例如,会发送像 title 和 location 这样的字段,但不会发送 cookieDomain 和 hitCallback 字段。

在有些情况下,您可能需要对当前匹配向 Google Analytics(分析)发送某些字段,对之后的匹配则不发送。例如,某个事件匹配的 eventAction 和 eventLabel 字段仅与当前匹配相关。

要仅为当前匹配发送某些字段,您可以将这些字段作为 send 方法的参数来传递。要为之后的所有匹配发送字段数据,则应该使用 set 方法来更新跟踪器。

send 方法

可以直接使用跟踪器对象本身来调用跟踪器的 send 方法,也可以通过向 ga() 命令队列添加 send 命令来进行调用。由于大多数情况下您都没有跟踪器对象的引用,因此使用 ga() 命令队列是向 Google Analytics(分析)发送跟踪器数据的推荐方式。

使用 ga() 命令队列

用于向 ga() 命令队列添加 send 命令的签名如下所示:

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

如上所述,通过 hitType、…fields 和 fieldsObject 参数指定的值仅对当前匹配发送。这些值不会存储在跟踪器对象中,也不会通过随后的匹配发送。

如果使用 send 命令传递的字段在跟踪器对象上已经设有值,则使用命令中传递的值而不是跟踪器上存储的值。

调用 send 命令时必须指定 hitType,是否需要其他参数取决于所指定的类型。请参阅左侧导航栏中关于“跟踪常见的用户互动”的专题指南,了解详细信息。

使用 send 命令的最简单方式是使用 fieldsObject 参数传递所有字段,此方式适用于所有匹配类型。例如:

ga('send', {  hitType: 'event',  eventCategory: 'Video',  eventAction: 'play',  eventLabel: 'cats.mp4'});

为方便起见,对于特定匹配类型允许直接以参数形式向 send 命令传递常用字段。例如,可将上述用于“event”匹配类型的 send 命令改写为:

ga(‘send’, ‘event’, ‘Video’, ‘play’, ‘cats.mp4’);
要了解针对各种匹配类型分别可将哪些字段作为参数传递的完整列表,请参阅 send 命令参考的“参数”部分。

使用已命名的跟踪器

如果您要使用已命名跟踪器而不是默认跟踪器,可以在命令字符串中传递跟踪器名称。

以下 send 命令将在名为 myTracker 的跟踪器上调用:

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

通过跟踪器对象本身进行调用

如果引用了跟踪器对象,就可以直接调用该跟踪器的 send 方法:

ga(function(tracker) {  tracker.send('event', 'Video', 'play', 'cats.mp4');});

在匹配发送完成时获得通知

在某些情况下,您需要在匹配已发送到 Google Analytics(分析)时获得通知,这样才能立即采取后续措施。当您需要记录导致用户离开当前页面的特定互动时,这种需要很常见。许多浏览器会在网页开始卸载时立即停止执行 JavaScript,这意味着您用于发送匹配的 analytics.js 命令可能没有机会执行。

例如,您要向 Google Analytics 发送事件以记录用户点击了表单的提交按钮。但在大多数情况下,点击提交按钮会立即开始加载下一个页面,不会再执行任何 ga(‘send’, …) 命令。

解决方法是拦截该事件以阻止页面卸载。然后按通常方式向 Google Analytics(分析)发送匹配,发送完成后,立即以程序化方式重新提交表单。

hitCallback

要在匹配发送完成时获得通知,您需要设置 hitCallback 字段。hitCallback 是一个函数,当匹配发送成功时该函数会立即得到调用。

以下示例说明如何取消表单的默认提交操作、向 Google Analytics(分析)发送匹配以及使用 hitCallback 函数重新提交该表单:

// Gets a reference to the form element, assuming// it contains the id attribute "signup-form".var form = document.getElementById('signup-form');// Adds a listener for the "submit" event.form.addEventListener('submit', function(event) {  // Prevents the browser from submitting the form  // and thus unloading the current page.  event.preventDefault();  // Sends the event to Google Analytics and  // resubmits the form once the hit is done.  ga('send', 'event', 'Signup Form', 'submit', {    hitCallback: function() {      form.submit();    }  });});
处理超时情况

以上示例所介绍的方法虽然行之有效,但存在一个严重问题。如果(无论是由于何种原因)无法加载 analytics.js 库,则 hitCallback 函数将永远无法运行。如果 hitCallback 函数无法运行,用户将永远无法提交表单。

当您在 hitCallback 函数中添加重要的网站功能时,应该一律使用超时函数来处理 analytics.js 库无法加载的情况。

下例更新了上述代码以使用超时处理。如果 hitCallback 在用户点击提交按钮一秒钟之后还未运行,则立即重新提交该表单。

// Gets a reference to the form element, assuming// it contains the id attribute "signup-form".var form = document.getElementById('signup-form');// Adds a listener for the "submit" event.form.addEventListener('submit', function(event) {  // Prevents the browser from submitting the form  // and thus unloading the current page.  event.preventDefault();  // Creates a timeout to call `submitForm` after one second.  setTimeout(submitForm, 1000);  // Keeps track of whether or not the form has been submitted.  // This prevents the form from being submitted twice in cases  // where `hitCallback` fires normally.  var formSubmitted = false;  function submitForm() {    if (!formSubmitted) {      formSubmitted = true;      form.submit();    }  }  // Sends the event to Google Analytics and  // resubmits the form once the hit is done.  ga('send', 'event', 'Signup Form', 'submit', {    hitCallback: submitForm  });});

如果您在整个网站中多处使用了上述处理模式,则创建一个辅助函数来处理超时更为方便。

以下辅助函数以一个函数作为输入,并返回一个新函数。如果所返回的函数在超时时限以内(默认的超时时限为一秒)得到调用,该函数将清除超时事件并调用输入的函数。如果所返回的函数在超时时限以内未得到调用,则无条件调用输入的函数。

function createFunctionWithTimeout(callback, opt_timeout) {  var called = false;  function fn() {    if (!called) {      called = true;      callback();    }  }  setTimeout(fn, opt_timeout || 1000);  return fn;}

通过这种方式,您可以使用超时处理轻松封装所有 hitCallback 函数,即使在您的匹配发送失败或 analytics.js 库根本未载入的情况下也可以确保您的网站正常工作。

// Gets a reference to the form element, assuming// it contains the id attribute "signup-form".var form = document.getElementById('signup-form');// Adds a listener for the "submit" event.form.addEventListener('submit', function(event) {  // Prevents the browser from submitting the form  // and thus unloading the current page.  event.preventDefault();  // Sends the event to Google Analytics and  // resubmits the form once the hit is done.  ga('send', 'event', 'Signup Form', 'submit', {    hitCallback: createFunctionWithTimeout(function() {      form.submit();    })  });});

指定不同的传输机制

默认情况下,analytics.js 会选择 HTTP 方法和传输机制以优化匹配的发送。使用这种机制时有三种选项,分别为:’image’(使用 Image 对象)、’xhr’(使用 XMLHttpRequest 对象)或 ‘beacon’(使用新的 navigator.sendBeacon 方法)。

前两种方法都具有上一部分所描述的问题(如果遇到网页卸载的情况匹配往往无法发送)。相比之下,navigator.sendBeacon 方法则是为解决此问题而创建的全新 HTML 功能。

如果您的浏览器支持 navigator.sendBeacon,您就可以将 ‘beacon’ 指定为 transport 机制,而且无需为设置匹配回调函数而操心。

以下代码在支持此功能的浏览器中将传输机制设置为 ‘beacon’。

ga('create', 'UA-XXXXX-Y', 'auto');// Updates the tracker to use `navigator.sendBeacon` if available.ga('set', 'transport', 'beacon');

目前,仅当在传输机制设置为 ‘beacon’ 的情况下,analytics.js 才使用 navigator.sendBeacon。但是将来 analytics.js 很可能会在支持此功能的浏览器中改用 ‘beacon’ 作为默认机制。

后续步骤

衡量某些类型的用户互动有时需要完成复杂的实现。不过,在许多情况下这些实现已开发完成并作为 analytics.js 插件供您使用。下一篇指南将介绍如何通过 ga() 命令队列使用 analytics.js 插件。

使用插件

插件是用于增强 analytics.js 的功能以帮助衡量用户交互情况的脚本。插件特指一组并非所有 Google Analytics(分析)用户都需要使用的功能,例如电子商务或跨网域跟踪,因此默认情况下未包含在 analytics.js 中。

本指南说明如何请求和使用 analytics.js 插件。

请求插件

require 命令需要使用插件名称,并注册该插件以便在 ga() 命令队列中使用。如果插件接受配置选项,可以将这些选项作为排在最后的参数传递给 require 命令。

下面是完整的 require 命令签名:

ga('[trackerName.]require', pluginName, [pluginOptions]);

例如,您应该用以下命令调用来请求增强型电子商务插件,以便将其与默认跟踪器搭配使用:

ga('require', 'ec');

下例显示了如何为名称为 “myTracker” 的跟踪器请求展示广告功能插件,并通过传递配置选项替换默认的 Cookie 名称值:

ga('myTracker.require', 'displayfeatures', {  cookieName: 'display_features_cookie'});
加载插件代码

require 命令会初始化插件的方法以便在 ga() 命令队列中使用,但该命令本身不会加载插件脚本。如果您要使用第三方插件或自己编写插件,则需要在网页中手动添加插件代码。

在网页中添加插件代码的推荐方式是使用 <script> 标记并设置 async 属性,以确保该插件不会阻止您网站上其他功能的加载。

以下代码请求并加载了一个假设的链接跟踪插件:

<script>ga('create', 'UA-XXXXX-Y', 'auto');ga('require', 'linkTracker');ga('send', 'pageview');</script><!--Note: plugin scripts must be included after the tracking snippet. --><script async src="/path/to/link-tracker-plugin.js"></script>

请注意:用于 analytics.js 的官方 Google Analytics(分析)插件是在收到请求时自动加载的,您无需为其添加脚本代码。您可以在左侧导航栏的官方插件部分查看 analytics.js 官方插件的完整列表。

等待插件加载完成

由于 analytics.js 库和 analytics.js 插件都是异步加载的,因此不易确定插件何时加载完成可供使用。

analytics.js 库解决此问题的方式是,在命令队列遇到 require 命令对尚未加载的插件进行请求时暂停命令队列的执行。当插件加载后,立即恢复命令队列的正常执行。

因此,对您要使用的插件进行测试以确保其成功加载和正确运行非常重要。如果某个插件无法加载或出错,就会造成后面所有的 analytics.js 命令都无法执行。

调用插件的方法

对插件发出请求后,就可以使用 ga() 命令队列调用其方法。下面是调用插件方法的命令签名:

ga('[trackerName.][pluginName:]methodName', ...args);

例如,您可以用如下代码调用增强型电子商务插件的 addProduct 方法:

ga('ec:addProduct', {  'id': 'P12345',  'quantity': 1});

您也可以在以上命令字符串中添加跟踪器名称,针对已命名的跟踪器调用该方法:

ga('myTracker.ec:addProduct', {  'id': 'P12345',  'quantity': 1});

后续步骤

阅读了这一部分的所有指南文章后,您应该已经熟悉 analytics.js 的大多数功能。下一篇指南将介绍如何调试您的 analytics.js 实现以轻松发现错误并确保代码的执行情况完全符合预期。

调试

本指南介绍如何使用调试版 analytics.js 库来确保您的实现方案正常工作。

调试版 analytics.js 库

Google Analytics(分析)提供了调试版的 analytics.js 库,它在运行时会将详细信息记入 Javascript 控制台日志。这些信息中包括命令成功执行,也包括警告和错误信息,当您的跟踪器设置有误时,这些信息可让您了解问题所在。此机制还可以对发送给 Google Analytics(分析)的每个匹配进行解析,让您了解当前跟踪的具体数据。

要启用调试版 analytics.js,您可将 JavaScript 跟踪代码段中的网址从 https://www.google-analytics.com/analytics.js 更改为 https://www.google-analytics.com/analytics_debug.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','https://www.google-analytics.com/analytics_debug.js','ga');ga('create', 'UA-XXXXX-Y', 'auto');ga('send', 'pageview');

请注意:调试版 analytics.js 应该仅在开发和测试阶段使用,因为该版本比 analytics.js 大得多,会让网页加载速度变慢。

在不发送匹配的情况下测试您的实现方案

调试版 analytics.js 也会像非调试版那样向 Google Analytics(分析)发送数据。得益于此,您可以访问运行 analytics.js 代码的网站并检查实现方案,而不会干扰到所跟踪的数据。

在特定情况下(例如在开发或测试环境中),如果您不想向 Google Analytics(分析)发送数据,则可以停用 sendHitTask 任务,之后便不会发送任何数据。

在 localhost 上运行时,使用以下代码可阻止将任何匹配发送到 Google Analytics(分析):

(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','https://www.google-analytics.com/analytics_debug.js','ga');ga('create', 'UA-XXXXX-Y', 'auto');if (location.hostname == 'localhost') {  ga('set', 'sendHitTask', null);}ga('send', 'pageview');
跟踪调试

启用跟踪调试会向控制台输出更冗长的信息。

要启用跟踪调试,请按上述说明加载调试版 analytics.js,然后将下面这行 JavaScript 代码添加到跟踪代码段中,放在对 ga() 命令队列的任何调用之前。

window.ga_debug = {trace: true};

启用了跟踪调试的完整跟踪代码段如下所示:

(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','https://www.google-analytics.com/analytics_debug.js','ga');window.ga_debug = {trace: true};ga('create', 'UA-XXXXX-Y', 'auto');ga('send', 'pageview');

Chrome 扩展程序:Google Analytics Debugger

Google Analytics(分析)还提供了让您无需更改跟踪代码即可启用调试版 analytics.js 的 Chrome 扩展程序。借助该扩展程序,您不仅可以调试自己的网站,还可以查看其他网站是如何利用 analytics.js 实现 Google Analytics(分析)跟踪功能的。

Google Tag Assistant

Google Tag Assistant 是 Chrome 扩展程序,可以帮助您验证您网站上的跟踪代码,以及排查常见问题。这是一款十分理想的工具,可以帮助您在本地调试和测试您的 analytics.js 实现方案,确保一切都正确无误后,再将您的代码部署到生产环境中。

Tag Assistant 之所以能够做到这一点,是因为它让您记录了典型的用户流。它会跟踪您发送的所有匹配,检查它们是否存在任何问题,并为您提供完整的互动报告。如果 Tag Assistant 检测到任何问题或可能的改进,会通知您。

要了解详情,请访问帮助中心,参阅 Tag Assistant 简介以及 Tag Assistant 记录简介。您还可以观看此演示视频,了解如何使用 Tag Assistant 发现错误和检查跨网域跟踪等高级跟踪实现方案的有效性。

网页跟踪

您可以通过网页跟踪来衡量网站上特定网页获得的浏览次数。网页通常对应于整个 HTML 文档,但也可以表现动态加载的内容,这种情况也称为“虚拟网页浏览”。

本指南介绍如何使用 analytics.js 实现网页跟踪。

概览

JavaScript 跟踪代码段中包含创建跟踪器对象的命令,在此命令之后包含向 Google Analytics(分析)发送网页浏览的命令。在创建跟踪器时,会基于浏览器的具体情况设置跟踪器中的若干字段。title 字段会设为 document.title 的值,location 字段会设为 document.location 的值,并忽略网址的定位点部分。

请注意:如果网址的定位点部分包含广告系列参数,这些参数会保留在定位点中,并发送到 Google Analytics(分析)进行处理(除非将 allowAnchor 字段定义为 false)。

在执行 send 命令时,会发送跟踪器上存储的 title 和 location 字段,Google Analytics(分析)使用这些值来向您显示用户访问了哪些网页。

默认跟踪器不会设置 page 字段,但如果您手动设置了该字段,其值将会取代 location 字段的值,在报告中用作网页路径。

实现

可以通过使用 send 命令并将 hitType 指定为 pageview 来发送网页浏览匹配。针对 pageview 匹配类型的 send 命令使用以下签名:

ga('send', 'pageview', [page], [fieldsObject]);
网页浏览字段

下表汇总了与网页浏览相关的主要字段。要了解详细信息(以及某些附加字段),请参阅字段参考的内容信息部分。

字段名称| 值类型| 必填 |说明
–| –| –|–
title | text| 否|网页的标题(例如“首页”)
location| text| 否*|所跟踪网页的网址。
page | text| 否*|网址的路径部分。此值应以斜杠 (/) 字符开头。

* 虽然 page 字段和 location 字段都不是必需的,但必须使用两者之一,否则匹配无效。

示例:

以下命令向 Google Analytics(分析)发送网页浏览匹配和当前页面的路径。

ga('send', 'pageview', location.pathname);

注意,在使用所有 send 命令时,通过便捷参数传递的字段也可以通过 fieldsObject 指定。上述命令可改写为:

ga('send', {  hitType: 'pageview',  page: location.pathname});

要了解关于发送匹配的更多详情、示例和最佳做法,请参阅向 Google Analytics(分析)发送数据指南。要详细了解 send 命令的调用签名,请参阅命令队列参考。

修改页面的网址

在某些情况下,您要向 Google Analytics(分析)发送的网址与用户浏览器地址栏中显示的网址不同。例如,某个网站包含几个网页,用户可以登录和查看/修改其个人信息。如果此网站为个人信息、帐号信息和通知设置使用不同网页,这些网页可能会使用如下所示的网址:

  • /user/USER_ID/profile
  • /user/USER_ID/account
  • /user/USER_ID/notifications

如果您想了解总共有多少人访问过这些网页,通过在这些网址中包含唯一用户 ID 值的方式并不容易计算。

要解决此问题,可以指定一个 page 值,并移除用户 ID:

// Checks to see if the current user's userID is// found in the URL, if it is, remove it.// (Note, this assume the user ID is stored// in a variable called `userID`)if (document.location.pathname.indexOf('user/' + userID) > -1) {  var page = document.location.pathname.replace('user/' + userID, 'user');  ga('send', 'pageview', page);}

这将会发送所有用户的以下 page 值:

  • /user/profile
  • /user/account
  • /user/notifications

如果当前网页正在发送其他匹配(例如事件),您需要确保发送的每个匹配都具有正确的网址。在这种情况下,您应该更新跟踪器上的 page 字段,而不应通过 send 命令来传递该字段。

在跟踪器上进行设置可以确保将新的 page 值用于之后的所有匹配:

if (document.location.pathname.indexOf('user/' + userID) > -1) {  var page = document.location.pathname.replace('user/' + userID, 'user');  // Sets the page value on the tracker.  ga('set', 'page', page);  // Sending the pageview no longer requires passing the page  // value since it's now stored on the tracker object.  ga('send', 'pageview');}
跟踪虚拟网页浏览

如今许多网站都通过 AJAX 动态加载内容,在加载每个“网页”时无需将其完全载入。这些网站通常称为单一网页应用。

如果您的网站动态加载网页内容并更新文档的网址,您通常需要发送额外的网页浏览以跟踪这些“虚拟网页浏览”。有关实现方面的详尽信息,请参阅使用 analytics.js 进行单一网页应用跟踪指南。

事件跟踪

本指南介绍如何使用 analytics.js 实现事件跟踪。

概览

“事件”是指用户与内容进行的互动,可以独立于网页或屏幕的加载而进行跟踪。下载、移动广告点击、小工具、Flash 元素、AJAX 嵌入式元素以及视频播放都是可以作为事件进行跟踪的操作。

如果您不熟悉 Google Analytics(分析)中的事件,则应该首先阅读 Google Analytics(分析)帮助中心中的事件简介这篇文章。

实现

可以通过使用 send 命令并将 hitType 指定为 event 来发送事件匹配。针对 event 匹配类型的 send 命令使用以下签名:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
事件字段

下表概述了所有事件字段:

字段名称 |值类型 |是否必须提供 |说明
– | – | – |–
eventCategory |text |是 |通常是用户与之互动的对象(例如 ‘Video’)
eventAction |text |是 |互动类型(例如 ‘play’)
eventLabel |text |否 |用于对事件进行分类(例如 ‘Fall Campaign’)
eventValue |integer |否 |与事件相关的数值(例如 42)

有关各个字段的详细说明,请查看 Google Analytics(分析)帮助中心中的事件解析。

示例:

以下命令向 Google Analytics(分析)发送一个事件,指明用户播放了秋季广告系列推广视频:

ga('send', 'event', 'Videos', 'play', 'Fall Campaign');

注意,在使用所有 send 命令时,通过便捷参数传递的字段也可以通过 fieldsObject 指定。上述命令可改写为:

ga('send', {  hitType: 'event',  eventCategory: 'Videos',  eventAction: 'play',  eventLabel: 'Fall Campaign'});

要了解关于发送匹配的更多详情、示例和最佳做法,请参阅向 Google Analytics(分析)发送数据指南。要详细了解 send 命令的调用签名,请参阅命令队列参考。

出站链接和表单跟踪

如果用户点击指向您网站其他网页的链接,则在用户到达时,该网页通常发送网页浏览匹配。因为有一系列的网页浏览,Google Analytics(分析)可以在后端明确用户导航的出入位置。但是,如果用户点击了链接或向域外提交了表单,则除非您将所发生的情况明确告知 Google Analytics(分析),否则该操作不会被捕获。

可以通过发送事件以及在某个事件字段中指定目标网址来完成对出站链接和表单的跟踪。可以使用下面的事件处理函数将出站链接点击事件发送给 Google Analytics(分析):

function handleOutboundLinkClicks(event) {  ga('send', 'event', {    eventCategory: 'Outbound Link',    eventAction: 'click',    eventLabel: event.target.href  });}

出站链接和表单可能会非常难于跟踪,因为大多数浏览器会在开始加载新网页时停止在当前网页上执行 JavaScript。解决此问题的一种方式是将 transport 字段设置为 beacon:

function handleOutboundLinkClicks(event) {  ga('send', 'event', {    eventCategory: 'Outbound Link',    eventAction: 'click',    eventLabel: event.target.href,    transport: 'beacon'  });}

对于不支持信标传输方法的浏览器,您必须推迟向下一个页面导航的操作,直到事件完成发送。向 Google Analytics(分析)发送数据指南的了解匹配发送时间一节详细介绍了操作方式。

请注意:希望跟踪出站链接和表单的开发者可使用 autotrack,其中提供了可为您处理这些复杂问题的 outboundLinkTracker 和 outboundFormTracker 插件。有关使用和安装说明,请参阅 autotrack 文档。

非互动事件

在某些情况下,您可能需要将某个事件作为非互动事件发送。为此,请将 send 命令的 fieldsObject 中的 nonInteraction 字段设为 true:

ga('send', 'event', 'Videos', 'play', 'Fall Campaign', {  nonInteraction: true});

要详细了解非互动匹配以及何时使用这些匹配,请参阅 Google Analytics(分析)帮助中心中的非互动事件

社交互动

本指南将介绍如何使用 analytics.js 来衡量社交互动。

概览

您可以使用社交互动分析来衡量用户点击嵌入网页的社交按钮的次数。例如,您可以衡量 Facebook 上的“赞”或 Twitter 上的“Tweet”。

事件跟踪可以非常有效地衡量一般的用户互动,但社交分析可为记录社交互动提供一致的框架,进而提供一套可用于比较多个社交网络上的社交互动的统一报告。

如果您不熟悉 Google Analytics(分析)中的社交互动,或者对于要为社交网络、操作或目标使用什么值没有把握,您应该首先阅读 Google Analytics(分析)帮助中心中的社交插件和社交互动简介一文。

实现

可以使用 send 命令并指定 social 类型的 hitType 来发送社交互动匹配。用于发送 social 匹配类型的 send 命令使用以下签名:

ga('send', 'social', [socialNetwork], [socialAction], [socialTarget], [fieldsObject]);
社交互动字段

下表简要介绍了所有社交互动字段:

字段名称 值类型 必填 说明 socialNetwork text 是 发生操作的网络(例如Facebook、Twitter)。 socialAction text 是 发生的操作类型(例如“赞”、“发送”、Tweet)。 socialTarget text 是 指定社交互动的目标。此值通常是网址,但也可以是任意文字(例如http://mycoolpage.com)

有关每个字段的更深入说明,请参阅 Google Analytics(分析)帮助中心中的数据收集。

示例

以下命令向 Google Analytics(分析)发送一个社交互动匹配,表明用户针对网站 http://myownpersonaldomain.com 点击了 Facebook “赞”按钮。

ga('send', 'social', 'Facebook', 'like', 'http://myownpersonaldomain.com');

注意,在使用所有 send 命令时,通过便捷参数传递的字段也可以通过 fieldsObject 指定。上述命令可改写为:

ga('send', {  hitType: 'social',  socialNetwork: 'Facebook',  socialAction: 'like',  socialTarget: 'http://myownpersonaldomain.com'});

要了解关于发送匹配的更多详情、示例和最佳做法,请参阅向 Google Analytics(分析)发送数据指南。要详细了解 send 命令的调用签名,请参阅命令队列参考。

Facebook

如果您使用官方的 Facebook“赞”按钮且订阅了 edge.create 事件,则发生“赞”操作时,您会得到通知。

FB.Event.subscribe('edge.create', function(url) {  ga('send', 'social', 'facebook', 'like', url);});

有关详情,请参考 Facebook JavaScript SDK。

请注意:使用官方 Facebook 或 Twitter 小部件的开发者可以使用 autotrack,后者包含 socialTracker 插件,可自动跟踪“赞”、“Tweet”和“关注”按钮等社交互动。有关使用和安装说明,请参阅 autotrack 文档。

Google+

默认情况下,Google Analytics(分析)会提供集成的 +1 按钮报告。也就是说,如果您在同一个网页上实现了 analytics.js 和 +1 按钮,系统就会通过网页上的每个跟踪器自动将所有 +1 互动报告为社交互动。有关 +1 分析的详细信息(包括问题排查提示),请参阅帮助中心里的关于社交分析。

应用/屏幕跟踪

本指南将介绍如何通过 analytics.js 使用屏幕跟踪。

概览

Google Analytics(分析)中的屏幕代表用户在应用内查看的内容。此概念相当于网站上的网页。通过衡量屏幕浏览量,您可以了解用户浏览最多的是哪些内容,以及他们如何在不同的内容之间跳转。

实现

可以使用 send 命令并将 hitType 指定为 screenview 来发送屏幕匹配。针对 screenview 匹配类型的 send 命令使用以下签名格式:

ga('send', 'screenview', [fieldsObject]);
屏幕字段
字段名称 值类型 必填 说明 screenName text 是 屏幕的名称。

屏幕数据通常是发送到“应用”(而非“网站”)类型的 Google Analytics(分析)数据视图,这意味着除了发送 screenName 外,您至少还需要发送 appName 字段。

下表列出了可以发往应用数据视图的应用字段列表。

字段名称 值类型 必填 说明 appName text 是 应用名称。 appId text 否 应用的ID。 appVersion text 否 应用版本。 appInstallerId text 否 应用安装程序的 ID。

要详细了解 Google Analytics(分析)中网站数据视图与应用数据视图的差异,请参阅 Google Analytics(分析)帮助中心中的网站数据视图与应用数据视图之间的差异一文。

示例

以下命令向 Google Analytics(分析)发送了一个屏幕浏览匹配,应用名为 “myAppName”,屏幕为“Home”:

ga('send', 'screenview', {  'appName': 'myAppName',  'screenName': 'Home'});

由于发送所有应用匹配时都必须包含 appName 字段,一般来说最好使用 set 命令在跟踪器上设置该字段:

ga('create', 'UA-XXXXX-Y', 'auto');ga('set', 'appName', 'myAppName');// The `appName` field is now set on the tracker, so// screenview hits don't need to include it.ga('send', 'screenview', {screenName: 'Home'});

要了解关于发送匹配的更多详情、示例和最佳做法,请参阅向 Google Analytics(分析)发送数据指南。要详细了解 send 命令的调用签名,请参阅命令队列参考。

使用适用于应用专属数据视图和网络专属数据视图的过滤器

如果您为同一个媒体资源 (UA-XXXXX-Y) 发送网络数据和应用数据,Google Analytics(分析)就会在该媒体资源的数据视图中显示这两组数据。这会将应用数据视图和网络数据视图合并。

如果要为同一个媒体资源发送应用和网络数据,但想要维持单独的应用和/或网络数据视图,您可以创建过滤器。例如,您可以创建一个合并数据视图(默认)、一个网络数据视图和一个应用数据视图。

用户计时

本指南将介绍如何使用 analytics.js 衡量时间段。

概览

研究表明,减少网页加载时间可改善网站的整体用户体验。Google Analytics(分析)有许多功能强大的报告可自动衡量网页加载时间并生成报告。不过,您也可以通过跟踪自定义计时信息来衡量与您网站相关的特定效果信息。

用户计时功能允许开发者使用 analytics.js 库来衡量时间段。如果开发者要衡量提交 AJAX 请求和加载网页资源的延迟时间或所需时间,该功能特别有用。

实现

可以通过使用 send 命令并将 hitType 指定为 timing 来发送用户计时匹配。针对 timing 匹配类型的 send 命令使用以下签名:

ga('send', 'timing', [timingCategory], [timingVar], [timingValue], [timingLabel], [fieldsObject]);
用户计时字段

下表对各用户计时字段进行了概要说明:

字段名称 值类型 必填 说明 timingCategory text 是 用于将所有用户计时变量归类到相应逻辑组的字符串(例如 ‘JS Dependencies’)。 timingVar text 是 用于标识要记录的变量(例如 ‘load’)的字符串。 timingValue integer 是 向 Google Analytics(分析)报告的,以毫秒为单位的历时时间(例如 20)。 timingLabel text 否 可用于提高报告中显示用户计时数据灵活性的字符串(例如 ‘Google CDN’)。

示例:

以下命令向 Google Analytics(分析)发送用户计时匹配,指明当前网页加载其所有外部 JavaScript 依赖关系耗时 3549 毫秒:

ga('send', 'timing', 'JS Dependencies', 'load', 3549);

注意,在使用所有 send 命令时,通过便捷参数传递的字段也可以通过 fieldsObject 指定。上述命令可改写为:

ga('send', {  hitType: 'timing',  timingCategory: 'JS Dependencies',  timingVar: 'load',  timingValue: 3549});

要了解关于发送匹配的更多详情、示例和最佳做法,请参阅向 Google Analytics(分析)发送数据指南。要详细了解 send 命令的调用签名,请参阅命令队列参考。

衡量时间

在发送用户计时数据时,您可以在 timingValue 参数中指定以毫秒为单位的时间值。编写代码捕获此时间段的工作需由您自己完成。

最简单的方法是在时间段的开头创建时间戳,然后在时间段的结尾创建另一个时间戳。然后,您可以利用两个时间戳之间的差异来计算所花费的时间。

大多数新型浏览器都支持 Navigation Timing API,该 API 中 window.performance 对象提供的一些方法可通过高精度时间数据来衡量网页性能。

下例使用了 performance.now() 方法,该方法返回从网页最初加载到目前为止的时长:

// Feature detects Navigation Timing API support.if (window.performance) {  // Gets the number of milliseconds since page load  // (and rounds the result since the value must be an integer).  var timeSincePageLoad = Math.round(performance.now());  // Sends the timing hit to Google Analytics.  ga('send', 'timing', 'JS Dependencies', 'load', timeSincePageLoad);}

有关抽样的注意事项

Google Analytics(分析)会在处理过程中对计时匹配进行抽样,以确保针对此功能公平分配系统资源。

计时匹配的抽样率取决于系统针对相应媒体资源在前一天所接收到的网页浏览匹配总数。下表简要说明了计时抽样率的确定方式。

网页浏览匹配总数(前一天) 系统最多可处理的计时匹配数 0 - 1000 100 1000 - 100000 网页浏览匹配总数的 10% 100000 - 1000000 10000 1000000+ 网页浏览匹配总数的 1%
限制所发送的匹配数

为避免向 Google Analytics(分析)发送得不到处理的匹配,analytics.js 通过 sampleRate 和 siteSpeedSampleRate 配置选项来让您控制要发送的匹配的比例。默认情况下,这两个字段分别设置为 100% 和 1%。您可以根据您的平均每日网页浏览量来调整这些数值,以使其更接近于 Google Analytics(分析)将会处理的计时匹配数。

异常跟踪

本指南将介绍如何使用 analytics.js 发送异常。您可以通过异常跟踪衡量网络资源上发生崩溃或错误的数量和类型。

实现

可以使用 send 命令并将 hitType 指定为 exception 来发送异常匹配。send 命令在用于 exception 匹配类型时的调用签名为如下所示:

ga('send', 'exception', [fieldsObject]);
异常字段

下表列出了所有异常字段:

字段名称 值类型 必填 说明 exDescription text 否 对异常的说明。 exFatal boolean 否 true 表示异常属于严重类型。

示例

以下 try/catch 块中封装的命令逻辑可能会出错。如果发生错误,它就会向 Google Analytics(分析)发送一个异常匹配:

try {  // Runs code that may or may not work.  window.possiblyUndefinedFunction();} catch(err) {  ga('send', 'exception', {    'exDescription': err.message,    'exFatal': false  });}

Cookie 和用户识别

为让 Google Analytics(分析)能够确定两个不同匹配是否属于同一用户,必须将与特定用户关联的唯一标识和每个匹配一同发送。

analytics.js 库通过 Client-ID 字段来完成此任务,Client-ID 是随机生成的独一无二的字符串,生成后的 ID 存储在浏览器的 Cookie 中,这样即可在用户和其访问过的相同网站之间建立关联。

默认情况下,analytics.js 使用一个名为 ga 的第一方 Cookie 来存储该 Client-ID,但该 Cookie 的名称、网域和有效期均可自定义。analytics.js 创建的其他 Cookie 包括 _gid、AMP_TOKEN 和 _gac。这些 Cookie 存储用户的其他随机生成 ID 和广告系列信息。

analytics.js 能够借助 Cookie 跨浏览器会话识别用户,但无法跨浏览器或跨设备识别不同浏览器或设备上的用户。如果您的网站拥有自己的身份验证系统,则除了 Client ID 之外您还可以使用 User ID 功能,从而更准确地在用户用于访问您网站的所有设备上跨设备识别用户。

本指南介绍如何自定义 Cookie 设置和如何设置 User ID 字段,以便更准确地跨会话跟踪用户。

注意:您可以参考 Cookie 用法指南,详细了解 analytics.js 如何使用 Cookie。

下表显示了 analytics.js 使用的默认 Cookie 字段值:

字段名称 值类型 默认值 cookieName 文字 _ga cookieDomain 文字 以下 JavaScript 表达式的结果:
document.location.hostname cookieExpires 整数 63072000(两年,以秒为单位)

要修改以上任何值,可以在传递给 create 命令的 fieldObject 中指定。例如:

ga('create', 'UA-XXXXX-Y', {  'cookieName': 'gaCookie',  'cookieDomain': 'blog.example.co.uk',  'cookieExpires': 60 * 60 * 24 * 28  // Time in seconds.});

由于经常需要设置的 Cookie 字段是 cookieDomain,为方便起见 create 命令接受 cookieDomain 字段作为可选的第三个参数:

ga('create', 'UA-XXXXX-Y', 'blog.example.co.uk');

注意:cookieDomain 必须是当前网域的上级,否则便无法设置 Cookie。例如,如果您的网域是 one.two.three.root.com,您应配置 Cookie 在 root.com 而非 someotherdomain.com 上设置。设置不正确的 Cookie 网域将导致系统不会发送任何匹配到 Google Analytics(分析)。

推荐的 JavaScript 跟踪代码段为 cookieDomain 字段设置了字符串 ‘auto’:

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

将 cookieDomain 指定为 ‘auto’ 会启用自动 Cookie 网域配置,它指示 analytics.js 自动确定要使用的最佳 Cookie 网域。

自动 Cookie 网域配置会在可能的最高级网域上设置 _ga Cookie。例如,如果您的网址为 blog.example.co.uk,analytics.js 就会将 Cookie 设置到 .example.co.uk 网域上。此外,如果 analytics.js 检测到您在本地运行服务器(例如 localhost),则会自动将 cookieDomain 设为 ‘none’。

在使用自动 Cookie 网域配置的情况下,无需任何额外配置即可在所有子网域上跟踪您的用户。

每次当匹配发送至 Google Analytics(分析)时,Cookie 过期时间都会更新为当前时间加上 cookieExpires 字段的值。这意味着,如果您使用默认的 cookieExpires 时间(两年),而用户每个月都会访问您的网站,那么他们的 Cookie 永远都不会过期。

如果您将 cookieExpires 时间设为 0(零)秒,Cookie 将变成基于会话的 Cookie,并在当前浏览器会话结束后马上过期:

您不应该直接访问 analytics.js 设置的 Cookie,因为 Cookie 格式以后可能会变更。开发者应该采用的方式是使用 readyCallback 等待 analytics.js 加载完成,然后获取存储在跟踪器上的 clientId 值。

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

在某些情况下,您可能希望使用自己的存储机制(例如 localStorage 或 Service Worker)来跨会话存储 Client ID,而不是使用 Cookie。为此,您可以将 storage 字段设置为 ‘none’ 来禁止 analytics.js 设置 Cookie。

ga('create', 'UA-XXXXX-Y', {  'storage': 'none'});

如果您以自己的方式存储 clientId 字段,则需要确保在创建跟踪器时对 cliendId 字段进行设置。

ga('create', 'UA-XXXXX-Y', {  'storage': 'none',  'clientId': '76c24efd-ec42-492a-92df-c62cfd4540a3'});

要停用 _gac_<property-id> Cookie,请在 create 命令中将 storeGac 字段设置为 false。

ga('create', 'UA-XXXXX-Y', {  storeGac: false,});
使用 localStorage 来存储 Client ID

以下代码示例显示了如何修改 JavaScript 跟踪代码段以便使用 localStorage(而非 Cookie)来存储 Client ID:

var GA_LOCAL_STORAGE_KEY = 'ga:clientId';if (window.localStorage) {  ga('create', 'UA-XXXXX-Y', {    'storage': 'none',    'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)  });  ga(function(tracker) {    localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));  });}else {  ga('create', 'UA-XXXXX-Y', 'auto');}ga('send', 'pageview');

注意:与 Cookie 不同,localStorage 受同源政策的制约。如果您网站的各部分属于不同的子域,或某些网页使用 http 而另一些网页使用 https,则不能使用 localStorage 在这些网页之间跟踪用户。由于这个原因,Cookie 仍然是推荐的 Client ID 存储方式。

User ID

借助 User ID,您可以使用一个代表用户的固定不变、独一无二的非个人身份 ID 字符串来跨设备分析会话组。要了解为何应实现 User ID,请查看使用 User ID 功能的优势。

要通过 analytics.js 实现 User ID,请按以下步骤操作:

  1. 提供您自己用于代表每个登录用户的字符串 ID,该 ID 必须具备唯一性,持久化存储,且不可用于识别个人身份。此 ID 通常由身份验证系统提供。
  2. 在跟踪器上设置 User ID:
ga('create', 'UA-XXXXX-Y', 'auto', {  userId: USER_ID});ga('send', 'pageview');

重要提示!USER_ID 值应是一个独一无二的永久性非个人身份字符串,在所有设备上代表对应的用户或已登录帐户。

页面加载后处理身份验证

如果创建初始网页加载后处理用户登录的单页应用或其他动态网站,在创建时不能执行在跟踪器上设置 User ID 值的过程。

在这种情况下,您可以使用 set 命令在获得该值时在跟踪器上进行设置。

// Creates the tracker and sends a pageview as normal// since the `userId` value is not yet known.ga('create', 'UA-XXXXX-Y', 'auto');ga('send', 'pageview');// At a later time, once the `userId` value is known,// sets the value on the tracker.ga('set', 'userId', USER_ID);

如果使用此方法,在设置 userId 字段前发送的匹配不会包含 User ID 值。然而,利用会话统一这一过程,Google Analytics(分析)可以在处理过程中将这些匹配与正确的用户关联。

IP 匿名化

在一些情况下,您可能需要对发送给 Google Analytics(分析)的匹配的 IP 地址做匿名化处理。

针对所有匹配

要将某个跟踪器发送的所有匹配的 IP 地址匿名化,可以在创建该跟踪器时将 anonymizeIp 字段设为 true。

ga('create', 'UA-XXXXX-Y', 'auto', {  anonymizeIp: true});

也可以在跟踪器创建之后使用 set 命令在该跟踪器上进行设置:

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

针对单个匹配

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

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

电子商务跟踪

本指南将介绍如何使用 analytics.js 收集电子商务数据。

概览

通过电子商务跟踪,您可以衡量网站产生的交易次数和收入。在典型的电子商务网站上,当用户在浏览器中点击“购买”按钮时,用户的购买信息就会发送给执行交易的网络服务器。如果成功,服务器会将用户重定向至提供交易详情和购买收据的“谢谢”页面或收据页面。您可以使用 analytics.js 库将“谢谢”页面中的电子商务数据发送到 Google Analytics(分析)。

重要提示:电子商务插件不应与增强型电子商务 (ec.js) 插件一起使用。

您可以使用 analytics.js 发送两种类型的电子商务数据:交易数据和商品数据。

交易数据

交易是指发生在您网站上的完整交易,包括以下值:

键 值类型 必填 说明 id text 是 交易 ID(例如 1234)。 affiliation text 否 发生此交易的商店或联属机构(例如 Acme Clothing)。 revenue currency 否 与当次交易关联的总收入或总计金额(例如 11.99)。此值包含运费、税费或其他要计入 revenue 的总收入调整值。 shipping currency 否 指定交易的总运费(例如 5)。 tax currency 否 指定交易的税款总额(例如 1.29)。
商品数据

商品指购物车里的单款产品,包括以下值:

键 值类型 必填 说明 id text 是 交易 ID。此 ID 将商品与其所属的交易关联在一起(例如 1234)。 name text 是 商品名称(例如粉色绒毛小兔)。 sku text 否 指定 SKU 或商品代码(例如 SKU47)。 category text 否 商品所属类别(例如聚会玩具)。 price currency 否 每件商品的单价(例如 11.99)。 quantity integer 否 在交易中购买的商品数量。如果传递到此字段的是非整数值(例如 1.5),将舍入为最接近的整数值。

实现

您通常应在用户完成结帐过程后马上实现电子商务跟踪。这通常发生在“谢谢”页面上。在获得电子商务数据并准备好发送给 Google Analytics(分析)后,您应完成以下几个步骤:

  • 加载电子商务插件
  • 添加交易
  • 添加商品
  • 发送数据
  • 清除数据
加载电子商务插件

为减小 analytics.js 库的规模,增强型电子商务跟踪不在默认库中提供,而是以需要在使用前加载的插件模块的形式提供。

要加载电子商务插件,请使用以下命令:

ga('require', 'ecommerce');

此命令必须是在您创建跟踪器对象之后,使用任何电子商务相关的具体功能之前执行。

加载后,系统将向默认跟踪器添加几个电子商务跟踪专用的新命令。

添加交易

插件加载后就会创建透明的购物车对象。您可以将交易和商品数据添加到购物车,并在完全配置后一次性发送全部数据。

您可以使用 ecommerce:addTransaction 命令向购物车添加交易数据:

ga('ecommerce:addTransaction', {  'id': '1234',                     // Transaction ID. Required.  'affiliation': 'Acme Clothing',   // Affiliation or store name.  'revenue': '11.99',               // Grand Total.  'shipping': '5',                  // Shipping.  'tax': '1.29'                     // Tax.});
添加商品

下一步,要向购物车添加商品,您可以使用 ecommerce:addItem 命令:

ga('ecommerce:addItem', {  'id': '1234',                     // Transaction ID. Required.  'name': 'Fluffy Pink Bunnies',    // Product name. Required.  'sku': 'DD23444',                 // SKU/code.  'category': 'Party Toys',         // Category or variation.  'price': '11.99',                 // Unit price.  'quantity': '1'                   // Quantity.});
发送数据

最后,在购物车中配置所有电子商务数据后,您可以使用 ecommerce:send 命令向 Google Analytics(分析)发送数据:

ga('ecommerce:send');

此命令将仔细检查购物车中的每笔交易和每件商品,并将相应的数据发送给 Google Analytics(分析)。完成后,系统将清空购物车并准备发送新交易的数据。如果发出的是之前的 ecommerce:send 命令,系统只会发送新的交易和商品数据。

请注意:虽然大部分的实现方式都会同时发送交易和商品数据,但您也可以只发送交易数据而不发送商品数据,或者只发送商品数据而不发送交易数据。如果您发送商品匹配而不发送交易信息,系统将自动发送只有 ID 的交易匹配。

清除数据

如果需要手动清除购物车中的所有交易和商品,可使用以下命令:

ga('ecommerce:clear');
指定局部货币

默认情况下,您可以通过 Google Analytics(分析)的管理网络界面为所有交易和商品配置一种通用的全局货币。系统默认会为所有商品和交易使用全局货币。使用多种货币开展交易的网站可通过电子商务插件指定交易和个别产品的局部货币。

局部货币必须按 ISO 4217 标准指定。如需支持的完整转换货币列表,请参阅货币代码参考文档。

要设置特定交易及其所有商品的局部货币,您只需为交易指定该货币即可:

ga('ecommerce:addTransaction', {  'id': '1234',  'affiliation': 'Acme Clothing',  'revenue': '11.99',  'shipping': '5',  'tax': '1.29',  'currency': 'EUR'  // local currency code.});

最后,您还可以按商品指定货币:

ga('ecommerce:addItem', {    'id': '1234',    'name': 'Fluffy Pink Bunnies',    'sku': 'DD23444',    'category': 'Party Toys',    'price': '11.99',    'quantity': '1',    'currency': 'GBP' // local currency code.});

要详细了解 Google Analytics(分析)中的货币转换机制,请参阅电子商务功能参考中的多种货币部分。

多跟踪器支持

如果您在页面上实现了多个(有名称的)跟踪器,您也可以使用电子商务插件。插件的工作方式与默认跟踪器完全相同,唯一的区别在于格式:trackerName.pluginName:method。例如,假设您创建了名为 myTracker 的跟踪器:

ga('create', 'UA-XXXXX-Y', 'auto', {'name': 'myTracker'});

然后,您应使用以下命令为该已命名的跟踪器加载电子商务插件:

ga('myTracker.require', 'ecommerce');

要发送交易,您可以创建交易对象并按如下所示将其传递给已命名的跟踪器:

var transaction = {  'id': '1234',                    // Transaction ID.  'affiliation': 'Acme Clothing',  // Affiliation or store name.  'revenue': '11.99',              // Grand Total.  'shipping': '5' ,                // Shipping.  'tax': '1.29'                    // Tax.};ga('myTracker.ecommerce:addTransaction', transaction);

通过使用此语法,交易对象可用在多个跟踪器上。

最后,您应按如下方式发送交易数据:

ga('myTracker.ecommerce:send');

示例

大多数电子商务网站在服务器上执行交易,但 analytics.js 库是从浏览器发送数据到 Google Analytics(分析)。因此,为了正确发送电子商务数据到 Google Analytics(分析),服务器与客户端之间必须进行一定的协作。

大部分电子商务网站都使用服务器端模板引擎呈现“谢谢”页面。在这种情况下,您应向服务器端模板添加电子商务跟踪代码,并使用服务器逻辑来以动态方式将电子商务数据值写入最终页面。以下是在 PHP 中的代码示例。

在 PHP 中,您通常应使用某种形式来呈现电子商务数据。在以下示例中,数据存储在关联数组内:

<?php// Transaction Data$trans = array('id'=>'1234', 'affiliation'=>'Acme Clothing',               'revenue'=>'11.99', 'shipping'=>'5', 'tax'=>'1.29');// List of Items Purchased.$items = array(  array('sku'=>'SDFSDF', 'name'=>'Shoes', 'category'=>'Footwear', 'price'=>'100', 'quantity'=>'1'),  array('sku'=>'123DSW', 'name'=>'Sandles', 'category'=>'Footwear', 'price'=>'87', 'quantity'=>'1'),  array('sku'=>'UHDF93', 'name'=>'Socks', 'category'=>'Footwear', 'price'=>'5.99', 'quantity'=>'2'));?>

第一步,编写相应的逻辑以将电子商务数据转换为 analytics.js 要求的 JavaScript 字符串:

<?php// Function to return the JavaScript representation of a TransactionData object.function getTransactionJs(&$trans) {  return <<<HTMLga('ecommerce:addTransaction', {  'id': '{$trans['id']}',  'affiliation': '{$trans['affiliation']}',  'revenue': '{$trans['revenue']}',  'shipping': '{$trans['shipping']}',  'tax': '{$trans['tax']}'});HTML;}// Function to return the JavaScript representation of an ItemData object.function getItemJs(&$transId, &$item) {  return <<<HTMLga('ecommerce:addItem', {  'id': '$transId',  'name': '{$item['name']}',  'sku': '{$item['sku']}',  'category': '{$item['category']}',  'price': '{$item['price']}',  'quantity': '{$item['quantity']}'});HTML;}?>

然后,在 <script> 代码内添加额外的 PHP 逻辑,以动态方式输出交易和商品数据:

<!-- Begin HTML --><script>ga('require', 'ecommerce');<?phpecho getTransactionJs($trans);foreach ($items as &$item) {  echo getItemJs($trans['id'], $item);}?>ga('ecommerce:send');</script>

在 PHP 脚本完成执行后,analytics.js 所需的交易和商品数据将输出至页面。一旦页面上的 JavaScript 在浏览器中运行,所有的电子商务数据都将发送至 Google Analytics(分析)。

货币类型

默认货币类型可通过管理界面配置。当您使用 analytics.js 发送货币值时,该值代表的是总货币值。

货币整数和小数部分之间可使用小数点作为分隔符。值最多可精确到小数点后 6 位。下面列举了一个可在货币字段中使用的有效值:

1000.000001

货币值发送到 Google Analytics(分析)后,首位数字、字符 - 号或 .(小数点)之前的所有文字都将被移除。因此:

$-55.00

将变为:

-55.00
原创粉丝点击