关注我们 文末有福利
杨康
■ 多年来专注于后台系统开发，手速一流，字典中没有延期的需求，如果有，请给我一个通宵
概述
用户行为收集是一个老生常谈的话题，目前大部分的方案都集中在在C端项目，B端项目的实践不多。在技术推动业务发展的思路指导下，转转商业前端实践了一套用户信息收集系统。
成果展示
系统上线以后，得到了许多平时难以注意的用户使用细节。例如：
-
PC类的后台也有移动端访问的情况，有些页面的访问还很多
- 系统中访问最多的
5个页面占据了所有访问的70%，可以考虑拆分做微前端，提高访问性能
- 页面中最常被点击是
搜索，可以考虑做大这个按钮，增加键盘事件，提高使用效率
- 领导最关注的的是统计图表，每天都会长时间停留，要增加这个页面用户体验和功能稳定:)
需求产生原因
-
CRM的用户反馈一直不好，FE尝试技术推动项目改进。 -
CRM的许多功能使用频率一直存疑，有些低频的功能却占据了重要入口 -
FE希望得知系统的高频的功能，优先优化用户体验，淘汰使用低频的功能，降低不常用的功能模块权重。通过收集用户行为，预先解决问题，提高系统质量。PS：CRM可以理解为一般系统后台
需求难点
- 数据的准确性和及时性，数据质量的好坏将直接影响依赖埋点数据的后端策略服务、运营数据报表等等
- 埋点的效率，埋点的复杂度往往与业务需求相关，埋点效率会影响版本迭代的速度
- 动态部署与修复埋点的能力，本质上这也是提升埋点效率的一种手段
业内方案
- 第一类是代码埋点，即在需要埋点的节点调用接口直接上传埋点数据，友盟、百度统计等第三方数据统计服务商大都采用这种方案。
- 第二类是可视化埋点，即通过可视化工具配置采集节点，在前端自动解析配置并上报埋点数据，从而实现所谓的“无痕埋点”，代表方案是已经开源的
Mixpanel。 - 第三类是“无埋点”，它并不是真正的不需要埋点，而是前端自动采集全部事件并上报埋点数据，在后端数据计算时过滤出有用数据，代表方案是国内的
GrowingIO。
代码埋点 | 全埋点 | 可视化埋点 | |
典型场景 | 无法通过全埋点和可视化埋点覆盖的场景 | 简单规范的页面，多用于点击事件 | 简单规范的页面，多用于点击事件 |
优点 | 可控性高，适用性广 | 不需要人工介入，无视新老版本 | 不需要开发介入，测试简单 |
缺点 | 工作量大，维护性差 | 对数据处理压力大 | 应用的场景有限，对产品运营要求高 |
需求确定
结合成本和业务需求后，确定系统需要有以下特点
- 无感知、不侵入业务、低开发成本、全量接入
- 数据完全由前端团队处理，降低沟通成本。系统后台要保证稳定高效
- 兼容各个系统，乃至移动端，便于在各个项目里推广
方案介绍
- 信息收集，前端做一个
cdn外链，引入即可，免升级，有容灾处理 - 信息处理，选用
egg.js + mysql搭建，开发成本小，上手成本低 - 信息展示，推荐使用
antd的g2绘图，和antd-design配合良好
信息收集部分
- 路由访问情况。包括：访问时间，访问时长，访问来源，访问去向。
- 页面的使用情况。包括：点击位置，点击内容，点击标签，页面滚动情况。这里的点击记录选取的是，
clientLeft + scrollLeft，考虑到页面视窗的大小不一，关注使用可视区位置，在绘制热力图时相对准确。关于页面滚动情况，监听window的scroll事件即可 - 埋点上报，这方面有很成熟的方案了。使用img的src属性解决跨域问题。同时注意节流。为了确保页面卸载的也能上报成功，可以考虑在种在
cookie。为了减少开销，也可考虑在cookie或者localstorage做缓存，集中上报。
信息处理部分
- 数据库选择上，
Mysql和MongoDb区别不大，根据可用资源正常选择即可。我们选择了Mysql。 - ORM框架选择上，直接选择
egg-sequelize，要比egg-mysql好用。自己封装sql也可以。 - 由于数据量比较大，可以考虑使用
Redis。 - 跑定时任务处理数据，以我们100人的使用量来看，一天轻松几万条数据，一个月就会有上百万条，会影响到数据查询的效率。可以定期计算这段时间的汇总值，保存在另一张表里，然后清理数据。
信息展示部分
- 单独建立一个站点来展示收集的数据。大概可以有这么几个维度：访问量，访问时长，访问内容，访问关注点，访问的设备情况。
- 自动区分域名查询，因为各个业务不同，筛选数据的时候要考虑不同的部门
- 绘制热力图可以考虑
heatmap.js，这是个简单好上手的框架，复杂的效果也可以处理。把同一点击位置数据汇总起来，计算点击次数，最终得出热力图所需数据。 - 热力图绘制以后，直接调整尺寸覆盖在业务系统上，可以通过
iframe进行嵌套 - 做一个词云展示，也可以很好反应一个页面被关注的内容情况
系统收益
- 前端生成了一套有效收集用户信息的机制，在技术推动业务进步的路上有了明确的指向，提供了有力的数据支持
- 嵌入到公司脚手架以后，低成本完成了对其他部门的信息收集
- 结合报错系统，更有效的查找系统问题
- 在后台类项目中稳定后，推广到移动端，降低手动埋点需求
结语
埋点类的项目其实业内有很成熟的方案，也有很多相关的公司提供完善的信息收集服务。但是回归到业务来，2B的业务大多有保密性质，自己定制能更好的契合业务，成本不高，收效很好。随着不断的完善和优化，推广到更多系统使用，能带来更多的收益。
福利来了
转发本文并留下评论，我们将抽取出最优评论者送出转转世界杯限量版保温杯+足球小熊（实物超美，厚着脸皮跟行政小姐姐要来贡献给大家，作者小哥哥跪求也没有的超级限量版）：
大转转FE招贤纳士，需要内推的同学可以投递此邮箱，
想了解我们作者小哥哥更多信息，关注我们公众号哦！！！
扫二维码｜关注我们
