背景：

• 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能复现的步骤中已经可以了解到一些用户行为，来改进交互：

  • 频繁点击的资源位在屏幕上的位置如果不会随着数据的变化而改变是不是体验更好，比如说增加卡券的按钮
    
  • 频繁点击的资源有没有可能合并成一个固定的操作，比如说这次上报的数据有短时间内多次点击删除卡券，如果频繁需要整体更改可以增加一键删除？
  • 用户多次点击菜单列表有可能因为现在菜单过多，无法快速找到，新增加一个我的工作台本地记录用户高频的菜单项