主题
语言 EN
← 返回项目列表

ModBox Admin

modboxmodular.com 背后的内部运营后台：带完整访客溯源的线索 CRM、第一方流量统计、转化漏斗与表单流失分析，以及一个把报价作为带水印链接发出、还能从泄露截图追查到收件人的文档库。

已上线 · 内部工具 独立承接 · 设计 + 全栈

背景

ModBox 卖的是工厂预制的房子，每一单生意都从官网联系表单里的一条留言开始。在有这个后台之前，这些留言进了邮箱就只剩一段文字：不知道对方看过哪些页面、是怎么找到网站的，也不知道团队回过去的报价到底有没有被打开。

ModBox Admin 是我在官网同一个 Next.js 应用里做的私有后台。销售团队每天用它跟进线索、看访客在网站上的真实路径，并发出能追踪的报价。

本页所有截图都来自本地演示实例和一套虚构数据集。姓名、邮箱、金额和流量都是编的，IP 地址取自专供文档示例使用的保留网段。截图尺寸为 3840×2160，也就是后台在 32 寸 4K 显示器上的样子。

概览：浏览量、新线索与未读线索、14 天趋势、最近线索和热门页面。
概览：浏览量、新线索与未读线索、14 天趋势、最近线索和热门页面。
线索：从新线索到成交或流失的销售管线，带负责人、预估金额和跟进日期。
线索：从新线索到成交或流失的销售管线，带负责人、预估金额和跟进日期。
线索详情：销售面板、关联报价的阅读情况，以及来源归因。
线索详情：销售面板、关联报价的阅读情况，以及来源归因。

做法

知道每条线索从哪来的 CRM

线索页是一个小型销售管线：状态、负责人、预估金额、跟进日期，加一串会记录作者的跟进备注。打开一条线索会自动标为已读；列表可以按阶段、「待跟进」或「我的线索」筛选，也能导出 CSV。

通用 CRM 做不到的是归因。流量统计和线索存在同一个数据库里，所以每条线索都带着这个访客的完整路径：落地页、流量来源、提交前看过的每一页、点过什么，以及从第一次访问到下决定花了多久。访问记录靠加盐哈希后的地址和一个第一方 cookie 关联起来，跨多次访问也能串成一条线，而且不存任何第三方能利用的东西。

提交前的路径：从 Google 进入，看了流程页、成本指南和过往项目，最后到联系表单。
提交前的路径：从 Google 进入，看了流程页、成本指南和过往项目，最后到联系表单。

为销售真正关心的问题做的第一方统计

浏览量、独立访客、机器人占比、来源、设备、按「星期 × 小时」的热力图、实时视图和访客地图，全部由网站自己采集，不用 Google Analytics，也没有任何第三方追踪器。每次浏览都会记录停留时长和滚动深度，在访客离开时通过 beacon 发回。「单次访问」表格可以点开任何一次浏览，看这个人具体做了什么。

一条小小的诚实原则：地图只画一个范围圈，从不画精确的点，因为城市级的地理定位本来就不是一个确切位置。

统计：与上一周期对比的总量、实时活动和最近 30 分钟。
统计：与上一周期对比的总量、实时活动和最近 30 分钟。
访客地图，以及与上一周期对比的每日浏览量。
访客地图，以及与上一周期对比的每日浏览量。

能解释流失的漏斗

  • 转化漏斗：全部访客，到达联系页的访客，提交表单的人。会话用 SQL 窗口函数加「闲置 30 分钟即断开」的规则重建，同时算出入口页、出口页、页面间跳转、跳出率和会话时长。
  • 内容表现：每页的停留时长中位数，以及访客实际滚动到多深。一篇排名很好、读者却在半路离开的指南，一眼就能看出来。
  • 表单流失：联系表单的逐字段漏斗。多少人点进了每个字段、离开时是填了还是空着，以及开始填却没提交的人最后停在哪个字段。
转化漏斗：访客、到达联系页、提交。
转化漏斗：访客、到达联系页、提交。
浏览最多的页面及停留时长中位数，以及每页的滚动深度。
浏览最多的页面及停留时长中位数，以及每页的滚动深度。
表单流失：访客在放弃前填到了哪个字段。
表单流失：访客在放弃前填到了哪个字段。

