阅读 4748

DIY一个前端监控平台(上)

你只有竭尽全力之后,才有资格说运气不好。

目录

  • 为什么要有监控平台
  • 第三方平台
  • 流量分析平台
  • 自己DIY一个
  • 日志采集平台
  • SPM
  • 埋点流程
  • 自己DIY一个
  • Hiper

前言

我认为,流量分析平台 + 日志采集平台 + 异常信息采集 + ajax信息采集 + 性能指标 = 监控平台。

之前我写过两篇文章《前端性能优化交流》《前端代码质量优化交流》。也可以看得出来,我是对比项目开发的流程来编写文章的。监控平台这一点对于大多公司来说并没有那么重要,但是对于一个完善的交付项目,这一点是必不可少的,相应的流量分析平台、日志采集平台。可视化的数据会给客户最直观的展现。

初衷:

自己想了解一些从外部统计项目数据的知识,探究一下原理,配合自己原来做过的一些东西,串联起来,沉淀出一些东西,自己做一个。

为什么要有监控平台

PV、UV、IP等指标,也是老生常谈。

PV(访问量):Page View,即页面浏览量或点击量,用户每次刷新即被计算一次。

UV(独立访客):Unique Visitor,一般使用cookie标记,访问您网站的一台电脑客户端(比如一台电脑开多个浏览器访问则为多个UV)为一个访客,00:00-24:00内相同的客户端只会被计算一次。

IP(独立IP):指独立IP数。00:00-24:00内相同IP地址之被计算一次(多台电脑可能共用一个ip)。

最终反映的都是产品总体情况,数据的价值除了反映现状,最重要的还是反馈回来指导业务增长。

说点通俗的,比如:阅读类项目,必然会有监控平台。排行榜、阅读量,就是通过监控平台统计出的结果。

高速发展的时代对于数据分析需求的精细化程度越来越高

对于现在形式来说,就像上面那句话,精细化程度越来越高。

我不仅要知道买产品的客户有多少,我还想知道,客户鼠标明明放在了购买按钮上,然后鼠标移走了的客户有多少。就差问问他为什么没买了。

第三方平台

这个相信大家也不陌生,往往这个时候老板让你一天就搭建一个监控平台。

老板:“前端美男子,我需要我们项目的访问量,最受欢迎的文章等所有数据,定期生成报表(省略6000字)...”

直接采用,百度统计友盟+等第三方流量统计平台。

好处也不用多说,人家专门做这个的。这里要注意:注册账号用老板的,否则不好离职。

不好的地方,有些功能要花钱,有很多我们不需要的数据,定制化太差,不能维护。最最重要的一点,不是我们自己的。当然我的目的是自己玩一个小demo,简单探究一下监控平台的原理。

流量分析平台能做到的功能

这里我以百度统计为例,看一下他们官网上给自己的自我介绍。

可以统计一些概括上的表现,页面上下游,访客属性,访客地域,pv,uv,跳出率等等。还有一些百度独有的功能,比如是通过什么关键字从百度找到的你的网站。等等。

DIY

我们参照上面的功能列表,抽取一些我们能做到的信息,抓取这些数据。

首先我们先看看我们能抓取哪些数据。

采集的内容包括:

  • 当前页URL,标题来源页的URL(如果有)。
  • 用户身份识别信息:cookieID 等。
  • 用户停留时间
  • 客户端/浏览器信息和屏幕分辨率。
  • 当前业务的识别编码,用户操作的编码
  • DIY一些信息。

这里注意一下:

我们提交后台上述的信息,后台同学可以记录用户的ip、根据ip获取地址、访问离开的时间。每一条数据即为一个pv,然后分组查询ip即可查出每天的ip数,通过ip地址也可以查出用户地域等信息。

我们来参照一下掘金发送统计数据的方式

上面我们可以看出,掘金用的百度统计平台发送日志,先不管掘金用的什么吧。发送日志的方式是一个空gif图。下面参数也可以隐约猜到一些表面上的意思。剩下的就看你是怎么约定的了。

分辨率

ds: 1920x1080

当前触发的DOM元素,后面是即将跳转的URL??不太确定

ep:-257.5*28*51*41*0*#juejin>div[2]>div>header>div>nav>ul>li[1]>ul>li[2]>a*31*21*a*https%3A%2F%2Fjuejin.im%2Factivities

浏览器使用的语言

ln: zh-cn

版本

v: 1.2.43

那我们就开始吧,首先封装一个插入的monitor.js

这里声明了一个_map数组,用来存放抓取的数据,以二维数组的方式存储。

然后又动态插入了一个analytics.js,在这个js中专门抓取数据,monitor文件中还可以加入一些其他操作,我们后续来讲。

analytics.js

我们在这里抓取了一些简单的数据,存放在_maq数组中,并且通过encode转义之后通过一个1x1大小的gif发出请求。按照项目的需求,可以自定义添加很多参数进去,大家自我发挥。

这里当然也可以不走gif的模式发送数据请求,我们也可以通过普通的ajax请求发送,因为这个东西要封装成组件单独维护,这里推荐Zepto $.Ajax 模块。

看一下效果。

我们就给百度统计接口发送了一条日志,因为没有唯一识别的id,人家肯定是不会收的。估计百度会默默的把我的ip记下来 看看我要干什么。

我们还需要在后台进行一些参数的添加,就我像上面所说的的ip等参数。然后我们就可以通过这些数据做一些可视化界面(echarts, charts, bizcharts等)。比如这种炫酷的图表。做一个自己的分析平台,然后慢慢拓展。这个图表是我通过bizcharts做的。

日志采集平台

上面的流量分析平台抓取了一些概括性的数据,然而,我们需要业务上具体的数据,比如说用户搜索了什么内容,点击了哪些按钮,下了什么单,等等。

