Google Analytics推出异步追踪(Asynchronous Tracking)已经有一阵子了,并且现在对于新创建的账户和配置文件都只提供最新的异步追踪代码。有传言说这是因为Google将把网页加载速度加入到网站搜索排名的算法中。而新的追踪代码将以异步的方式加载,相对于传统的追踪代码,实施了异步追踪的网页加载速度会更快。 蓝鲸网站分析笔记 Original Source
异步追踪的优势
页面加载速度快
异步追踪使用异步的方式加载代码,提高了JavaScript的加载速度,并且不会对页面中的其他内容产生影响。
追踪数据更准确
异步追踪代码放在页面的顶部,</head>之前。与传统追踪代码相比减少了因为追踪代码没有被及时加载而丢失访客记录的可能。
传统的追踪代码中,如果定制追踪的事件在ga.js文件加载前被触发,这个事件可能无法被记录到。使用异步追踪将可以记录到。
异步追踪的定制和实施
异步追踪代码不能和传统的追踪代码在一个页面中同时使用,但可以在不同的页面中分别使用。例如在网站的一部分页面中使用传统追踪代码,在另一部分网页中使用异步追踪代码。Google官方建议将异步追踪代码放置在页面顶部的</head>之前,不过你也可以按照原来的方式依然将代码放置在页面尾部</body>前。甚至可以将代码分割开,分别放置在页面顶部和尾部。
<html>
<head>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>bluewhale.cc </p>
<script> (function() {
var ga = document.createElement(’script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = ‘ http://bluewhale.cc/ga.js’;
var s = document.getElementsByTagName(’script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
同样异步追踪代码也可以通过简单的定制来提高效率。在上面标红的部分中减少了对页面类型的判断过程,同时从本地调用ga.js文件。如果你的网站是第一次添加Google Analytics,直接在页面中相应的位置粘帖代码就可以了。如果之前使用的是传统追踪,并且进行过代码定制,要迁移到异步追踪就比较复杂了。
异步追踪代码的迁移
异步追踪代码和传统的追踪代码在语法上有很多差异,在迁移时除了替换主要的追踪代码外,还要对定制的部分一一修改。下面以我的博客为例说明下具体过程。
迁移前的准备工作
首先,将页面中的传统追踪代码复制到一个txt文件中。并对追踪代码和网站中所有的定制内容进行记录。
然后,将异步追踪中相对应的定制语法保存在另一个txt文件中。并按照传统代码的内容进行定制修改。
传统追踪代码,其中蓝色部分是定制内容。
<!–GA tracking code begin–>
<script type=”text/javascript” src=”http://www.google-analytics.com/ga.js”></script>
<script type=”text/javascript”>
var pageTracker = _gat._getTracker(“UA-12347890-1″);
pageTracker._addOrganic(“soso”, “w”);
pageTracker._addOrganic(“sogou”, “query”);
pageTracker._addOrganic(“yodao”, “q”);
pageTracker._trackPageview();
</script>
<!–GA tracking code end–>
异步追踪中相对应的定制语法
_gaq.push(['_addOrganic', 'soso', 'w']);
_gaq.push(['_addOrganic', 'yodao', 'q']);
_gaq.push(['_addOrganic', 'sogou', 'query']);
异步追踪代码迁移
异步追踪代码迁移前,先删除网站页面代码中所有的传统追踪代码,然后粘帖新的异步追踪代码。同时用新的异步追踪定制追踪逐一替换传统的定制追踪。
迁移后的异步追踪代码
<!–GA tracking code begin–>
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12347890-1']);
_gaq.push(['_addOrganic', 'soso', 'w']);
_gaq.push(['_addOrganic', 'yodao', 'q']);
_gaq.push(['_addOrganic', 'sogou', 'query']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(’script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = ‘http://www.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(’script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!–GA tracking code end–>
常用定制追踪方法对比
以下是一些常用的定制追踪方法。在进行代码迁移时非常有用。前面的是传统追踪代码,后面是相对应的异步追踪代码。
虚拟页面:
<a href=”http://bluewhale.cc”onClick=”javascript:pageTracker._trackPageview(‘/go/bluewhale.cc’);”>蓝鲸网站分析笔记</a>
<a href=” http://bluewhale.cc”onClick=”javascript: _gaq.push(['_trackPageview', ‘/go/bluewhale.cc’]);”>蓝鲸网站分析笔记</a>
跨域追踪:
pageTracker._setDomainName(‘none’);
pageTracker._setAllowLinker(true);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
事件追踪:
<a onclick=”pageTracker._trackEvent(‘category’, ‘action’, ‘opt_label’, opt_value);”> 蓝鲸网站分析笔记</a>
<a onclick=”_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value]);”> 蓝鲸网站分析笔记</a>
搜索引擎,关键词,推介:
pageTracker._addIgnoredOrganic(‘蓝鲸网站分析笔记’); //将搜索关键字归为直接访问
pageTracker._addIgnoredRef(‘bluewhale.cc’); //将推介流量归为直接流量
pageTracker._addOrganic(’sogou’, ‘query’); //增加新的搜索引擎
_gaq.push(['_addIgnoredOrganic', '蓝鲸网站分析笔记']);
_gaq.push(['_addIgnoredRef', ''bluewhale.cc ']);
_gaq.push(['_addOrganic', 'sogou', 'query']);
访问有效时间:
pageTracker._setSessionCookieTimeout(3600000);
_gaq.push(['_setSessionCookieTimeout', 3600000]);
电子商务追踪:
var pageTracker = _gat._getTracker(‘ UA-12347890-1′);
pageTracker._trackPageview();
pageTracker._addTrans(”, ”, ”, ”, ”, ”, ”, ” );
pageTracker._addItem(”,”,”,”,”,”);
pageTracker._trackTrans();
_gaq.push(['_setAccount', ' UA-12347890-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_addTrans', ('', '', '', '', '', '', '', '' ]);
_gaq.push(['_addItem', '','','','','','']);
_gaq.push(['_trackTrans']);