Google Analytics 异步加载跟踪代码

万花筒上线已经两个月了,获得了大约 140K 的网页浏览量。

但是有部分用户反馈,在某些网络环境下加载速度慢得令人发指。

我大概猜到了:Google Analytics 加载太慢了!

Google Analytics 调用的 https://www.google-analytics.com/analytics.js 资源加载失败(中国大陆网络环境影响),直到超时后才加载其他资源,所以加载完整网页就会非常慢。

经过查阅官方文档,发现目前 Google Analytics 默认提供的网站跟踪代码是基于 gtag.js 加载的,而目前我实际用到的就只有 analytics.js,所以归纳出以下追踪代码调用方式。

异步加载的追踪代码

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

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

以上代码进行了以下四项操作:

  1. 创建了一个 <script> 元素,并开始从 https://www.google-analytics.com/analytics.js 异步下载 analytics.js 的 JavaScript 库。
  2. 初始化了一个全局函数 ga(称为 ga() 命令队列),您可以通过该函数来安排在 analytics.js 库加载完毕、可供使用时执行的命令。
  3. ga() 命令队列中添加一条命令,为通过 UA-XXXXX-Y 参数指定的媒体资源创建一个新的跟踪器对象。
  4. ga() 命令队列中添加另一条命令,向 Google Analytics(分析)发送当前网页的网页浏览数据。

预加载的异步跟踪代码

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

该异步跟踪代码段增加了对预加载的支持,从而有助于在新型浏览器中实现小幅的性能提升,但在 IE 9 以及不识别 async 脚本属性的旧版移动浏览器中,会降级为同步加载和执行。建议仅在网站访问者大多使用新型浏览器的情况下才使用此跟踪代码段。

应该在 <head> 标签内部以及其他 JS 或 CSS 引用之前添加代码。并将字符串 UA-XXXXX-Y 替换为您要跟踪的 Google Analytics(分析)媒体资源的媒体资源 ID(也称为“跟踪 ID”)。


相关引用:

《万花筒:我们做了一个不太艳俗的网址导航》

《Google Analytics:将 analytics.js 添加到网站中》