本地化analytics.js

经常会有人提到谷歌分析跟踪代码加载慢的问题，希望将跟踪代码本地化，也就是将跟踪代码放到自己的服务器上，如果你只是使用GA，没有使用GTM的话，这个是很简单的，但是如果你使用GTM去管理GA跟踪代码的话，这个就很复杂，这个涉及到GTM的一些加载机制问题，本节只是讲解怎么讲analytics.js本地化。

先看GA的基础跟踪代码：

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

可以看到这段代码会在www.google-analytics.com加载一段js，这个就是跟踪文件，这个文件我们需要下载下来，然后看看js里面，会发现有些还是会向https://www.google-analytics.com/analytics.js请求，我们需要把里面所有的https://www.google-analytics.com/analytics.js替换成https://www.ichdata.com/analytics.js，换成本地的，里面还有些其他包含动态参数的js，这种就不适合替换的了，替换后的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.ichdata.com/analytics.js','ga');

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

后面这段js都向自己的服务请求的了

可以看到加载了两段analytics.js,前面一段是本地化后，后面一段是GTM管理的，我们在来看看第一段的加载时间：

第二段的加载时间

可以看到第二段的时间是更短的，可能是我网络环境的问题吧，因为我使用的是香港的ip，所以能够畅通访问谷歌，而我的博客是美国的vps，另一方面是GTM管理跟踪代码，都是异步加载的，能够权衡最优加载的了。

当然，这事是一次测试，不能代表什么。

你可以试试本地化后，你自己的的加载时间有没有降低。