如何在Google Tag Manager中为表单内的按钮创建触发器

1. 适用的触发器类型 #

你代码中的form元素绑定了onclick事件且执行return false，直接拦截了表单默认提交行为，GTM内置的表单提交触发器无法监听到该事件，所以应该选择点击 - 所有元素类型的触发器即可，不需要使用表单提交类触发器。

2. 触发器配置步骤 #

首先进入GTM后台的「变量」-「内置变量」配置页，勾选所有点击类相关内置变量（点击元素、点击类、点击文本、点击父元素等），再按以下规则配置触发器：

• 触发器类型选择「点击 - 所有元素」
• 触发范围选择「部分点击」
• 触发规则设置为以下任意一种即可，也可组合使用提高匹配精度：
  • 点击文本 >> 等于 >> Open now
  • 点击元素 >> 匹配CSS选择器 >> form.class-c, form.class-c button
  • 点击类 >> 包含 >> class-c
• 不需要勾选「等待标签加载完成」「检查有效性」选项，保存触发器即可生效。

3. action属性捕获方案 #

不需要额外绑定表单提交事件，因为当前逻辑下表单没有真正执行提交操作，你可以直接在GTM中创建一个自定义JavaScript变量获取action值，变量代码如下：

function() {
  // 从当前点击元素向上查找对应的form节点
  var targetForm = {{Click Element}}.closest('form.class-c');
  return targetForm ? targetForm.getAttribute('action') : '';
}

配置完成后，在对应触发的标签中直接引用该自定义变量，就能拿到你需要的action URL值。

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