在Tag Manager中跟踪Contact Form 7双表单提交事件失效问题咨询

Contact Form 7 原生的wpcf7mailsent事件仅在表单成功完成邮件发送逻辑后才会触发。你配置的WhatsApp唤起表单大概率是通过自定义代码/插件禁用了CF7默认的邮件发送流程，所以不会触发该事件。

有两种可行的处理方式，按需选择即可：

方式1：监听CF7通用提交成功事件wpcf7submit #

这个事件不管后续有没有发邮件，只要表单验证通过、提交成功就会触发，兼容性更强。替换你的原有监听代码即可：

<script>
document.addEventListener( 'wpcf7submit', function ( event ) {
  window.dataLayer.push({
     "event": "cf7submitted",
     "cf7FormId": event.detail.contactFormId,
     "cf7Fields": event.detail.inputs,
     // 可选：额外加标识区分两个表单
     "cf7FormType": event.detail.contactFormId == '你的WhatsApp表单ID' ? 'whatsapp' : 'mail'
  })
});
</script>

注意：替换代码中的你的WhatsApp表单ID为实际对应表单的ID值，可在CF7表单列表页查看

方式2：保留原事件，给WhatsApp表单手动触发wpcf7mailsent #

如果你不想改GTM里已经配置好的cf7mailsent事件规则，就在WhatsApp表单的唤起逻辑代码最后，手动加一行触发事件的代码即可：

// 放在你WhatsApp弹窗唤起逻辑的末尾
document.dispatchEvent(new CustomEvent('wpcf7mailsent', {
  detail: {
    contactFormId: 对应表单ID,
    inputs: 表单提交的字段值
  }
}));

配置完成后打开浏览器控制台，切换到网络/数据层面板，提交两个表单分别确认dataLayer里都有对应事件上报即可。

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