优云老王的心路历程（二）：下一站Web体验监控产品

　　优云老王的心路历程（二）：下一站Web体验监控产品

　　

　　在上一篇文章中，和你们聊到了构建Web应用体验监控体系，经过了概念阶段，也完成了技术选型，就步入了把实质性的产品研制阶段。作为产品总监，时刻不敢忘掉我们的产品目标：无限感知你的用户，建立完备的体验监控体系，驱动产品的设计、开发和运维！

　　一、一切皆操作

　　仔细剖析终端用户和Web应用及网站的交互过程，无论是打开页面、点击链接或按键，还是填写表单、提交查询，一切皆可归结为一个个基本的操作，由这种操作构成一次次访问（即会话），而会话最终都可以映射到具体的用户，因此我们可以用一张图来抒发：

　　

　　因此，在我们的产品概念中，我们不再把页面的PV当成重点，而是把所有的行为具象为操作，比如页面被打开多少次就称为页面的操作数，按钮被点击了多少次也被称为按键的操作数。这是一个十分重要的概念，因为

　　优云Web

　　中大多数指标皆是围绕操作来进行聚合的。举例来说，我们可以晓得某个时间段内使用某种浏览器的用户，登录按键被点击的次数、响应时间(网络、服务端、客户端)、满意度(满意、可容忍、不可接受)等关键指标。

　　

　　这里值得提一下操作类型，我们把操作分成了四种基本的类型：重定向、链接、AJAX、表单递交，重定向即打开某个URL装载页面或自动刷新某个页面，链接即点击某个链接跳转到某个URL，AJAX即发起某个XmlHTTPRequest交互局部更新页面（现在的Web应用中基本都有用到此技术，与操作无关的纯XHR恳求不会被记录成操作），表单递交挺好理解，填写表单并递交或则发起一个查询都属于此类操作类型。

　　目前我们只记录了与服务端有交互的操作，而对纯客户端的操作暂未记录。

　　二、尽可能全量采集数据

　　之前我们谈到了对我们有价值的数据有用户的操作行为数据以及操作行为的上下文数据，我们可以在页面中嵌入一小段JS代理，当用户与页面形成交互时，代码片断会手动执行搜集数据并定期上报到服务端剖析。每一次用户的交互行为虽然讲了一个故事：

　　·谁

　　·什么时间

　　·在那个页面

　　·操作的内容是哪些

　　·操作的类型是哪些

　　·使用的浏览器元数据有什么

　　·浏览器加载的过程数据有什么

　　·是否出错

　　有了这种数据，接下来就交给云端的服务器去做了，对每一个操作进行聚合剖析，通过指标体系去测度这个操作的体验情况。当然，上层业务还是须要做不少的事情，比如怎么分辨一个会话，如何辨识一个独立用户和帐号，如何对一组页面进行聚合剖析，如何统计一个跨页面功能按键的操作数，如何解决多域名指向同一站点的问题等等。下图是对一个操作进行体验剖析：

　　三、*敏*感*词*埋点使剖析更敏捷

　　

　　先解释下*敏*感*词*埋点，这里说的*敏*感*词*并非不要嵌入js代码，与*敏*感*词*埋点对应的是代码埋点。从布署js代理开始，系统手动全量采集了界面中被用户操作的元素数据，后面虽然我们要做的就很简单了，把须要的数据拿出来看即可。具体去“拿”的过程还是市不了的，我们是如此考虑的：

　　1、你不需要关注界面上所有的元素

　　2、跨页面元素的跟踪或页面组定义还是须要人来定规则

　　3、自动化的命名方法不友好不是你要想的

　　听起来太酷，对不对？是不是小白PM都可以用得上去，从此不再须要开发人员干埋点的脏活累活了，而对产品总监来说，不要整理埋点的清单了，不要求着研制人员解释埋点的逻辑，想拿数据就拿数据，进退自如效率大大增强。*敏*感*词*埋点的用处是无须等待即可见到历史数据，但倘若涉及到对历史数据进行重新标记命名，如果历史数据较多肯定须要花费较长时间。

　　

