add-analytics

📊 一键集成 GA4 数据分析追踪

基于 Google 官方 gtag 的 GA4 集成方案,自动检测多框架并支持 GDPR 合规,实现安全高效的数据分析埋点。

收藏
5.3k
安装
1.3k
版本
v0.1.0
CLS 安全性认证2026-05-16
点击查看完整报告 >

使用说明

核心用法

该 Skill 为 Web 项目提供全栈式的 Google Analytics 4 (GA4) 集成解决方案。通过智能检测项目类型(支持 Next.js、React、Vue、Nuxt、Astro、SvelteKit、Remix、Gatsby、Angular 等 12+ 种框架),自动生成对应框架的最优集成代码。用户只需提供 Measurement ID(G-XXXXXXXXXX 格式),Skill 即可输出完整的初始化代码、TypeScript 类型声明、环境变量配置及事件追踪工具函数。支持通过 --events 标志添加自定义事件追踪辅助函数,--consent 标志集成 GDPR 合规的 Cookie 同意管理,--debug 标志启用开发调试模式。

显著优点

框架覆盖全面:从现代 SSR 框架(Next.js App Router、Nuxt 3、SvelteKit)到传统 SPA(React、Vue、Angular)乃至纯 HTML 项目,均提供针对性集成方案,代码遵循各框架最佳实践(如 Next.js 的 Script 组件策略、Vue 的插件机制)。

隐私合规原生支持:内置 Google Consent Mode 实现,通过 --consent 参数可生成符合 GDPR/CCPA 的同意管理代码,默认拒绝追踪直至用户授权,并提供 acceptAll/acceptAnalyticsOnly/denyAll 等便捷 API。

工程化友好:强制使用环境变量管理 Measurement ID(NEXT_PUBLIC_GA_MEASUREMENT_ID 等),避免敏感信息硬编码;提供完整的 TypeScript 类型定义(gtag.d.ts);包含 .gitignore 检查提醒,防止配置泄露。

事件追踪标准化:内置推荐事件库(sign_up、purchase、search、share 等),封装 pageview、trackEvent、trackError 等工具函数,支持自动路由变更追踪(SPA 页面浏览无刷新上报)。

潜在缺点与局限性

厂商锁定:仅支持 Google Analytics 4(已废弃 UA 旧版),且依赖 Google 的 gtag 库加载(https://www.googletagmanager.com),在网络受限地区可能无法加载或数据上报失败。

手动集成成本:尽管提供代码模板,但仍需开发者手动复制文件、修改布局组件、配置环境变量,无法实现完全自动化的"零代码"接入。对于大型遗留项目,可能需要额外调整 CSP(内容安全策略)以允许 Google 脚本加载。

来源可信度:开发者 jeftekhari 为个人开发者(T3 来源),虽经安全审查无恶意代码,但长期维护更新频率存疑,且 Skill 本身不包含自动化测试用例验证集成正确性。

数据主权考量:所有分析数据均发送至 Google 服务器,对于要求数据不出境或对隐私极度敏感的场景(如金融、政务),需要额外评估合规风险。

适合的目标群体

前端开发者:特别是使用 React/Vue 生态的工程师,需要快速为项目添加专业级数据分析能力而不想深入阅读 GA4 官方文档。

国际化产品团队:面向欧盟、美国等受严格隐私法规监管市场的产品,需要开箱即用的 GDPR 合规方案(Consent Mode)而非自行实现。

初创公司与 MVP 项目:需要在短时间内完成数据埋点,利用预设的事件追踪模板(转化、分享、搜索)快速搭建数据看板。

技术管理者:希望标准化团队内 GA4 集成方式,通过统一的环境变量管理和 TypeScript 类型定义减少配置错误。

使用风险与注意事项

性能影响:gtag 脚本虽为异步加载,但仍会增加页面初始加载资源(约 20-30KB),在弱网环境可能影响首屏时间。建议配合 strategy="afterInteractive"(Next.js)或动态导入策略使用。

配置安全风险:若未正确将 .env.local 加入 .gitignore,可能导致 Measurement ID 泄露(虽非高敏感密钥,但仍属隐私配置)。Skill 已提供相关提醒,但依赖用户执行。

数据准确性:广告拦截器(如 uBlock Origin)会默认阻断 Google Analytics 请求,导致数据缺失(通常 15-30% 用户)。Skill 提供 debug 模式辅助验证,但无法解决拦截问题。

法规合规责任:尽管 Skill 提供 Consent Mode 代码模板,但开发者仍需自行实现同意横幅 UI 并确保法律文本符合当地法规(如欧盟的 Cookie 指令),Skill 仅提供技术实现层支持。

安全解读

核心用法

add-analytics 是一款专为前端项目设计的 GA4 集成助手。通过智能检测项目框架(Next.js、Nuxt、Astro、SvelteKit、Vue、React、Angular、Plain HTML 等),自动生成对应框架的跟踪代码实现。用户仅需提供 G-XXXXXXXXXX 格式的 Measurement ID,Skill 即可输出完整的初始化代码、环境变量配置及可选的高级功能模块。

显著优点

1. 框架感知自动化:内置 12 种项目类型的检测逻辑,优先识别 Next.js App Router/Pages Router、Nuxt 3、Astro、SvelteKit 等现代框架,无需手动适配
2. 隐私合规原生支持:通过 --consent 标志一键启用 GDPR 合规模式,内置 consent API 与 Cookie 同意管理,避免法律风险

3. 事件追踪即插即用--events 标志提供完整的推荐事件库(engagement、conversion、content、form、error 等),覆盖电商、SaaS、内容站常见场景

4. TypeScript 完整类型:自动生成 gtag.d.ts 声明文件,消除全局类型错误

5. 调试友好--debug 模式配合官方 Chrome 扩展,开发环境实时验证数据上报

潜在缺点与局限性

  • 第三方依赖锁定:所有数据发送至 Google 服务器,对数据主权敏感的用户需权衡
  • 广告拦截影响:约 25-40% 用户启用广告拦截器会导致数据丢失,Skill 未内置 graceful degradation 逻辑
  • 框架版本漂移:检测逻辑基于特定配置文件(如 next.config.js),若框架重大更新可能失效
  • 无服务端渲染优化:部分示例采用客户端动态注入脚本,非最优的 SSR/SSG 性能方案
  • 许可证未声明:来源可信(T2/clawdbot 组织)但许可证字段为空

适合人群

  • 需快速上线数据分析的独立开发者/小团队
  • 缺乏 GA4 集成经验的前端工程师
  • 需满足欧盟合规要求的国际化产品
  • 使用 TypeScript 且重视类型安全的项目

常规风险

| 风险类型 | 等级 | 说明 |
|---------|------|------|
| 隐私数据收集 | 中 | 用户行为数据出境,需配合 `--consent` 使用 |
| 广告拦截导致数据缺失 | 低 | 预期行为,但影响报表完整性 |
| 环境变量泄露 | 低 | Skill 已提示 `.env.local` 加入 `.gitignore` |

安全认证

CLS-Certify v2.1.0 扫描结果:Grade A (85分)。纯 Markdown 文档型 Skill(T-MD 分类),无可执行代码。静态分析通过,隐私合规项通过,网络调用仅限 Google Tag Manager 官方 TLS 端点。

add-analytics 内容

手动下载zip · 5.7 kB
SKILL.mdtext/markdown
请选择文件