报价用的文档库

报价以前是作为 PDF 附件发出去的，可以被转发到任何地方。File Encryptor 取代了这种方式：

  • 原始 PDF 从不以文件形式离开服务器。每个收件人拿到自己专属的链接，每一页都在服务器上先渲染成图片再发出。
  • 每页渲染出来的图片都带一个和这条链接绑定的隐形溯源水印。
  • 链接可以设置过期时间、限制打开次数或随时撤销，撤销时连渲染好的页面一起删除。
  • 访问日志记录每次打开和翻页，附设备和城市；按读者统计每页停留多久、滚到多深。团队打电话之前就知道报价到底有没有被认真看过。
  • 文档关联到线索，所以线索页能看到发给这个人的所有报价，以及每份是怎么被读的。
File Encryptor：上传 PDF，关联项目、客户和线索。
File Encryptor：上传 PDF，关联项目、客户和线索。
有效链接和访问日志：每位收件人的每次打开和翻页。
有效链接和访问日志：每位收件人的每次打开和翻页。
收件人看到的界面：干净的翻页阅读器，不能下载，也没有文字层。
收件人看到的界面：干净的翻页阅读器，不能下载，也没有文字层。

追查泄露

如果某份报价出现在了不该出现的地方，团队把这张图拖进 Trace a leak，后台就会指出它是从哪条链接发出去的。水印在截图、重新压缩、裁剪、以及浏览器缩放显示之后依然能读出来。

下面的演示里，输入是收件人页面的一张浏览器截图，经过裁剪，而且是在 4K 屏上截的，页面被放大到了原尺寸的 125%。工具先测出这个缩放比例，再从大约 1500 个背景小格里读出水印，返回了正确的收件人。对着显示器用手机拍的照片就读不出来了，页面上也直接写明了这一点。

追查泄露：一张缩放并裁剪过的截图，被追溯到它所属的链接。
追查泄露：一张缩放并裁剪过的截图，被追溯到它所属的链接。

安全与隐私

  • 访问控制：每位管理员用邮箱加个人访问 key 登录，可另开 TOTP 两步验证。key 只以哈希形式保存。登录失败有频率限制和锁定，会话会过期。
  • 外部摸不清后台：未登录的人请求真实的后台接口，得到的 404 和请求一个不存在的路径完全一样。
  • 请求完整性：所有会修改数据的请求都有 CSRF 防护，cookie 经过加固并锁定到本域。
  • 恶意内容筛查：联系表单提交会筛查威胁和垃圾内容。被标记的留言进单独的队列，附命中原因和证据导出，并且绝不会触发自动回复。
  • 数据保留：原始 IP 地址超过保留期就会清除，只留下让报表继续可用的匿名哈希。
key 登录，每个账号可选开启第二因素验证。
key 登录，每个账号可选开启第二因素验证。

结果与收获

ModBox 销售团队每天都在用。 线索、报价和流量现在都在一个地方。每通电话的第一个问题「您是怎么找到我们的、看过哪些内容」，在电话打通之前就已经有答案了。

  • 把 CRM 建在数据已经在的地方。 因为流量统计和线索共用一个数据库，归因几乎是白送的。如果用第三方 CRM 去对接第三方统计工具，不仅要做集成，访客路径也还是会丢。
  • 会话划分放在 SQL 里做。 对浏览记录用窗口函数，一条查询就能得出会话、漏斗和页面跳转，不需要另外维护一套事件管线。
  • 文档保护追求的是可追溯，而不是防住。 没有哪个网页能阻止截图。真正能改变行为的，是收件人知道副本能追溯到自己，而团队能在一分钟内证明这一点。

技术栈

应用： Next.js 16（App Router、Server Components、Route Handlers）· React 19 · TypeScript · Tailwind CSS v4

数据： PostgreSQL · postgres.js · SQL 窗口函数 · Leaflet

文档： Ghostscript · sharp · 服务端渲染与溯源水印

安全： 哈希存储的访问 key · TOTP · CSRF token · 频率限制