Web Analytics 设计模式

# Web Analytics 模式 ## 核心网页指标 (Core Web Vitals) 调试 仪表板 → 核心网页指标 → 点击指标 → 调试视图 (Debug View) 可显示前 5 个有问题的元素。 ### LCP 修复 html ### CLS 修复 css /* 预留空间 */ .ad-container { min-height: 250px; } img { width: 400px; height: 300px; } /* 显式定义尺寸 */ ### INP 修复 typescript // 对高频操作进行防抖处理 const handleInput = debounce(search, 300); // 让出主线程 await task(); await new Promise(r => setTimeout(r, 0)); await task2(); // 将繁重计算移至 Web Worker | 指标 | 良好 | 较差 | |--------|------|------| | LCP | ≤2.5s | >4s | | INP | ≤200ms | >500ms | | CLS | ≤0.1 | >0.25 | ## GDPR 同意机制 typescript // 仅在获得同意后加载 beacon const consent = localStorage.getItem('analytics-consent'); if (consent === 'accepted') { const script = document.createElement('script'); script.src = 'https://static.cloudflareinsights.com/beacon.min.js'; script.setAttribute('data-cf-beacon', '{"token": "TOKEN", "spa": true}'); document.body.appendChild(script); } 替代方案：仪表板 → "启用，排除欧盟访客数据" ## SPA 导航 html 若无 `spa: true`：仅统计初始页面加载。 ## 预发布/生产环境分离 typescript // 使用环境变量区分 Token const token = process.env.NEXT_PUBLIC_CF_ANALYTICS_TOKEN; // .env.production: 生产环境 Token // .env.staging: 预发布环境 Token（或留空以禁用） ## 机器人过滤 仪表板 → 过滤器 → "排除机器人流量" 过滤器：搜索爬虫、监控服务、已知机器人。 未过滤：无头浏览器（Playwright/Puppeteer）。 ## 广告拦截器的影响 约 25-40% 的用户可能会拦截 `cloudflareinsights.com`。目前无官方解决方案。 仪表板显示的是最低基准数据；请使用服务器日志获取完整视图。 ## 限制 - 无 UTM 参数追踪 - 无 Webhooks/警报/API - 无自定义 beacon 域名 - 非代理站点最多 10 个