我们统计这些数据的时候就需要埋点,是一个费时费力的活儿,但是,还是那句话,一个完善的交付项目,这些都是必须有的。

我这边就简单给大家介绍一下阿里的埋点解决方案。并且将日志与上述流量分析方法进行结合。

SPM(Super Position Model)

SPM(Super Position Model)全称超级位置模型。用来跟踪页面模块位置的编码,标准spm编码采用a.b.c.d.e的格式(各个位置编码只能由 数字、小写字母、连字符/减号 组成),其中a, b位是必须具备的. 各位的含义和部署规范如下:

a标识站点ID,站点ID是指包含特定业务含义的一类页面的集合,比如女装市场,就可以看为是一个站点。在部署时, SPM-a的声明必须放在<head></head>闭合标签内, 通过一个独立的<meta>标签声明. 如下:

<head> ... <meta name="data-spm" content="申请的A位编码"> ... </head>
复制代码

b 标识页面ID,页面ID是指某一特定业务下的某一具体页面,比如女装市场下的女装首页。SPM编码的前两位a.b标识了唯一指定的一个页面,并且跟页面url的静态部分(即url中?之前的部分)一一对应。在部署时, SPM-b的需要以标签的一个扩展属性(data-spm)的方式声明, 如下:

  <body data-spm="注册的B位编码">
复制代码

特别注意: 若aplus.js的部署位置 位于head部分, 或因某些原因导致body属性不能修改,则spm-AB位的声明, 只能通过在head部分使用spm-id元标签(位置在aplus.js脚本引用代码之前) 来实现,如下:

 <head> ... <meta name="spm-id" content="申请的A位编码.注册的B位编码"> ... </head>
复制代码

c标识页面上某一具体的区域或模块,一般页面发布时,源码中一个table区域或一个div区域包含的部分可以看做一个模块。比如女装首页的左侧导航栏,就可以看做一个区块。C位不强制要求声明, 可以根据需求指定(但如果需要统计页面具体的坑位点击数据, 则必须声明C位),一般被用来监测页面上具有相对独立功能的区域。 在部署时,SPM-c一般以对应的div容器的扩展属性(data-spm)来声明, 如下:

  <div data-spm="自定义或注册的C位编码">
复制代码

d标识位置ID,是指页面某一具体的模块中,一个对应的链接或者图片,是数据统计的最细粒度。 SPM-d一般不需要注册或申请, 也一般不需要特别声明. 系统会自动计算和编码(前提是C位必须正确声明). 如果必须, 则也可以自助声明, 如下:

  <a href="" data-spm="d开头的自定义编码串">
复制代码

e 标识当前日志的logid, 用以区分访问日志时序和回溯用户的完整访问路径。此id由日志采集脚本自动赋值,不需要且禁止人为构造和赋值(修改)。

埋点流程

  • 埋点申请:在平台上申请埋码,并记录埋点信息
  • 埋点配置:埋码分为 可视化自动埋码,和非可视化手动埋码
  • 埋点验证:sdk 自动触发点击事件,和平台上提交的埋点信息做验证
  • 数据监控:监控埋码质量
  • 采集管理:采集数据管理

DIY

我们参考spm埋点流程,以及埋点规则。我们就这么埋下了点,但是,怎么获取到这些a.b.c.d编码并且发送日志请求呢?

我们还是以自己diy自己的日志采集平台,从中学习到一些东西。

首先,看到attribute方式埋下参数,第一反应就是想到了事件代理,

我们先在项目中,埋好点,例如:

上面这个是个简易的埋点,只是个例子,大家可以在自己的业务组件中随意撒点,注意顺序,注意写好对应埋点功能文档即可。

写一个spm.js

上面的备注我写的很详细,相信大家仔细看看就能看得懂,有一行我需要解释一下

_maq.push(['_trackEvent', spmArray]);

这一行是把日志数据push到流量统计里 monitor.js 中 _maq参数中。

然后我们定义一种解析方法叫,_trackEvent(跟踪事件),大家可以回头看一下,上面的截图中有写到。

然后我们在monitor.js中添加监听_maq参数变化的方法,触发变化,即可发送日志出去。监听参数变化的方法:

看一下效果:

这样我们就可以通过spm这种方式进行埋点,这种方法需要点击方式触发,有人就会问了,如果hover事件怎么办,还有一些别的事件。

首先,可以开放出来一个改变_maq数组的方法。在非click事件的时候主动触发。

其次,配合analytics文件中的这里

case里自定义一些解析规则即可。

Hiper

这里直接介绍一个插件,我的想法是把这个插件集成到我们的监控平台上,首先看一下,这个插件是什么。

传送门:Hiper

它可以统计一些,网站的“速度”。对优化项目,优化压缩,挺有帮助的,这些数据也可以集成到我们的监控平台中。

END

监控平台下一篇,目前构思想写一下以下几点

  • 异常信息抓取
  • ajax请求抓取
  • 性能信息抓取

还是以DIY的形式,封装自己的抓取方法,将异常信息,请求信息集成到我们的监控平台上,还是以从外部注入项目的方式,这种方式的好处就是,不会影响业务逻辑,不会掺杂在一起,便于维护。

最近还是有一些时间的吧,反思了一下自己,写文章的时候都会构思很久,不像以前想怎么写怎么写,哎。明天发个沸点给你们看看,我的构思笔记。

谢谢大家。回见。

我这边3月底之前会写4篇文章,分别为

《前端性能优化交流》
《前端代码质量优化交流》
《DIY一个前端监控平台(上)》(本篇)
《DIY一个前端监控平台(下)》(可能会拖到下个月写)
《前端安全问题交流》

沉淀一下去年在开发流程方面的一些知识。 谢谢各位。

关注下面的标签,发现更多相似文章
评论