GA4埋码接入

技能简介

该技能自动识别项目技术栈，为Next.js、React、Vue、Astro等主流框架注入Google Analytics 4追踪代码，支持自定义事件、Cookie同意弹窗及调试模式配置。

业务背景

解决多技术栈项目接入GA4的繁琐配置问题。自动识别Next.js、React等主流框架，一键生成合规追踪代码，避免手动埋码错误与重复统计风险，同时内置GDPR合规的Cookie同意机制，降低数据合规隐患。

落地案例：某电商团队使用Next.js搭建营销站点，需上线大促活动页并追踪转化。通过该技能传入G-XXXXXXXXXX格式的Measurement ID，系统自动检测框架类型并注入初始化代码，开启–events后自动生成加购、支付等自定义事件追踪函数。开发者在–debug模式下验证数据上报无误后，将ID写入环境变量即可上线，无需逐行查阅GA4文档。

能做什么

• 自动检测12种常见前端框架类型
• 验证Measurement ID格式（G-开头）
• 生成对应框架的GA4初始化代码
• 可选添加页面浏览与自定义事件追踪
• 可选集成Cookie同意管理
• 开发环境启用调试模式

使用说明

安装指令：该技能无需单独安装，通过AI助手直接调用。执行时需传入参数：

<measurement-id> [--events] [--consent] [--debug]

分步执行流程：

1. 提供以G-开头的10位Measurement ID（如G-ABC1234567）
2. 技能扫描项目根目录，按优先级检测next.config.js、nuxt.config.js、astro.config.mjs等配置文件
3. 确认TypeScript使用情况与包管理器类型
4. 检查是否已存在gtag或旧版UA追踪代码
5. 根据检测结果生成对应框架的组件文件（如components/GoogleAnalytics.tsx）
6. 如需事件追踪，额外生成pageview/event辅助函数
7. 如需 consent 选项，插入Cookie同意检测逻辑
8. 如需 debug 选项，保留开发环境日志输出

输入与输出

见下方输入与输出表格。

风险提示

• Universal Analytics（UA-开头ID）已于2024年7月停用，需提供GA4专用ID
• 生产环境务必配置环境变量存储Measurement ID，避免硬编码泄露
• 欧盟地区需配合Cookie同意机制，否则可能违反GDPR
• 重复注入可能导致数据重复统计，执行前会扫描现有analytics实现
• App Router与Pages Router的Next.js项目代码位置不同，检测错误会导致注入失败

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/jeftekhari/add-analytics/SKILL.md
来源类型：GitHub Skill Registry