谷歌分析跟踪代码

第04章

JavaScript

Google Analytics（谷歌分析）基于JavaScript（JS）跟踪代码来跟踪网站数据，这段代码需要放在网站中需要进行数据跟踪的每一个页面内。

创建一个新的Google Analytics账号

首先，你需要创建一个Google Analytics账号。

当你在Gmail中注册一个新的电子邮件地址时，你将得到一个谷歌账号，使用这个账号，您便可通过以下方式登录Google Analytics：

http://www.google.com/analytics/

登陆后，你的Google Analytics账户将自动创建成功。

账户结构

Google Analytics有三层结构：

  • 账户
  • 媒体资源
  • 数据视图

在同一个账户下，可以有多个媒体资源。

媒体资源

在你的Google Analytics账户下，每一个网站都必须在一个新的媒体资源下创建。

假设你拥有以下两个网址：

  • 面向PC端用户（或PC端网站 ）的网站地址为：www.example.com
  • 面向移动端用户（或移动端网站）的网站地址为：m.example.com

你有三种选择给你的网站设置Google Analytics。但最直接的方法是新创建两个媒体资源：

  • 把www.example.com设置为第一个新创建的媒体资源。
  • 把m.example.com设置为第二个新创建的媒体资源。

在这种情况下，以上每一个网站（即媒体资源） 都得到一个独立的Google Analytics媒体资源ID (如： UA-XXXXXXXX-2 和 UA-XXXXXXXX-2)。

数据视图

一个媒体资源可以包含多个数据视图。当你在账户中创建一个新的媒体资源时，一个新的数据视图也会被自动创建。这个数据视图默认包含该媒体资源下的所有数据。

你可以创建多个数据视图，在第二个数据视图中你可以通过应用数据过滤器选取该媒体资源中的一部分数据。比如，第二个数据视图仅包含那些通过移动设备访问你网站的用户。

账户、媒体资源和数据视图

让我们通过一张图来了解你的Google Analytics账户下所有的媒体资源和数据视图：

Tracking Code Setup

具有唯一性的Google Analytics ID对应上图的媒体资源层，即图中的UA-XXXXXXXX-1 和 UA-XXXXXXXX-2。

访问权限

你可以将以下四种权限中的任何一种分配给一个谷歌账号使用者，从而让他们访问Google Analytics报告。

  • 阅读和分析：最低级别的权限，可查看报告、创建自定义报告、创建细分和设置预警。
  • 协作：可以创建个人资源并与他人共享。同时拥有“阅读和分析”权限下的所有操作。
  • 修改
  • 管理用户

如果你只想让使用者查看报告，那么应该授予他“阅读和分析”的权限；如果你需要使用者修改管理信息，那么需要授予他“修改”的权限；如果你需要使用者有添加或删除其他用户的权限，那么应该授予他“管理用户”的权限。

对于每一个Google Analytics的使用者，你可以选择在媒体资源级别或视图级别授予其权限。如：一个使用者在媒体资源m.example.com (UA-XXXXXXXX-2)被授予“修改”权限，那么他便拥有对数据视图2、数据视图2a和数据视图2b的修改权限。

Google Analytics跟踪代码的设置

你需要在媒体资源下获取JavaScript 跟踪代码段（Google Analytics代码），然后将代码放在所有需要跟踪的页面。

获取Google Analytics代码的具体方式如下，首选你需要登录你的Google Analytics账户，在媒体资源下选择你的网站，点击进入跟踪代码：

管理->跟踪信息->跟踪代码

默认情况下，你的Google Analytics跟踪代码应该是如下所示代码段。这是最新版本的Google Analytics跟踪代码，称为Universal 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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

首先看这段跟踪代码的第一部分，它的主要作用是从谷歌服务器中获取包含Google Analytics跟踪库的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.js','ga');

这段Analytics.js库使用了第一方cookie。

Cookie是一个存储在用户浏览器中的文本文件，体积很小，并有如下特征：

  • 包含实际数据的名称-值对
  • 过期之后即失效
  • 负责发送域名和服务器路径

当用户浏览各个网页时，Google Analytics的 JavaScript库记录用户所查看的网页相关信息。

