DIY一个前端监控平台（上）

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

前言

我认为，流量分析平台 + 日志采集平台 + 异常信息采集 + 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一个前端监控平台（下）》（可能会拖到下个月写）
《前端安全问题交流》

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