mcpField
G
google-tagmanager

google-tagmanager

github.com/henkisdabro营销与增长93234 次安装3 周前更新
代码仓库

关于 google-tagmanager

用于配置 Google Tag Manager 标签、触发器、变量和数据层的参考指南,面向分析与营销配置的实施和排错人员。还介绍第三方托管的 GTM MCP 服务,用于管理容器。

主要功能

  1. 01容器与标签配置指南
  2. 02触发器和变量参考
  3. 03数据层与电商事件模式
  4. 04Consent Mode v2 指南
  5. 05预览与调试流程
  6. 06GTM MCP 服务操作说明

适用场景

  1. 01设置 GA4 页面浏览跟踪
  2. 02跟踪表单提交和购买
  3. 03在预览中检查同意状态
  4. 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.md
best-practices.md
custom-templates.md
datalayer.md
debugging.md
server-side.md
setup.md
tags.md
triggers.md
variables.md

详细介绍

Google Tag Manager

从文末的表格中选择参考文件,并在回答超出以下基础内容的问题前阅读该文件。

捆绑的 gtm-mcp-server 是 Stape 托管的 GTM MCP 服务(由第三方提供,并非 Google)。其工具可以创建、更新和删除标签、触发器、变量及其他实体,还可以创建和发布容器版本。调用删除或发布操作前,请说明将在哪个容器和工作区中进行哪些更改,并让用户批准。

快速入门

  1. 在 tagmanager.google.com 创建 GTM 账号
  2. 创建容器(Web、iOS、Android 或 Server)
  3. 安装容器代码段——参见 setup.md
  4. 配置标签、触发器和变量
  5. 在预览模式下测试——参见 debugging.md
  6. 发布
基本标签配置
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 页面浏览跟踪
  1. 使用 GA4 衡量 ID 创建 Google Tag(以前称为“GA4 Configuration”标签类型)
  2. 将触发器设为“All Pages”
  3. 在预览模式下测试,并在 GA4 DebugView 中验证
  4. 发布
表单提交跟踪
  1. 创建表单提交触发器
  2. 创建 GA4 事件标签(form_submit),并将表单 ID/名称设为参数
  3. 在预览模式下测试并发布
电商跟踪
  1. 使用电商事件实现数据层——参见 datalayer.md
  2. 为每个事件创建数据层变量和 GA4 事件标签
  3. 将变量映射到事件参数
  4. 测试完整的购买流程并发布
Consent Mode v2

四种同意类型用于控制 Google 标签:ad_storage、analytics_storage、ad_user_data 和 ad_personalization(后两种是 EEA/UK 广告衡量和个性化所必需的)。

  1. 从社区模板库添加 CMP 的模板(或使用 setDefaultConsentState / updateConsentState 模板 API 构建一个模板——模板会调用这些 API,而不是调用 gtag('consent', ...))。
  2. 在 Consent Initialization - All Pages 触发器上触发该模板,以便在任何其他标签触发前设置默认值(通常为 denied,也可以按地区设置,并使用 wait_for_update)。
  3. 用户作出选择时,CMP 会更新同意状态;Google 标签会自动调整。对于非 Google 标签,请在每个标签的“同意设置”中设置 Additional consent checks,并使用容器的 Consent Overview 确认所有标签均已涵盖。
  4. 选择基本模式(在获得同意前阻止标签)或高级模式(即使同意状态为拒绝,Google 标签仍会加载并发送无 Cookie Ping)。
  5. 在预览模式中,每个事件的“同意”标签页都会显示默认状态和更新状态——确认默认状态会在“Consent Initialization”中、首个标签触发前出现。
排查标签未触发问题
  1. 启用预览模式并执行相应操作
  2. 查看“未触发的标签”部分并检查触发器条件
  3. 验证数据层值,修正条件并重新测试
  4. 详细工作流请参见 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

外部资源

评论

支持 Markdown