Zaraz 设计模式

# Zaraz 模式 ## SPA 追踪 **历史记录变更触发器（推荐）：** 在仪表板中配置 - 无需代码，Zaraz 会自动检测路由变更。 **手动追踪 (React/Vue/Next.js)：** javascript // 路由变更时 zaraz.track('pageview', { page_path: pathname, page_title: document.title }); ## 用户识别 javascript // 登录 zaraz.set({ userId: user.id, email: user.email, plan: user.plan }); zaraz.track('login', { method: 'oauth' }); // 登出 - 设置为 null（无法清除） zaraz.set('userId', null); ## 电商漏斗 | 事件 | 方法 | |-------|--------| | 查看 | `zaraz.ecommerce('Product Viewed', { product_id, name, price })` | | 加入购物车 | `zaraz.ecommerce('Product Added', { product_id, quantity })` | | 结账 | `zaraz.ecommerce('Checkout Started', { cart_id, products: [...] })` | | 购买 | `zaraz.ecommerce('Order Completed', { order_id, total, products })` | ## A/B 测试 javascript zaraz.set('experiment_checkout', variant); zaraz.track('experiment_viewed', { experiment_id: 'checkout', variant }); // 转化时 zaraz.track('experiment_conversion', { experiment_id, variant, value }); ## Worker 集成 **上下文增强器 (Context Enricher)** - 在工具执行前修改上下文： typescript export default { async fetch(request, env) { const body = await request.json(); body.system.userRegion = request.cf?.region; return Response.json(body); } }; 配置：Zaraz > 设置 > 上下文增强器 **Worker 变量** - 在服务端计算动态值，使用方式为 `{{worker.variable_name}}`。 ## GTM 迁移 | GTM | Zaraz | |-----|-------| | `dataLayer.push({event: 'purchase'})` | `zaraz.ecommerce('Order Completed', {...})` | | `{{Page URL}}` | `{{system.page.url}}` | | `{{Page Title}}` | `{{system.page.title}}` | | 页面浏览触发器 | Pageview 触发器 | | 点击触发器 | Click (选择器: `*`) | ## 最佳实践 1. 优先使用仪表板触发器而非内联代码 2. 为 SPA 启用历史记录变更（无需手动代码） 3. 使用 `zaraz.debug = true` 进行调试 4. 尽早实施同意机制 (GDPR/CCPA) 5. 对敏感/服务端数据使用上下文增强器