Lead Gen Calculator Skill 是一个用于 Astro 的多步骤计算器界面技能,通过分步提问引导用户完成报价或定价估算,并在过程中捕获线索。其后端依赖 astro-forms。
用途:提供逐步式的计算器交互,借助渐进式问题收集潜在客户信息,计算器本身即为其所在页面的主转化点。
主要能力与规格:
- 步骤限制:最多 7 步、每步最多 4 个字段、每题最多 6 个选项。超过 7 步或每步超过 4 个字段会判定为 FAIL;每题超过 6 个选项仅为 WARN。
- 渐进式披露:个人数据只允许在最后一步收集。第 1 至 N 步可询问服务、位置、偏好等;最后一步才可询问姓名、邮箱、电话与 GDPR 同意。在最后一步之前收集邮箱会判定为 FAIL。
- 步骤类型:radio 单选(200ms 自动前进)、checkbox 多选(全部选中后前进)、dropdown(选中后前进)、form 联系表单(最后一步,需提交)。
页面规则:计算器页面必须使用计算器;landing 页面可选内嵌;service 页面应改用表单;thank-you 与 article 页面禁止放置计算器,否则判定 FAIL。计算器页面上不得出现其他表单。
数据完整性契约:计算器提交必须包含 quote_id(唯一哈希)、all_answers(完整步骤数据)、source_page(计算器 URL)、timestamp(ISO 日期时间)、gdpr_consent(true 加时间戳);若启用定价,还需 calculated 中的 price_estimate 与 breakdown(明细项)。缺少任一数据契约字段判定 FAIL。
提交后流程契约:需包含 1_result_page(必填,路径 /eredmeny/[hash])、2_confirmation_email(必填)、3_analytics_event(必填,事件名 calculator_submit)。任一缺失判定 FAIL。
视觉规则:图片使用 1:1 比例;卡片使用品牌色背景与白色文字;社交证明每步不同;界面简洁、聚焦问题;计算器上隐藏菜单。
加载策略:首页急切加载全部资源;加载完成后预取下一步;API 调用时显示骨架屏。
GTM 事件(必需):calculator_step(步骤浏览)、calculator_option(选项选择)、calculator_submit(表单提交)、calculator_value(报价金额)。缺少事件判定 WARN。
浏览器状态:使用 localStorage 持久化;通过 popstate 监听实现后退按钮;从 history.state 恢复状态。
转换判定:当计算器出现在禁止页面、步数超过 7、每步字段超过 4、最后一步前收集邮箱、缺少数据契约字段、提交后流程不完整时判定 FAIL;当每题选项超过 6 个、未配置 GTM 事件、无社交证明变化时判定 WARN;全部通过则 PASS。
完成标准:声明主转化点;步数不超过 7 且每步字段不超过 4;个人数据仅在最后一步收集;数据契约完整;提交后流程完整;配置 GTM 事件;处理浏览器后退;conversion_verdict 为 PASS。
参考资料包括 components.md(UI 组件)、client.md(客户端 JS)、gtm.md(分析事件)。