分享如何为 SaaS 网站设计用户行为追踪方案,把今天搞了一天的内容写出来,以后也准备这样保持输出和记录,把每天干的事情总结写出来。
搞了个公众号也同步记录:
mp.weixin.qq.com## 为什么要做事件埋点?
你有没有遇到过这些问题:
- 投了广告,但不知道哪个渠道带来的用户最终付费了
- 用户注册后流失了,不知道卡在哪个环节
- 支付页面转化率很低,但不知道问题出在哪
这些问题的根源是:**你不知道用户在网站上做了什么**。
Google Analytics 4(GA4)可以帮你追踪用户行为,但默认只能看到页面浏览量(PV)。要想知道用户是否登录、是否付费,你需要自己埋点上报。
---
## 四个关键事件
对于 SaaS 网站,最核心的 4 个事件是:
| 事件 | 含义 | 业务价值 |
| ---------------- | -------- | ------------------ |
| `sign_up` | 用户注册 | 衡量获客能力 |
| `login` | 用户登录 | 衡量用户活跃度 |
| `begin_checkout` | 开始结账 | 衡量购买意向 |
| `purchase` | 完成购买 | 衡量营收,计算 ROI |
有了这 4 个事件,你就能在 GA4 中看到完整的用户漏斗:
```
访问 → 注册 → 登录 → 开始结账 → 完成购买
│ │ │ │ │
│ │ │ │ └── purchase
│ │ │ └── begin_checkout
│ │ └── login
│ └── sign_up
└── page_view(自动)
```
---
## 事件一:用户注册(sign_up)
### 思考:什么时候算"注册成功"?
- 用户点击注册按钮?❌ 可能填错信息,注册失败
- 表单提交成功?❌ 可能后端校验不通过
- **后端创建用户成功,用户自动登录?✅**
**设计原则**:在用户真正成为你的用户时,才上报注册事件。
### 难点:如何区分"新注册"和"老用户登录"?
注册后会自动登录,登录后也会进入主页。代码怎么知道这个用户是刚注册的,还是老用户登录的?
**解决方案**:根据用户的创建时间判断
```
如果(当前时间 - 用户创建时间 < 5分钟)
→ 这是新用户,上报 sign_up 事件
否则
→ 这是老用户,只上报 login 事件
```
### 上报的数据
| 参数 | 说明 | 示例 |
| --------- | ---------------- | ------------------ |
| `user_id` | 用户唯一标识 | `user_abc123` |
| `method` | 注册方式(可选) | `google` / `email` |
---
## 事件二:用户登录(login)
### 思考:什么时候算"登录成功"?
表面上很简单:用户输入账号密码,点击登录,成功了就上报。
但在现代 Web 应用中,有个棘手的问题:
**刷新页面会触发"登录"吗?**
用户已经登录了,刷新一下页面,前端代码会重新执行。如果不做处理,每次刷新都会误报一次登录事件。
### 难点:如何区分"真正登录"和"页面刷新"?
**解决方案**:记住已处理的登录会话
```
用户登录 → 生成会话 ID(session_abc123)
→ 在浏览器本地存储这个 ID
→ 上报 login 事件
用户刷新页面 → 获取会话 ID(session_abc123)
→ 检查本地存储,发现已经处理过
→ 不上报 login 事件
用户登出再登录 → 生成新会话 ID(session_xyz789)
→ 检查本地存储,发现是新的 ID
→ 上报 login 事件
```
**核心逻辑**:会话 ID 变了 = 新登录,会话 ID 没变 = 只是刷新页面。
### 关于跨设备登录
用户在手机上登录过,换到电脑上再登录,算不算新登录?
**算!** 因为本地存储是按设备隔离的,电脑上没有之前的记录,所以会上报登录事件。
这正是我们期望的行为:每个设备的首次登录都应该被记录。
---
## 事件三:开始结账(begin_checkout)
### 思考:什么时候算"开始结账"?
用户的购买流程通常是这样的:
```
① 浏览定价页,看看有什么套餐
② 点击「购买」按钮,弹出支付方式选择
③ 选择支付方式(Stripe / PayPal / 支付宝)
④ 跳转到第三方支付页面
⑤ 输入卡号,完成支付
⑥ 返回网站,看到购买成功
```
在哪一步上报 `begin_checkout`?
| 步骤 | 是否合适 | 原因 |
| ------------------ | -------- | ---------------------------- |
| ① 浏览定价页 | ❌ | 只是看看,80% 的人不会买 |
| ② 点击购买按钮 | ❌ | 可能只是想看看支付方式 |
| **③ 选择支付方式** | ✅ | 用户已经决定要付款了 |
| ④ 跳转支付页面 | ❌ | 已经离开你的网站,来不及埋点 |
**设计原则**:在用户表达明确的购买意向时上报,太早会有噪音,太晚会丢数据。
### 上报的数据
| 参数 | 说明 | 示例 |
| ---------- | -------- | ------------------- |
| `currency` | 货币代码 | `USD` / `CNY` |
| `value` | 总金额 | `99.00` |
| `items` | 商品列表 | 商品 ID、名称、价格 |
---
## 事件四:完成购买(purchase)
### 思考:什么时候算"购买成功"?
支付是在 Stripe、PayPal 等第三方平台完成的,我们的网站并不能实时知道用户付没付钱。
那怎么知道支付成功了?
**答案**:支付成功后,第三方平台会把用户重定向回你的网站。
```
用户支付成功
↓
Stripe 重定向到:https://你的网站/payment/callback?order_no=123
↓
你的网站验证订单状态
↓
跳转到订单列表页,显示购买成功
```
**关键洞察**:`purchase` 事件应该在用户返回你的网站后上报。
### 难点:如何区分"支付成功跳转"和"普通访问"?
订单列表页平时也能访问,怎么知道这次是支付成功后跳过来的?
**解决方案**:在 URL 中加标记
```
支付成功后的 URL:
/orders?payment_success=true&order_no=123456
↑ ↑
标记"这是支付成功" 订单号
普通访问的 URL:
/orders
(没有标记,不触发 purchase 事件)
```
### 难点:刷新页面会重复上报吗?
用户支付成功后,在订单页面刷新一下,URL 参数还在,会不会再报一次?
**解决方案**:上报后清除 URL 参数
```
1. 检测到 URL 有 payment_success=true
2. 上报 purchase 事件
3. 把 URL 改成 /orders(去掉参数)
4. 刷新页面时,参数已经没了,不会重复
```
### 上报的数据
| 参数 | 说明 | 示例 |
| ---------------- | -------------- | -------------------- |
| `transaction_id` | 订单号(必需) | `ORDER_20241216_001` |
| `currency` | 货币代码 | `USD` |
| `value` | 支付金额 | `99.00` |
| `items` | 商品列表 | 同 begin_checkout |
**为什么订单号是必需的?** 因为 GA4 用订单号去重。如果同一个订单号上报两次,GA4 只会计算一次收入。
---
## 一个容易踩的坑:GA4 只能在前端发送
很多开发者会想:支付成功在后端处理,直接在后端发送 GA4 事件不就行了?
**不行!**
GA4 的 gtag.js 是浏览器端的 JavaScript,只能在用户浏览器中运行。后端(Node.js)没有 gtag.js,发不了事件。
| 位置 | 能否发送 GA4 事件 |
| ------------ | ----------------- |
| 前端页面 | ✅ 可以 |
| 后端 API | ❌ 不行 |
| 第三方支付页 | ❌ 不行 |
所以,所有 GA4 事件都必须在**用户能看到的页面**中发送。
---
## 最终效果
做完这 4 个事件后,你可以在 GA4 中:
**1. 看到完整的用户漏斗**
```
page_view: 10000
sign_up: 500 (转化率 5%)
login: 2000
begin_checkout: 100
purchase: 50 (结账转化率 50%)
```
**2. 按渠道分析 ROI**
| 渠道 | 访问 | 注册 | 付费 | 收入 | ROI |
| ------ | ---- | ---- | ---- | ----- | ---- |
| Google | 5000 | 200 | 30 | $2970 | 2.9x |
| 推特 | 3000 | 150 | 15 | $1485 | 1.5x |
| 直接 | 2000 | 150 | 5 | $495 | - |
**3. 找到流失点**
```
begin_checkout: 100
purchase: 50
50% 的用户开始结账后没有完成支付!
可能原因:支付页面太复杂?不支持用户的支付方式?
```
---
## 总结
给 SaaS 网站做 GA4 事件埋点,核心思路是:
| 事件 | 核心问题 | 解决方案 |
| ---------------- | -------------------------- | ----------------------- |
| `sign_up` | 如何区分新用户和老用户? | 根据创建时间判断 |
| `login` | 如何避免刷新页面重复上报? | 用 Session ID 去重 |
| `begin_checkout` | 在哪一步上报最合适? | 用户选择支付方式时 |
| `purchase` | 如何知道支付成功了? | URL 参数标记 + 发后清除 |
**记住两个原则**:
1. **宁可少报,不要多报**:重复上报会让数据失真
2. **在前端上报**:GA4 只能在浏览器中发送事件
希望这篇文章对你有帮助!如果你也在做 SaaS 产品,欢迎交流。