GTM自定义HTML标签表单提交时触发两次的问题排查

刚碰到过类似的问题，来给你拆解下这个表单提交事件触发两次的常见原因和对应的解决办法：

可能的触发重复的原因 #

• 事件被重复绑定
  你的标签设置在「DOM就绪」时运行，如果这个标签被意外部署了多次，或者页面上存在多个DOM就绪的触发条件，就会导致.form_check的submit事件被绑定两次——每次绑定都会在表单提交时执行一次gtag发送。
• 表单默认行为与事件冒泡冲突
  有些表单本身自带提交逻辑（比如原生表单提交、其他JS库绑定的提交事件），加上你用jQuery绑定的事件，可能会因为事件冒泡或者默认行为没被正确处理，导致事件被触发多次。
• 页面JS环境的冲突
  如果页面里的jQuery版本和你的代码不兼容，或者有其他第三方脚本也在监听这个表单的submit事件，也可能出现重复触发的情况。

对应的解决办法 #

1. 确保事件只绑定一次 #

可以用jQuery的one()方法代替submit()，强制事件只绑定并执行一次：

$('.form_check').one('submit', function(){
  gtag('event', 'send', {'event_category': 'form', 'eventAction': 'send'});
});

或者在绑定前先解绑已有事件，避免重复绑定：

$('.form_check').off('submit').on('submit', function(){
  gtag('event', 'send', {'event_category': 'form', 'eventAction': 'send'});
});

2. 处理事件冒泡与默认行为 #

如果是事件冒泡或默认行为导致的重复触发，可以在事件处理函数里添加对应的阻止逻辑（注意不要盲目阻止，避免影响表单正常提交）：

$('.form_check').submit(function(e){
  // 阻止事件冒泡
  e.stopPropagation();
  // 如果你不需要表单原生提交行为，可以阻止默认行为；如果需要，去掉这行，或者在gtag发送后手动提交
  // e.preventDefault();
  gtag('event', 'send', {'event_category': 'form', 'eventAction': 'send'});
});

3. 检查GTM的标签与触发配置 #

登录GTM后台，确认这个自定义HTML标签没有被重复创建，同时检查触发条件是否设置了重复的规则（比如同时勾选了「DOM就绪」和「页面加载完成」，或者触发条件里有重叠的规则），确保标签只会被触发一次。

4. 改用GTM内置的表单提交触发器 #

其实GTM本身就提供了内置的表单提交触发器，完全可以不用自己写jQuery代码来绑定事件：

• 创建一个「表单提交」触发器，设置好目标表单的匹配规则（比如通过CSS选择器.form_check）
• 创建一个GA事件标签，关联这个触发器，设置好对应的事件分类、动作参数即可
  这种方式能避免自定义代码带来的各种兼容性和重复绑定问题，更稳定可靠。

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