在大型网站以及高流量网站中，数据分析无疑是非常重要的一个环节，通过数据分析，我们可以了解到网站的流量、流量来源、哪些页面访问最高、哪些页面需要提升，哪些回头用户，哪些用户浏览之后没有转换成目标用户，转换的目标用户是通过那些页面进入交易页面的、等等。对于任何一个商业网站，这些数据都非常重要，不但对于网站的用户体验、搜索引擎优化（SEO）有很大帮助，并且对于网站的用户和收入都非常重要。在众多的免费流量统计软件中，Google Analytics （谷歌分析）无疑是相当优秀又易用的一款。因此，我们在这里打算开始一系列Google Analytics的相关经验总结，以供大家参考。
Google Analytics的工作原理
首先，我们来看一下Google Analytics的基本工作原理。Google Analytics通过在网页中嵌入一段GA的JS代码，然后这段GA的JS代码会收集相关信息发送到Google Analytics的服务器以完成数据统计。
在页面中，如果调用了_trackPageview函数，GA就会向Google的服务器发送统计信息，这个是如何实现的呢？
因为，我们知道跨域的AJAX请求是受限制的，GA通过向Google服务器发起一张1像素的gif图片来发送相关的信息给Google的服务器。
如图所示：
主要参数解释：
- utmac：GA账号ID
- utmcc：当前页面GA所需的所有Cookie值，这个很关键。
- utmcs: 浏览器的编码
- utmdt: 页面的标题
- utmn: gif的随机ID，以免图片缓存。
- utmr: 页面的referURL
此外还有一些其他的电子商务相关的参数等。
不只一张图片
GA并不只是发送一张gif请求，有些时候GA会发送多张gif请求，如下图所示，我们执行了一个电子商务的track，通过Firebug观察，GA一共发送了4个请求。
Google Analytics代码的基本设置
Google Analytics目前分为异步版本和非异步版本，我们推荐最好使用异步版本的代码。
传统代码（非异步）
<script type="text/javascript">// <![CDATA[ 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">// <![CDATA[ try{ var pageTracker = _gat._getTracker("UA-xxxxxx-x"); pageTracker._trackPageview(); } catch(err) {} // ]]></script> |
传统代码中，pageTracker是GA追踪代码的主要对象，如果我们见到pageTracker就可以认定它是非异步的传统GA代码。
异步代码
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-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); })(); |
异步代码中，_gaq是GA用于追踪的主要对象，_gaq在刚开始是一个javascript数组，在GA的完整的js加载之后_gaq就成为了一个GA的完整实例。
_gat 对象
在GA中，有一个全局对象_gat，官方的GA文档中描述，_gat应该仅仅用于创建跟踪对象，而不应该用它来做其他的追踪。因此，我们应该通过_gaq的push方法来追踪其他任何操作。
但是，这里有一点需要注意，通常情况下我们会把GA的js代码放在页面的末尾，如果我们需要在页面加载的时候就用如下代码追踪一个用户动作（如：电子商务交易），
var _gaq = _gaq || [] ; _gaq.push(['_addTrans', txID, // order ID - required 'Acme Clothing', // affiliation or store name '11.99', // total - required '1.29', // tax '5', // shipping 'San Jose', // city 'California', // state or province 'USA' // country ]); _gaq.push(['_addItem', txID, // order ID - required 'DD44', // SKU/code - required 'T-Shirt', // product name 'Green Medium', // category or variation '11.99', // unit price - required '1' // quantity - required ]); _gaq.push(['_trackTrans']); |
上面的代码不会起作用，原因是调用_trakTrans前必须先调用_trackPageview。因此，最佳的实践是把GA的追踪代码和GA的JS加载代码分开。
把这部分放在顶部：
// <![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); // ]] |
把JS的加载放在页面的尾部：
(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); })(); |
这样，在页面的HTML中，如果调用需要调用任何的GA函数，都不会有任何问题。
在Drupal中有一个Google Analytics的模块，但是该模块没有把两个代码分开，所以我们建议还是手动修改一下这个模块，或者通过手动加载Google Analytics代码到页面中，这样能更好的发挥GA的异步追踪的特性。
关于异步代码加载位置，请参考博文：正确使用 Google 统计代码的异步加载特性。
Google Analytics的其他高级特性会在后续文章中陆续讨论。
声明：
本站所有文章欢迎转载，所有文章未说明，均属于原创，转载均请注明出处。
本文有效链接：
http://www.drupal001.com/2012/04/google-analytics-mechanism/
版权所有：
Drupal与高性能网站架构
http://www.drupal001.com
本文作者: 赵高欣 . robbin（发表日志73篇）
资深架构师，Drupal大学站长。 专注于WEB站点架构、性能优化、SEO等。LAMP、.NET平台经验较多，目前在PHP/Drupal的应用方面和高性能网站架构等领域码砖。
发表评论