上一篇文章跟大家简单分享了如何在阿里云的环境中配置及查询 Nginx 日志,这一次在跟大家简单分享下前端的 APM 工具(最重要的是,我推荐给大家的都尽量是低成本甚至是免费的)。

所谓 APM,全称为 Application Performance Management,意思是 应用性能管理。我们的程序部署在生产环境之后,到底运行的性能如何,我们无法仅仅通过自己的随机点击来判断,这样既不科学,又不客观。我们如果需要全面的知道系统的性能、稳定性,就必须依赖一个高效准确的埋点统计工具来记录我们的关键操作。

这一次跟大家简单分享三个免费、有用且易于使用的前端埋点工具。这里只对这些工具做少许的介绍供大家参考,除非有需要特别向大家提醒的内容外,关于使用和安装可以直接参考官方手册,那上面介绍的会更加详细。

百度统计

百度统计 是百度旗下的一款核弹级的统计工具,它可以准确的为我们记录站点的每一次访问,并可以自动在 Cookie 中进行埋点以唯一的标识出一个用户。百度会借助站长装入自己站点的脚本文件,在页面被打开时自动记录这次访问,并分析出访问用户的趋势、用户属性(性别、年龄段等),通过这些埋点数据,站长便可以在百度统计的后台很容易的分析出什么样的用户会对自己的站点内容更感兴趣、自己站点中的哪些内容更受欢迎、站长一般会通过什么样的搜索词进入自己的站点等运营数据信息。

接入百度统计需要申请一个百度统计自己的帐号,这个帐号与你的百度帐号并不相同,也不互通。创建帐号后根据指引将站点专属的代码安装到自己的站点中。代码安装成功后,每次打开网站页面时会有自动向 https://hm.baidu.com/hm.gif 这个地址发送的 GET 的请求,而这个地址就是百度统计的后端数据收集服务地址。

这里有一个小小的建议:虽然百度建议大家将代码复制到 <head> 标签中,但为了站点的打开速度、尤其是首页的打开速度,大家还是可以将这段代码拷到 <body> 的最后(可以按 F12 参考下本站的引入位置)。

百度统计在用户人群的分析做的非常细致,这应该也是因为百度有着无比丰富的人群画像的原因。但是可惜的是百度统计暂时没有收集前端脚本错误、AJAX 性能等数据的能力,而这些指标事关站点的稳定性体验,所以除了安装百度统计外,我建议大家还可以再尝试接入一款专业的 APM 工具——听云。

听云

听云 是国内一家著名的性能监控平台,虽然他的产品不像百度统计那样是完全免费的,但对于普通的小站长来说,免费的两个站点的额度往往还是够用的。接入听云与百度统计的目的不同,百度统计主要是为了完成站点用户的分析、内容的分析,而通过听云查看的更重要的数据是页面的性能、稳定性等因素。

比如说,听云的页面分析功能,除了告诉你页面整体的打开耗时之外,会进一步细化的给出页面完全加载HTML加载页面渲染页面耗时占比慢页面占比等重要指标,通过这些数据,可以有针对性的优化页面的性能,以此给用户带来更好的用户体验。

听云还可以统计分析AJAX请求的性能以及JS错误的监控,如果有后端接口很慢或前端代码出错的隐患,通过听云的监控可以很直观的发现。

接入听云与百度稍有不同,听云给出了多种不同的安装方式,这里推荐采用使用外链这一方式。最主要的原因就如其站点介绍一样:优势:部署简单探针脚本维护方便

友盟

友盟 也是国内一家著名的监控、统计平台,尤其对于移动端的产品,他有很多成熟的解决方案,除了帮助站长分析页面流量数据之外,他还有友盟推送等 SDK 应用在 APP 等平台上。

在这里我介绍的是他的 网站统计(U-WEB)。友盟对 WEB 站的统计应该是源于大名鼎鼎的 CNZZ,通过简单的脚本嵌入,站长可以快速的得到与百度统计类似的所有指标,接入友盟的意义并不是与百度统计形成互备,也不是说为了单纯的相互替代,而是如果未来你打算在移动端进一步下沉的话,对于友盟来说还会有相关联的服务可以帮助你完善业务。

友盟的脚本接入也是非常方便的,但是有一点需要提醒:友盟的脚本默认会插入一个友盟的图标 LOGO !

我个人对插入 LOGO 的事情并不是特别的反感,主要要提醒给大家的原因是,这个 LOGO 的位置有时候会与你预想中的不同,而且调试起来相对麻烦,所以为了增强使用体验,建议大家可以采用类似于百度统计的接入方式。具体的做法比较容易,大家可以把百度统计的接入代码拷贝下来,然后将其中的链接部分改成友盟的链接即可。如:

本站的友盟统计代码为

<script
  type="text/javascript"
  src="https://s96.cnzz.com/z_stat.php?id=1277611539&web_id=1277611539"
></script>

如果直接将这个代码拷贝到 <body> 标签中,就会在你的页面最后出现一个莫名其妙的 站长统计字样。为了让这几个不出现,我们将代码做出小小的改动:

<script type="text/javascript">
  (function() {
    var cnzz = document.createElement("script");
    cnzz.src =
      "https://s96.cnzz.com/z_stat.php?id=1277611539&web_id=1277611539";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(cnzz, s);
  })();
</script>

这样的安装方法仍然可以正常的记录访问数据,但是页面上就不会莫名其妙的出现 站长统计 4 个字了,所以大家按照类似的方法接入。

通过以上这些介绍,小站长就可以便捷的使用几大公司免费提供的统计及监控平台,当自己的站点出现异常时,也更能有针对性的做出优化及调整,不再需要等待用户反馈时,才知道自己的站点出现了问题,希望大家多多体验。