众所周知,如果搭建网站的话,需要统计一下网站浏览情况,这方面的统计插件,国内有cnzz、百度统计,国外最出名的就是 Google Analytics 了。

在搭建好网站以后,我也为个人站配置了一下百度统计,只做了简单配置,插入了一段js代码。

不过,最近在学习Vue,突然想到这个问题,就F12看了一下Vue官网,居然用的 Google Analytics 做统计。

本着折腾一下的心情,我也想为个人站配置一下 Google Analytics。高高兴兴打开了谷歌分析的官网,然后我就迷茫了,居然有两个工具:gtag.js 和 analytics.js,那我到底用哪个呢。

20200601001014.jpg

不行,本着不懂就要查的精神,我得搞懂 gtag.js 和 analytics.js 的区别。

原来,gtag.js 是 analytics.js 的升级版。

analytics.js 库是一种用于衡量用户与您网站的互动情况的 JavaScript 库。

谷歌提供 analytics.js 库,方便网站创建者(站长)能够统计网站访问数据,用这些数据绘制图表,以便站长可以根据这些统计数据找出网站的问题加以改进。不过说白了,另一层意思就是分析网站访问情况,方便投放广告嘛,这是以前建站比较流行的一种盈利方式,现在好像也是,哈哈。

如果说 analytics.js 库单纯的是一个工具,那么 gtag.js 就是一个平台,它在 analytics.js 的基础上做了很多改进,具体哪些改进,以后深究了再细聊。

如果都采用默认配置,那么 analytics.js 和 gtag.js 的功能几乎一样。但是 gtag.js 的特殊之处是,它的后台可以加载其他公司提供的统计工具。

网站只需要嵌入 gtag.js 的代码,默认加载 analytics.js 库做数据统计,如果想切换成其他统计工具,比如百度统计、Adobe Analytics等,则你不需要再修改网站的源代码,直接通过 Google Analytics 的后台,把百度统计、Adobe Analytics等的统计代码配置到 Google Tag Manager里面,则 gtag.js 就可以给你加载你配置的其他平台的统计代码。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

以上是 gtag.js 的全局网站代码,其会加载 gtag.js 库,GA_MEASUREMENT_ID 这个媒体资源ID配置了analytics.js代码。

此代码段的默认操作是向 Google Analytics(分析)发送网页浏览数据,也就是载入 analytics.js 来发送数据。

如果还想配置一个百度统计怎么办?直接在 Google 的后台创建另一个媒体资源ID:GA_MEASUREMENT_ID_2,配置好从百度统计获得的代码。

然后在上面的代码加一行:

gtag('config', 'GA_MEASUREMENT_ID_2');

反正Google的意思就是我来帮你管理其他平台的统计代码,琢磨了半天,没发现有什么好处啊。

可能唯一的好处就是尽可能多的让 Google 搜集到竞争对手的产品使用情况吧。

<!-- 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 -->

最后,我想了想,还是直接引入 analytics.js 代码吧,何必要 gtag.js 做一次中转呢。

--End--

参考资料:
https://developers.google.cn/analytics/devguides/collection/analyticsjs?hl=zh-cn

https://developers.google.cn/analytics/devguides/collection/gtagjs/migration?hl=zh-cn

https://stackoverflow.com/questions/23640645/what-is-the-difference-between-google-tag-manager-and-google-analytics