关于 google-tagmanager
用于配置 Google Tag Manager 标签、触发器、变量和数据层的参考指南,面向分析与营销配置的实施和排错人员。还介绍第三方托管的 GTM MCP 服务,用于管理容器。
主要功能
- 01容器与标签配置指南
- 02触发器和变量参考
- 03数据层与电商事件模式
- 04Consent Mode v2 指南
- 05预览与调试流程
- 06GTM MCP 服务操作说明
适用场景
- 01设置 GA4 页面浏览跟踪
- 02跟踪表单提交和购买
- 03在预览中检查同意状态
- 04通过 MCP 管理 GTM 实体
MCP 相关
内置的 `gtm-mcp-server` 是由 Stape 托管的第三方服务。其工具可创建、更新和删除 GTM 实体,也可创建或发布容器版本。
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ henkisdabro/ wookstar-claude-plugins --skill google-tagmanager安装后在 Claude Code 中输入/google-tagmanager确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/api.mdbest-practices.mdcustom-templates.mddatalayer.mddebugging.mdserver-side.mdsetup.mdtags.mdtriggers.mdvariables.md详细介绍
Google Tag Manager
从文末的表格中选择参考文件,并在回答超出以下基础内容的问题前阅读该文件。
捆绑的 gtm-mcp-server 是 Stape 托管的 GTM MCP 服务(由第三方提供,并非 Google)。其工具可以创建、更新和删除标签、触发器、变量及其他实体,还可以创建和发布容器版本。调用删除或发布操作前,请说明将在哪个容器和工作区中进行哪些更改,并让用户批准。
快速入门
- 在 tagmanager.google.com 创建 GTM 账号
- 创建容器(Web、iOS、Android 或 Server)
- 安装容器代码段——参见 setup.md
- 配置标签、触发器和变量
- 在预览模式下测试——参见 debugging.md
- 发布
基本标签配置
Example: Google Tag (GA4)
Tag Type: Google Tag
Tag ID: G-XXXXXXXXXX
Trigger: All Pages
标签文档请参见 tags.md。
数据层推送
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'custom_event',
'category': 'engagement',
'action': 'button_click',
'label': 'CTA Button'
});
数据层模式请参见 datalayer.md。
常见工作流
GA4 页面浏览跟踪
- 使用 GA4 衡量 ID 创建 Google Tag(以前称为“GA4 Configuration”标签类型)
- 将触发器设为“All Pages”
- 在预览模式下测试,并在 GA4 DebugView 中验证
- 发布
表单提交跟踪
- 创建表单提交触发器
- 创建 GA4 事件标签(
form_submit),并将表单 ID/名称设为参数 - 在预览模式下测试并发布
电商跟踪
- 使用电商事件实现数据层——参见 datalayer.md
- 为每个事件创建数据层变量和 GA4 事件标签
- 将变量映射到事件参数
- 测试完整的购买流程并发布
Consent Mode v2
四种同意类型用于控制 Google 标签:ad_storage、analytics_storage、ad_user_data 和 ad_personalization(后两种是 EEA/UK 广告衡量和个性化所必需的)。
- 从社区模板库添加 CMP 的模板(或使用
setDefaultConsentState/updateConsentState模板 API 构建一个模板——模板会调用这些 API,而不是调用gtag('consent', ...))。 - 在 Consent Initialization - All Pages 触发器上触发该模板,以便在任何其他标签触发前设置默认值(通常为
denied,也可以按地区设置,并使用wait_for_update)。 - 用户作出选择时,CMP 会更新同意状态;Google 标签会自动调整。对于非 Google 标签,请在每个标签的“同意设置”中设置 Additional consent checks,并使用容器的 Consent Overview 确认所有标签均已涵盖。
- 选择基本模式(在获得同意前阻止标签)或高级模式(即使同意状态为拒绝,Google 标签仍会加载并发送无 Cookie Ping)。
- 在预览模式中,每个事件的“同意”标签页都会显示默认状态和更新状态——确认默认状态会在“Consent Initialization”中、首个标签触发前出现。
排查标签未触发问题
- 启用预览模式并执行相应操作
- 查看“未触发的标签”部分并检查触发器条件
- 验证数据层值,修正条件并重新测试
- 详细工作流请参见 debugging.md
技术限制
必须使用 ES5:自定义 JavaScript 变量和自定义 HTML 标签必须使用 ES5 语法(var、function()、字符串拼接)。自定义模板支持部分 ES6。详情及解决方法请参见 best-practices.md。
RE2 正则表达式:GTM 使用 RE2 正则表达式——不支持前瞻、后顾或反向引用。支持的模式请参见 best-practices.md。
快速参考
要启用的内置变量
- 页面 URL、页面路径、页面主机名
- 点击元素、点击类、点击 ID、点击 URL、点击文本
- 表单元素、表单 ID、表单类
- 滚动深度阈值、滚动方向
常见触发器类型
页面浏览、点击(所有元素/仅链接)、表单提交、自定义事件、历史记录更改(SPA)、计时器、滚动深度
必备数据层事件
// Page view
dataLayer.push({ 'event': 'page_view' });
// User login
dataLayer.push({ 'event': 'login', 'method': 'Google' });
// Purchase - clear the previous ecommerce object first
dataLayer.push({ 'ecommerce': null });
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'transaction_id': 'T12345',
'value': 99.99,
'currency': 'AUD',
'items': [...]
}
});
参考文件
| 主题 | 参考文件 |
|---|---|
| 容器设置 | setup.md |
| 标记配置 | tags.md |
| 触发器配置 | triggers.md |
| 变量配置 | variables.md |
| 数据层 | datalayer.md |
| 调试 | debugging.md |
| 最佳实践、命名、性能、安全性 | best-practices.md |
| 自定义模板 | custom-templates.md |
| API 自动化 | api.md |
| 服务端容器:托管、自定义域名、客户端、GA4 服务端标记 | server-side.md |