analytics.js设置了以下两种Cookie形式：

Cookie名称 有效期 说明
_ga 2年 用于区分用户
_gat 10分钟 用于限制请求率

这段跟踪代码的第二部分是Google Analytics跟踪代码的核心，当安装了Google Analytics跟踪代码的网页被加载时，有两行命令将被触发：

  • 第一行代码会触发Google Analytics跟踪器，将数据发送到相应的媒体资源ID下。以如下代码为例，数据将被发送至UA-XXXXXXXX-Y，这些数据被记录在你网站所定义的Google Analytics cookie之下。
  • 第二行代码发送1次浏览记录至Google Analytics
ga('create', 'UA-XXXXXXXX-Y', 'auto');
ga('send', 'pageview');

需要注意的是，为了使跟踪代码能够正常的工作，第一行’create’指令必须在’send’指令或其他附加的指令之前。这是因为追踪器必须是首要被触发的。

第一行中的第三个参数’auto’定义了cookies的范围。如果你有特别的需求，可以对第三个参数设置其他值。

如：

  • 如果参数是’auto’且跟踪代码添加在了域名example.com下的所有页面，那么cookies将包括www.example.com和m.example.com。
  • 如果参数为空且跟踪代码添加在了域名example.com下的所有页面，那么cookies将覆盖www.example.com和m.example.com。
  • 如果参数是’example.com’且跟踪代码添加在了域名example.com下的所有页面，那么cookies将包括www.example.com和m.example.com。
  • 如果参数是’www.example.com#039;且跟踪代码添加在了域名example.com下的所有页面，那么cookies将仅包括www.example.com。
  • 如果参数是’m.example.com’且跟踪代码添加在了域名example.com下的所有页面，那么cookies将仅包括m.example.com。

在什么位置放置跟踪代码

Google Analytics的跟踪代码是异步方式加载的，浏览器不用等整段代码完全加载完就可以监测网页的其他部分：

  • 谷歌建议将此代码添加在网站的<head></head>部分来更好地体现异步代码的优势。
  • 也可将代码放在<body></body>部分
  • 如果你的网站是用某些开源代码或付费的内容管理系统（CMS）创建的，那么就需要得到CMS的修改权限，从而来添加/修改Google Analytics跟踪代码。
  • 如果你的网站是通过scratch生成，代码的添加会稍微复杂些。你需要让网站开发者来添加或修改Google Analytics跟踪代码。

当然，在部署 GA 跟踪代码前，你必须要先有一个正在运营的网站。你可很简单的从例如 Siteground、Hostgator 或 Godaddy 购买一个网站寄存空间，并安装 WordPress 作为的网站系统。具体可参考 WordPress 教学。

怎么部署跟踪代码？

如果你恰好有两个网站，一个是PC端网站（www.example.com），另一个是移动端网站（m.example.com），两个都在域名example.com下，那么需要考虑不同的设置方式。

  • 同一媒体资源ID的设置
  • 不同媒体资源ID的设置
  • 高级设置

同一媒体资源ID的设置

设置示例：

Tracking Code Setup

  • 创建一个Google Analytics媒体资源ID（如：UA-XXXXXXXX-1）。
  • 把媒体资源ID为UA-XXXXXXXX-1的跟踪代码放置在你网站的所有页面中（包括www.example.com和m.example.com）。

优势：

  • 在一个媒体资源ID下管理一个网站，所简单易行。
  • 在你的报告中，你拥有的数据是两个网站总的会话数和总用户数。

劣势：

  • 一个媒体资源ID需要存储来自两个网站的数据，那么当数据量级增长很快时，这个媒体资源所展现的数据很快变成抽样数据。
  • 所有的报告所展示数据都是两个网站数据的加和，难以将数据拆分到各个网站。

设置两个不同的媒体资源ID

设置示例：

Trackind code Setup

  • 创建两个媒体资源ID，并把两个网站分别放在不同的媒体资源ID下。如一个媒体资源ID（UA-XXXXXXXX-1）分配给www.example.com，另一个媒体资源ID（UA-XXXXXXXX-2）分配给m.example.com。
  • 把UA-XXXXXXXX-1的跟踪代码放置在www.example.com的所有页面中，同样把UA-XXXXXXXX-2的跟踪代码放置在m.example.com的所有页面中