　　当然了，*敏*感*词*埋点也不是没有缺点的，但我们要的是最小化代价获取有价值的隐藏在大数据背后的知识，虽有缺陷却不影响我们做合理的决策。我们前面会晤到各类埋点的技术方案的优劣剖析。

　　四、多维剖析洞悉细微之处

　　对好的体验监控产品来说，多维剖析是共性的需求，所谓细微之处见分晓，产品的创意和问题常常从细微之处可以觉察到。维度可以是时间，也可以来自于采集的客户端浏览器的元数据信息，也可以是地理、运营商，甚至可以是自定义的维度。各类产品虽然说得很多了，这里不再赘言。

　　五、扩展API使数据更有价值

　　

　　适当的API能力可以使数据发挥更大的价值，基于这种数据可以使剖析和问题定位愈发给力。

　　1、接入真实用户：默认情况下，我们采用js生成的id来标示用户，不能挺好地标示真正的用户，无法把访客与真实的人构建起联系。如果有用户登入行为的话，可以用YYRUM.identify(user_id)来标示，这样才能标示发生风波的真实用户。建议在用户登入后，立即调用这个技巧。

　　接入真实用户还提供API设置用户的属性，并支持以用户属性为维度进行数据剖析。你可以首先使用前面的identify(user_id)来标示用户。然后可以对这个特定的用户设置一些属性，比如这个人的性别，年龄，等等。

　　2、接入错误：虽然我们尽可能的采集用户端的错误信息，但事实上浏览器抛出的错误对我们解决问题的能力是十分有限的。在搜集到的数据中经常会有好多的scripterror.错误，而错误的堆栈确看不到任何信息。原来是浏览器的同源性策略（CORS）,浏览器会把不同域的js报错信息替换成scripterror，并且其他数组也置为空，这个时侯就很难搜集的真正有效的信息。(PS：针对里面的解决方案：请求的js返回身上加上```Access-Control-Allow-Origin```，并设置可信的来源，在引用js的标签上加上```crossorigin```属性)

　　这样仍然不够，我们可以采用主动上报错误的方法，把一些自定义的错误信息上报到云端进行聚合剖析。举例如下：

　　YYRUM.report(ex,{

　　msg:‘自定义错误’,

　　line:89，

　　col:90,

　　func:a

　　})```

　　六、技术的不完美性

　　事实上，前面说了各类方案都有其优劣点的，而JS代理形式本身有一些局限性，简单剖析如下：

　　1、采用js数据搜集原理决定了：数据能够搜集以及搜集后的数据是不是你想要的，根本依赖于JavaScript标记代码是否能正确执行；这也意味着假如在数据搜集环节走进误区，将给随之而来的剖析工作带来不可修补的影响（访问者不会由于你犯下的数据搜集错误而帮你重现历史访问过程）。

　　2、我们的方案尚且能减少工作量，把好多工作交给云端去做，但随之而来的是抓取的信息越多，也就意味着浪费的流量也越多，存储和索引的成本也越高。

　　3、对布署也有一定的要求，一个是要求覆盖面，是否覆盖了所有要剖析的页面；另外一个是假如用户浏览器版本过高，有些指标获取不到。

　　以上是我个人的总结，Web体验监控产品的六大基本内容，欢迎你们一起交流(作者陌陌:uyunsoft)。后续再与你们谈谈埋点的那些事。

　　作者简介：

　　王川林

　　优云软件产品总监

　　四年UI设计师、三年商务智能产品、五年IT运维产品

　　负责优云Web应用体验监控产品

　　优云秉持devops的理念，从监控、到应用体验，到自动化持续交付，优云一切为了您做的更好！

　　优云全线产品免费试用：