如何借助Google Tag Manager与GA4利用HTML自定义属性批量追踪按钮点击

1. 配置GTM点击触发器 #

• 登录GTM后台进入对应容器，点击「触发器」→「新建」
• 触发类型选择「点击 - 所有元素」
• 先启用内置变量：进入「变量」→「内置变量」，勾选「点击元素」等相关变量，确保能获取点击元素的属性
• 设置触发条件：选择「点击元素」→「匹配CSS选择器」，填入 [data-modellist]，精准匹配所有带data-modellist属性的按钮
• 命名触发器为「车型列表按钮点击触发」，保存

2. 创建自定义变量提取车型名称 #

• 点击「变量」→「新建」→ 选择「自定义JavaScript」类型
• 输入以下代码，替换data-modelname为你实际存储车型名称的data属性名：

function() {
  return {{Click Element}}.getAttribute('data-modelname');
}

• 变量命名为「车型名称」，保存

3. 配置GA4事件追踪标签 #

• 点击「标签」→「新建」→ 选择「Google Analytics: GA4事件」类型
• 填写核心配置：
  • 「测量ID」：输入你的GA4数据流ID，格式如G-ABC1234567
  • 「事件名称」：自定义事件名，比如model_list_click，建议用小写下划线格式
  • 「事件参数」：添加一行参数，参数名填model_name，参数值选择刚才创建的「车型名称」变量
• 关联触发器：在「触发条件」中选择之前创建的「车型列表按钮点击触发」
• 命名标签为「GA4 - 车型列表点击追踪」，保存

4. 测试与发布 #

• 点击GTM顶部的「预览」按钮，进入调试模式
• 在你的网站上点击任意车型按钮，查看GTM调试面板：确认触发器触发、「车型名称」变量正确取值、GA4标签成功发送
• 测试无误后，点击「提交」发布GTM版本，完成配置

内容的提问来源于stack exchange，提问作者Codefanatic