如何在Google Tag Manager中追踪单选按钮点击（无需提交或跳转）

问题根源分析 #

你当前的配置存在两个核心问题：

1. 自定义变量返回的是单选按钮的ID字符串，而非布尔值，所以触发条件设为「等于True」永远无法匹配
2. 全点击触发会捕获页面所有点击行为，导致数据冗余

分步解决方案 #

1. 启用GTM内置变量

先在GTM的「变量」面板，启用Click Element内置变量（用于获取当前点击的DOM元素）。

2. 创建「是否点击目标单选按钮」变量

新建一个自定义JavaScript变量（命名为Is Radio Button Click），代码如下：

function() {
  var clickEl = {{Click Element}};
  // 兼容点击单选按钮本身或其关联<label>标签的情况
  return clickEl.matches('.radios__input') || (clickEl.closest && clickEl.closest('.radios__input'));
}

这个变量会在点击目标单选按钮（或其关联标签）时返回true，其他点击场景返回false。

3. 创建「选中单选按钮ID」变量

新建一个自定义JavaScript变量（命名为Selected Radio ID），优化原有代码并增加容错处理：

function() {
  var checkedRadio = document.querySelector('.radios__input:checked');
  // 避免页面无选中单选按钮时变量报错
  return checkedRadio ? checkedRadio.id : '';
}

4. 创建精准触发条件

新建一个点击 - 所有元素触发，设置触发规则为：

• Is Radio Button Click 等于 true

如果你的单选按钮是静态渲染的，也可以选择「点击 - 元素可见时」触发，规则保持一致。

5. 创建追踪标签

以Google Analytics 4事件标签为例，配置如下：

• 事件类别：Radio Button
• 事件动作：Clicked
• 事件标签：{{Selected Radio ID}}
• 触发条件选择刚才创建的单选按钮点击触发

测试验证 #

使用GTM的预览模式加载页面，点击单选按钮后，查看「标签」面板是否触发了目标标签，同时在「变量」面板检查Is Radio Button Click和Selected Radio ID的返回值是否符合预期。

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