Google Analytics部署 代码调试(Debug)

上一篇我们讲到了如何部署Google Analytics(Universal Analytics),那么我们如何来检查是否部署正确呢?那么我们就得对页面的跟踪代码进行Debug(调试)了。

简易Debugger(调试工具)

Chrome浏览器插件:Google Tag Assistant

该工具不仅可以检查Google Analytics代码部署情况,也可以检查Google TagManger等代码的部署情况。当我们安装完插件之后,浏览器地址栏的右侧会有一个小Icon,它有几种不同的状态:

  • 蓝色笑脸:没有部署Google相关代码
  • 蓝色数字:部署了一个或者多个Google相关代码,并且部署正确
  • 红色数字:部署了一个或者多个Google相关代码,部署有错误

让我们打开Google Analytics官方网站,并且点击插件按钮:

tag-assistant

可以看到官方网站的代码部署也并不是完全正确的!在该页面一共发现7个标签,其中包含了15处错误。点击绿色或者红色文字,我们可以看到标签的详细信息,也包括错误提示和解决方案的文档(英文)。到这里,我们基本上可以掌握GA代码的简易Debug方法了,工具还附有一些高级设置功能,就不在此一一详述了。

Debug原理与步骤

每次GA跟踪代码执行,都会发送一个文件请求给GA服务器(Universal Analytics是请求collect文件,Classic Analytics是请求__utm.gif文件),并将GA收集到的信息附加在这个请求的查询参数(query string)中,随后GA服务器将处理这些请求日志,并将其中数据统计汇总存储到数据库,最终形成我们看到的数据报告。这些数据包括:

  • URL Pageview 信息
  • Campaign 信息
  • 电子商务数据
  • 浏览器属性
  • 访客唯一ID
  • ……

因此,我们可以通过检查这些请求的详细信息来核查我们的代码部署的是否正确。特别是在当我们看到数据报告有异常数据时候,更应该先检查代码的部署:

  1. 通过第三方工具(如Firebug、Chrome开发者工具、Fiddler)检查collect请求;
  2. 检查代码是否正确;
  3. 核查请求参数 t(请求类型)以及 u(URL);
  4. 检查请求参数 tid(跟踪ID)以及 cid(客户端ID);
  5. 重复检查数次,确保每次请求都有发出。

这里先点到为止,后续会有一篇详细讲解Google Analytics(Universal Analytics)的测量协议,让我们更详细的认识Google Analytics数据收集原理以及数据内容。

其他Debug工具

浏览器 工具
All Firebug Lite
Chrome Google Analytics Tracking Code Debugger 新版!
Chrome 内置开发者工具 (e.g. Resources)
Firefox Live HTTP Headers
Firefox Firebug
Firefox Charles
Internet Explorer Fiddler
Internet Explorer Charles
Safari 内置 Activity 窗口
Safari Charles

至于这类“高级”工具的应用,我会单独一篇Fiddler功能与应用来讲解,让我们捕捉任何联网数据。

参考资料:

Google Analytics部署 网站跟踪代码

Google Analytics的基本部署很简单,我们通过将跟踪代码嵌入到所有需要跟踪网页的</head>标签之前即可。

Google Analytics 跟踪代码

下面是一段Google Analytics(Universal Analytics)的 Javascript 跟踪代码:

<!-- 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','//www.google-analytics.com/analytics.js','ga');

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

</script>
<!-- End Google Analytics -->

谷歌官方推荐我们将代码部署在所有跟踪页面的 </head> 标签之前,当然,我们需要将其中的 UA-XXXX-Y 替换为自己对应媒体资源的跟踪ID。

统计代码会影响网页加载吗?

细心的朋友可能会觉得analytics.js文件放在头部加载,是否会影响网页的加载速度。常见的Javascript加载模式有两种:

  • 同步加载,又称之为阻塞模式。文件的加载会阻塞后续文档的解析,停止了后续的解析,而就暂停了后续文件的加载、渲染、代码执行。js之所以要有同步加载,常常是需要输出内容、修改DOM、重定向等行为,因此认为同步加载是安全的。
  • 异步加载,非阻塞模式。浏览器在下载js的同时,还会进行后续页面的处理。

Universal Analytics跟踪代码中的analytics.js和Classic Analytics中的ga.js一样,默认是异步加载的。因此跟踪放在头部是不会影响网页加载的

另外值得注意的是,建议不要将analytics.js本地化,因为当跟踪代码加载的时候,会先检查本地是否存在analytics.js,然后再决定是否要下载该文件。由于Google Analytics的覆盖率极高,因此用户本地已经存储了文件的概率也就大大增加。可以说,使用Google Analytics是不会影响用户体验的。

创建跟踪ID与发送Pageview

//创建一个跟踪ID,为UA-XXXX-Y
ga('create', 'UA-XXXX-Y');
//向GA服务器发送一个Pageview
ga('send', 'pageview');

这里,我们在网页打开的头部时候就向GA服务器发送了一个Pageview,有些朋友觉得这样统计是不够精准的。希望在一个页面完整被加载完再进行Pageview的统计,那么我们也可以将Send Pageview单独放到网页的 footer(页脚)部分:

<script>
ga('send', 'pageview');
</script>

参考资料:

Classic Analytics与Universal Analytics

Google Analytics在去年推出了新版的Universal Analytics(通用分析),如今Universal Analytics虽然依然是Beta版,但已经处于Google Analytics添加媒体资源的默认选项了。官方给出的新版说明表示,除了现有Google Classic Analytics所有功能以外,新版:

  • 新的数据收集方法:Universal Analytics 引入 analytics.js 代码段作为收集网站数据的主要方法。此 JavaScript 比之前的 Google Analytics(分析)ga.js JavaScript 更加灵活,让您有更多的选项可以自定义数据。
  • 简化的功能配置:Universal Analytics 在 Google Analytics(分析)管理界面中提供了之前仅可通过开发环境才能使用的选项。通过 Universal Analytics,您可以更轻松地自定义配置,如广告系列超时处理和搜索字词排除。
  • 自定义的维度和指标:自定义维度和指标与默认维度和指标类似,唯一的区别在于这些维度和指标由您自行创建。您可以使用它们来收集 Google Analytics(分析)无法自动跟踪的数据。
  • 多平台跟踪:利用 Measurement Protocol 和 Universal Analytics 带来的其他收集方法,您可以从任意的数字设备收集传入的数据并发送至您的 Google Analytics(分析)帐户,因此您的跟踪范围不仅仅局限于网站。

在添加媒体资源的时候,我们也可以看到跟踪方法的差异:UA-VS-GA

个人比较看重其中的功能有:

  • 新版的数据收集方法(JavaScript 兼容性更强,自定义更灵活)
  • 自定义维度和指标(让数据分析更为清晰,可扩展强)
  • 支持跨设备追踪(IOS&Android SDK,测量协议支持任意联网设备)
  • 更多数据在服务端处理(部署更简便,分析师可控性更强)
  • ……

由于以上种种,为工具的未来带来了更多可能,因此我强烈推荐未部署分析工具的开始使用Universal Analytics,已经部署了分析工具的可以慢慢迁移到新版中来。