突然想聊聊当年在 201 做的用户轨迹追踪产品，也算是自己当年产品工程能力的体现吧。
0. 需求
大约在 2010 年，作为最大的 IT 资讯垂直门户，201 需要进一步理解用户行为，要增加数据统计的维度和数据挖掘的深度。
当时的 Google 统计刚刚引入热力图（这里我记不准，可能不是“刚刚”），可以统计用户在页面的交互动作，显示用户最关注哪个区域，跟哪个区域交互最多。见下图，越热的地方，就是用户越关心的地方。
201 产品部门也想用这款产品，不过面临几个问题：
- 需要使用第三方工具，数据安全性存在疑虑，也担心将来很难整合其它数据
- 当时普通用户还是 IE 为主，浏览器性能很差，201 的页面本身消耗资源就不少，加入更多统计可能会影响到用户
- 热力图的结果其实是可以预期的，如上图；如果差太远，那就是出了问题。所以，要不要用一个大概率没什么用的产品呢？
- 自己开发的话，统计量很大，预估实际点击和有效点击可能有 10 倍左右的差距，对我们的统计服务器也是很大的负担。
1. 现有用户路径统计
当时我们已经基于服务器 access log 打造了一款用户路径统计产品。我们都会给 每个用户分配一个 sesssion id，当他们访问网站的时候，记录下网页 URL 和 session id，后面就可以分析访问日志，得到每个用户的访问路径。比如：首页 > 手机 > 苹果专区 > iPhone 13，等。
负责这套系统的朋友找到我，让我帮忙做一套前端工具，给产品部门使用。最初的前端界面很简单，输入一个页面地址，搜索，得到一连串 URL，然后产品经理一个一个点过去看。我接手后，很自然地，将其改造成发散图：
- 从输入的节点取出所有以此 URL 为开始的用户路径
- 整理节点，按照访问数量排序
- 用线路粗细表示用户的数量
- 点击 URL，可以跳转到 URL 或者以 URL 进行筛选
上线后，效果良好，产品经理可以很轻松的看出用户的流向，辅助他们做调整页面的决策。他们给予我们高度好评，并且深入讲述了他们的其它需求，包括前面提到的，更详细记录用户轨迹的需求。
接下来我开始思考这个问题的解决方案。
2. 解决方案
功夫不负有心人，我想到一个方案：
- 在
document.body侦听用户的点击事件，判断点击的目标，如果是链接，则记录下链接的坐标 - 然后将坐标记录在 cookie 里面，cookie 会随着 http 请求发给服务器
- 生成访问日志时，记录对应的被点击链接的坐标
- 根据坐标生成热力图
这套方案有几个好处：
- 完全不需要修改目标页面，也不需要其他部门同事配合，只需要在统计代码中加入几行代码
- 不增加页面负担，用户不会感知到任何变化
- 不影响其它统计，多出来的 cookie 经过压缩，只需要几个字节
后来，我们又做了页面快照、合并排重等，用很小的成本，实现了不亚于第三方的热力图方案。还可以跟我们其它统计数据做整合，得到更丰富的数据视图。
比如，201 的页面有很多广告，这些广告会使内容的位置有变动，普通热力图无法区分这些变动，导致热区不准。而我们可以根据广告尺寸、快照记录等，把不同的点击区域合并到一起，提供更加准确的用户流向。
3.评价
当时的产品总监给予这套产品很高评价，说它至少可以提升全站访问量的 5%。
（更多…）