聊聊当年我设计的“新-用户轨迹产品”


突然想聊聊当年在 201 做的用户轨迹追踪产品,也算是自己当年产品工程能力的体现吧。

0. 需求

大约在 2010 年,作为最大的 IT 资讯垂直门户,201 需要进一步理解用户行为,要增加数据统计的维度和数据挖掘的深度。

当时的 Google 统计刚刚引入热力图(这里我记不准,可能不是“刚刚”),可以统计用户在页面的交互动作,显示用户最关注哪个区域,跟哪个区域交互最多。见下图,越热的地方,就是用户越关心的地方。

201 产品部门也想用这款产品,不过面临几个问题:

  1. 需要使用第三方工具,数据安全性存在疑虑,也担心将来很难整合其它数据
  2. 当时普通用户还是 IE 为主,浏览器性能很差,201 的页面本身消耗资源就不少,加入更多统计可能会影响到用户
  3. 热力图的结果其实是可以预期的,如上图;如果差太远,那就是出了问题。所以,要不要用一个大概率没什么用的产品呢?
  4. 自己开发的话,统计量很大,预估实际点击和有效点击可能有 10 倍左右的差距,对我们的统计服务器也是很大的负担。

1. 现有用户路径统计

当时我们已经基于服务器 access log 打造了一款用户路径统计产品。我们都会给 每个用户分配一个 sesssion id,当他们访问网站的时候,记录下网页 URL 和 session id,后面就可以分析访问日志,得到每个用户的访问路径。比如:首页 > 手机 > 苹果专区 > iPhone 13,等。

负责这套系统的朋友找到我,让我帮忙做一套前端工具,给产品部门使用。最初的前端界面很简单,输入一个页面地址,搜索,得到一连串 URL,然后产品经理一个一个点过去看。我接手后,很自然地,将其改造成发散图:

  1. 从输入的节点取出所有以此 URL 为开始的用户路径
  2. 整理节点,按照访问数量排序
  3. 用线路粗细表示用户的数量
  4. 点击 URL,可以跳转到 URL 或者以 URL 进行筛选

上线后,效果良好,产品经理可以很轻松的看出用户的流向,辅助他们做调整页面的决策。他们给予我们高度好评,并且深入讲述了他们的其它需求,包括前面提到的,更详细记录用户轨迹的需求。

接下来我开始思考这个问题的解决方案。

2. 解决方案

功夫不负有心人,我想到一个方案:

  1. document.body 侦听用户的点击事件,判断点击的目标,如果是链接,则记录下链接的坐标
  2. 然后将坐标记录在 cookie 里面,cookie 会随着 http 请求发给服务器
  3. 生成访问日志时,记录对应的被点击链接的坐标
  4. 根据坐标生成热力图

这套方案有几个好处:

  1. 完全不需要修改目标页面,也不需要其他部门同事配合,只需要在统计代码中加入几行代码
  2. 不增加页面负担,用户不会感知到任何变化
  3. 不影响其它统计,多出来的 cookie 经过压缩,只需要几个字节

后来,我们又做了页面快照、合并排重等,用很小的成本,实现了不亚于第三方的热力图方案。还可以跟我们其它统计数据做整合,得到更丰富的数据视图。

比如,201 的页面有很多广告,这些广告会使内容的位置有变动,普通热力图无法区分这些变动,导致热区不准。而我们可以根据广告尺寸、快照记录等,把不同的点击区域合并到一起,提供更加准确的用户流向。

3.评价

当时的产品总监给予这套产品很高评价,说它至少可以提升全站访问量的 5%。


4. 总结

可惜,完成这个产品之后,我并没有得到更多做产品的机会;老板也不想我继续升级维护这个产品。后来没多久,我就离开了 201。很长一段时间,我都因为老板不愿给我深入的机会而耿耿于怀,直到后来从点厂出来加入 O 厂,突然感觉理解老板了。


欢迎吐槽,共同进步

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

%d 博主赞过: