用途:面向 Astro.js(部署于 Cloudflare Workers)的线索获取站点,提供 GA4、Meta Pixel、Google Ads 的事件追踪与转化回传,适用于新站搭建、计算器/测验漏斗、电话与回呼、联系表单等场景。
主要能力:组件包括 <Tracking />(置于 head)、<TrackingNoscript />(置于 body 顶部)、<TrackedForm />、<PhoneLink />、<CallbackButton />。内置滚动深度、计算器步骤、电话点击、回呼点击、表单放弃、线索提交等事件,并通过 CookieYes 做同意桥接、GTM Consent Mode v2 作为第二层控制。所有追踪函数在代码层检查同意状态。服务端 /api/track.ts 对接 Meta CAPI,含 5 层安全:32KB 载荷限制、Zod 判别联合校验、来源白名单、可选 HMAC 令牌、内存限流。
使用方式:将 assets/boilerplate/ 复制到 src/;在 Layout 中加入 <Tracking gtmId="GTM-XXX" cookieYesId="abc123" /> 与 <TrackingNoscript gtmId="GTM-XXX" />;在 Cloudflare 启用 Google Tag Gateway;设置 META_ACCESS_TOKEN、META_PIXEL_ID、ALLOWED_ORIGINS 等环境变量;配置 GTM;在 astro.config 设置 output: 'server'。表单用法示例:<TrackedForm action="/api/lead" eventType="lead" contentName="Calculator">。计算器可用 trackCalculatorStart()、trackCalculatorStep()。加 ?debugTracking=1 可将事件输出到控制台。
限制:内存限流在冷启动后重置,需配合 Cloudflare WAF;sendBeacon 为尽力投递;Google Tag Gateway 仅减少部分广告拦截影响;localStorage 可存活 Safari ITP,但未必对抗所有隐私工具;600ms 追踪等待不保证完成;TrackedForm 使用 form.submit(),复杂多按钮逻辑需自行测试。其余未在资料中说明的定价、平台支持等暂未提供。