优势：

  • 不同媒体资源ID的设置使得独立分析两个不同网站数据时变得更容易。
  • 使用两个不同的媒体资源ID，数据抽样的风险较小。

劣势：

  • 你需要为你的网站维护两个不同的媒体资源ID下两个不同的跟踪代码。
  • 难以快速算出两个网站的总会话数和总用户数。

高级设置

设置示例：

Tracking Code Setup

  • 创建一个Google Analytics媒体资源ID（如：UA-XXXXXXXX-1）。
  • 在该媒体资源ID下为不同的网站创建更多的媒体资源ID，如一个ID（UA-XXXXXXXX-2）分配给www.example.com，另一个ID（UA-XXXXXXXX-3）分配给m.example.com。
  • 把媒体资源ID为 UA-XXXXXXXX-1 的跟踪代码放置在你网站的所有页面中（包括www.example.com和m.example.com）。
  • 把媒体资源ID为UA-XXXXXXXX-2的跟踪代码放置在www.example.com的所有页面中，同样把媒体资源ID为UA-XXXXXXXX-3的跟踪代码放置在m.example.com的所有页面中。
  • 然后对跟踪代码作如下修改。

放置在www.example.com的代码修改如下：

ga('create', 'UA-XXXXXXXX-1', 'auto');
ga('send', 'pageview');
ga('create', 'UA-XXXXXXXX-2', 'auto', 'wwwexample');
ga('wwwexample.send', 'pageview');

放置在m.example.com的代码修改如下：

ga('create', 'UA-XXXXXXXX-1', 'auto');
ga('send', 'pageview');
ga('create', 'UA-XXXXXXXX-3', 'auto', 'mexample');
ga('mexample.send', 'pageview');

附加代码的意思是：

  • 为wwwexample 或mexample添加一个附加的Google Analytics跟踪器，跟踪器命名不限制于wwwexample 或mexample。
  • 把浏览量回传给wwwexample 或mexample。

优势：

  • 简化数据的整合和分析，最大的媒体资源ID下两个网站的总会话数和总用户数是已经计算好的。针对每一个小的媒体资源ID（UA-XXXXXXXX-2和UA-XXXXXXXX-3），也是同样的计算方法和展示方法。
  • 即使最大的媒体资源ID进行了数据抽样，另外两个小的媒体资源ID（UA-XXXXXXXX-2和UA-XXXXXXXX-3）在数据抽样时也没有问题。

劣势：

  • 为两个网站维护三个不同的媒体资源ID，操作复杂。
  • 最大的媒体资源ID包含两个网站的数据，在数据抽样时有较大风险。

旧版本的跟踪代码

在异步监测代码发布之前，Google Analytics跟踪代码使用的是同步监测，监测代码如下：

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-XXXXXXXX-X");
pageTracker._trackPageview();
} catch(err) {}
</script>

这些是早期的Google Analytics跟踪代码版本。异步监测代码也经历了早期的旧版本，以下是第一版异步监测代码：

<script type="text/javascript">
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:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

这两个旧版本的跟踪代码和最新的代码都具备相同的功能，即触发Google Analytics跟踪器，并发送一个浏览记录到Google Analytics。

如果你还在用上述两个旧版Google Analytics跟踪代码中的其中一版，那么你需要升级到最新的版本（(i.e. Universal Analytics），也就是异步监测的第二版跟踪代码。

Universal Analytics跟踪代码具备旧版本代码的所有功能（i.e.触发跟踪器并回传浏览量），此外还具备如下功能：

  • Universal Analytics跟踪代码使用一个独立cookie进行数据跟踪 ，且能够在用户的浏览器中生成一个用户ID。
  • Universal Analytics可跨设备追踪用户。当一个用户使用相同的账号信息在不同设备上登录时，Universal Analytics便可以将将用户的这一系列行为进行关联。

数据分析技术白皮书在2016年11月正式出版。

英文版：Google Analytics Tracking Codes – 繁体中文版：谷歌分析跟踪代码






数据分析技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Analytics Book