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

突然想聊聊当年在 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 厂，突然感觉理解老板了。