数据上报分析一

背景：

• mpc管理台业务配置愈来愈多，特别是货架管理，卡产品管理，卡券管理三大模块配置信息眼花缭乱，
• 屏幕的展现空间有限，须要合理排布配置信息才能最大化利用页面空间，减小业务配置信息，
• 采集用户操做行为数据，分析高频操做，绘制出热力图等供产品/运营/设计同窗参考，优化参数配置，有效提升点击转化。

数据上报：

• 埋点货架管理，卡产品管理，卡券管理页面，监听全局click事件
• 上报信息：点击事件的元素惟一的selector，时间，当前页面hash值

• 关键点：

  • 为了不频繁上报，只有用户离开特定页面或者log数据超过规定长度时才作一次上报
  • selector是由当前元素出发递归寻找父元素直到在页面中querySeletorAll为惟一元素

数据分析：

• 从数据库捞出的一个月有效上报数据（指特定页面数据）有将近2000条，每一条的log数据都有多条点击的明细数据。由于数据量大，先抽取某个时间段高频操做做为分析样本。以日期为横坐标，时间为纵坐标，画出热力图。
  

• 从热力图能够明显看到点击率超过两百时间段分别为：

  • 10月15日：9-10点 216次
  • 10月17日：15-16点 256次
  • 10月18日：10-11点 218次
• 统计这三个时间段页面上报数据的次数

• 能够发现货架编辑（shelf_edit）这个页面操做次数在三个时间段都是最多的，因而计划重点分析这个页面。

  1. 将货架编辑页面的log数据筛选出来，使用nightmare（一个浏览器模拟器）渲染页面

  2. 根据上报的seletor复现操做，同时采集绘制热力图数据，

     • x ：点击事件触发相对于 document 的横坐标，主要取自于 event.pageX ；
     • y ：点击事件触发相对于 document 的纵坐标，主要取自于 event.pageY ；
     • screenWidth ：点击事件触发时屏幕的宽度；
     • screenHeight ：点击事件触发时屏幕的高度；
     • 而后在页面加载前，注入热力图heatmap.js绘制热力图

• 可是在使用nightmare复现时遇到了问题：

  • 用户的权限未知，测试环境数据与生产不一致，视图会有很大的差异。
  • 在生产上获取的惟一的seletor由于视图问题在测试环境却不惟一，而操做步骤是关联的，上一步获取的seletor错误，后续全部的操做都走不下去。
• 权限问题比较好解决，只要在测试环境中新建一个只有货架管理权限的用户便可。可是数据不一致的问题就比较头疼，不可能将生产数据同步过来，即便同步过来，在后续的增删改操做环境数据也仍是不一致。
• 录屏中出现的就是由于数据不一致致使，选择模拟操做的元素不一致，最后selector对应不上而没法继续。

问题总结与改进：

• 如今的用户行为数据上报代码是无侵入性，在特定高频操做页面统一监听事件，不影响原来的代码逻辑，统一上报操做的dom元素。

  • 改进：这种作法太理想化，由于视图不一样上报不能详细到具体某个元素，只能上报固定的非动态的某些操做（按钮），但这样的话就是具体的去监听这些元素的事件，对代码逻辑有依赖属于侵入式。

• 此次由于openid涉及到用户信息安全问题，没能将数据导出，多条数据有多是多个用户上报的，在复现是也会出现问题。此外研究单个用户的操做行径会更有意义，屡次操做并不意味着交互上必定有可改进的地方，也有多是某个业务有多个用户须要频繁操做，单个用户场景下的频繁修改则须要引发注意。

  • 改进：将上报的openId根据用户名md5加密，对于分析数据来讲，拿到的只须要是一个对应用户的id值。

结论

• 目前虽然因为数据问题热力图还没法绘制，但用nightmare能复现的步骤中已经能够了解到一些用户行为，来改进交互：

  • 频繁点击的资源位在屏幕上的位置若是不会随着数据的变化而改变是否是体验更好，好比说增长卡券的按钮
    
  • 频繁点击的资源有没有可能合并成一个固定的操做，好比说此次上报的数据有短期内屡次点击删除卡券，若是频繁须要总体更改能够增长一键删除？
  • 用户屡次点击菜单列表有可能由于如今菜单过多，没法快速找到，新增长一个个人工做台本地记录用户高频的菜单项