微信号:wilddogbaas

介绍:野狗官方订阅号.这里有关于JavaScript、iOS和Android等前端技术干货,还有网络安全和性能优化的技术分享.

【讲师课堂】王龑:如何用野狗实现用户体验收集

2016-06-14 21:43 王龑



rum

------------------------------

基于野狗开发一个真实用户体验收集程序。


真实用户体验是相对与模拟监控而言的,与模拟监控定期地主动去访问页面不同, 真实用户体验的收集是通过在应用程序里植入监控代码来实现的。 通过对用户体验的连续不断的监控,能够对网站和手机应用的运行状况做到心中有数。


关于真实用户体验收集,市面上已经很多成熟的方案,比如国内的OneAPM和听云,国外的NewRelic等。 但是这些方案的后端往往经过了清洗、统计和聚合等若干步骤,因此丢失了实时性和颗粒度。



野狗是实时后端云一个很好的方案,基于它能够开发即时聊天、实时游戏、实时定位等等在线应用。


如果把野狗的使用场景和真实用户体验收集的一些理念结合到一起,我们就能基于它 DIY 一个实时用户体验收集系统。


面向用户

------------------------------

为了把对用户的干扰加到最低,可以使用野狗的匿名登录功能,这么做主要是为了标识不同的浏览器。


通过这种方式相当于为每个用户在野狗的后端开辟了一小块存储的区域,后续的用户基本数据都存放在这一块区域里。


这个时候用户就不再是冷冰冰的统计数据,即不再是今天有多少用户使用了 Chrome 浏览器,而是这个 Chrome 爱好者访问各个页面的历史是什么。




后端存储

------------------------------

先看看 RUM 需要采集哪些数据


浏览器信息

  • 厂商

  • 版本

  • 引擎

  • 语言

  • 尺寸

操作系统

  • CPU 架构

  • 版本

地理位置

  • IP


野狗可以作为后端存储的补充方案,也可以像这个项目一样完全使用野狗做存储。


通过使用 ua-parser-js 这个库配合其他一些命令,采集用户的基本数据,然后通过野狗的 update API 存到服务器上。


浏览器信息

{

  "browser": {

    "major": "601",

    "name": "WebKit",

    "version": "601.1.46"

  },

  "device": {

    "model": "iPhone",

    "type": "mobile",

    "vendor": "Apple"

  },

  "engine": {

    "name": "WebKit",

    "version": "601.1.46"

  },

  "os": {

    "name": "iOS",

    "version": "9.3.2"

  }

}


屏幕信息

{

  "availHeight": 548,

  "availLeft": 0,

  "availTop": 0,

  "availWidth": 320,

  "colorDepth": 32,

  "height": 568,

  "pixelDepth": 32,

  "width": 320

}


这就回答了用户来自哪里,用的什么上网设备的问题。


即时聊天

------------------------------

即时聊天程序都会有一个在线用户列表,从 RUM 角度来看,所有在线的用户都是监控的对象。


有一个问题是,前一个步骤的脚本不可能一次性把所有的数据都采集完,那么怎么才能动态的采集数据呢。


这就要借助即时聊天的思路,比如我们想知道所有设备的 pixelRatio,就对所有浏览器说

你去给我执行一下 window.devicePixelRatio 然后把结果告诉我


网页上的操作


点击 Send, 事先嵌入到网页里的监控程序就会上报机器的 pixelRatio,整个过程不需要用户的干预,返回如下:



实时定位

------------------------------

要做到实时定位,其实只需要问对问题就行:

navigator.geolocation.getCurrentPosition(function(e){alert(JSON.stringify(e.coords))})



(哈哈,好像暴露了什么)


前端性能统计

------------------------------

随着标准的渐渐流行,很多现代浏览器都已经提供了很好的接口获得性能数据。

performance.timing

performance.getEntries()


通过在客户端采集这些数据,取得网页各种资源的加载耗时,传到野狗后端。然后在服务器端通过可视化的方式实时地展示 出来,能够非常精确的看到某位用户打开应用的各个时间点。



已经实现的功能

------------------------------

  • 在线用户列表

  •  匿名统计

  •  在地图上显示客户端的位置

  •  把要执行的代码发送到所有的客户端

  •  记录浏览历史

  •  前端性能的瀑布图



点击图片,了解野狗Meetup

☟☟☟




点击 [阅读原文] 报名

 
野狗 更多文章 关于Web安全,99%的网站都忽略了这些 Node.js与实时Baas云开发实践 演讲PPT 写了十年JS,从来不知道模块化为何物丨干货 TLS False Start是怎样加速野狗云服务的 四步让你用Google分析时不丢数据
猜您喜欢 我是如何优雅且靠谱地翻墙 如何使用爬虫做一个网站 Shanghai OpenStack Meetup在携程成功举办(底部有彩蛋) 父爱如山,深情似海——你的代码像诗一样 程序猿经常挂在嘴边的10句话