在大型网站以及高流量网站中,数据分析无疑是非常重要的一个环节,通过数据分析,我们可以了解到网站的流量、流量来源、哪些页面访问最高、哪些页面需要提升,哪些回头用户,哪些用户浏览之后没有转换成目标用户,转换的目标用户是通过那些页面进入交易页面的、等等。对于任何一个商业网站,这些数据都非常重要,不但对于网站的用户体验、搜索引擎优化(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
发表评论