本地化analytics.js

Google Analytics Haran 6年前 (2018-02-23) 6847次浏览 8个评论

经常会有人提到谷歌分析跟踪代码加载慢的问题,希望将跟踪代码本地化,也就是将跟踪代码放到自己的服务器上,如果你只是使用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
可以看到加载了两段analytics.js,前面一段是本地化后,后面一段是GTM管理的,我们在来看看第一段的加载时间:
本地化analytics.js
第二段的加载时间
本地化analytics.js
可以看到第二段的时间是更短的,可能是我网络环境的问题吧,因为我使用的是香港的ip,所以能够畅通访问谷歌,而我的博客是美国的vps,另一方面是GTM管理跟踪代码,都是异步加载的,能够权衡最优加载的了。

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

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


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 補充:因為被CSP設定擋掉,不能執行行內 inline 腳本
    stu2024-01-11 19:21 回复 Mac OS X | Safari浏览器 605.1.15
    • Haran
      将加载资源的域名添加到CSP白名单
      Haran2024-01-12 11:44 回复 Mac OS X | Chrome 120.0.0.0
  2. 想询问有可能全部都存在本地吗?目前被浏览器挡掉
    stu2024-01-11 19:08 回复 Mac OS X | Safari浏览器 605.1.15
  3. 想問有可能全部使用本地腳本加入GA嗎?目前被安全性設定擋掉無法使用外部資源
    新鮮人2024-01-11 19:06 回复 Mac OS X | Safari浏览器 605.1.15
  4. 能分享下http代理或mp协议替代方案,不胜感激
    hhh2018-02-23 19:21 回复 Mac OS X | Chrome 64.0.3282.167
    • 原理跟现有传输是一致的,如果你ping不通过ga服务器,MP协议是不行的
      GA小站2018-02-23 19:26 回复 Windows 7 | Chrome 63.0.3239.132
    • 你应该考虑用个第三方服务器做转发
      GA小站2018-02-23 19:35 回复 Windows 7 | Chrome 63.0.3239.132
  5. 一些地方运营商网络访问ga server不通,仅仅本地化js作用不大,能发分析http代理或者mp协议替代方案
    hhh2018-02-23 19:20 回复 Mac OS X | Chrome 64.0.3282.167