Google Universal Analytics中异步跟踪代码实现

新版UA在管理后台提供的跟踪代码是同步的,即需要先加载:analytics.js,再做数据提交。这样会有一些问题,即影响前端性能,也可能导致出错,如按钮事件触发时,analytics.js还没有加载。

// 默认的UA代码
(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-x', 'jiyang.me');
ga('send', 'pageview');

老板本GA是没有问题的,通过先创建_gaq的全局变量,来支持异步加载:

// 老版GA代码
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxx-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);
})();

其实UA是支持异步的,只要稍做调整即可:

// 调整优化后的UA代码

// 创建全局 ga 函数,类似于:var _gaq = _gaq || [];
var ga = ga || function() {(ga.q = ga.q || []).push(arguments)};

// 指定账号,Cookie域名
ga('create', 'UA-xxxx-x', 'jiyang.me');

// 页面浏览数据提交
ga('send', 'pageview');

// 或事件跟踪
ga('send', 'event', 'button', 'click');

// 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');

总体来讲,UA在代码的定制性,灵活性都要有改善,大家可以先从统计代码的优化开始,逐步把UA用起来。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>