使用Google Tag Manager追踪Div类下表单提交成功消息

针对你用Google Tag Manager（GTM）追踪Contact Form7表单提交后感谢消息的需求，给你两个可靠的实现方案，解决之前元素可见性和自定义事件未触发的问题：

方法一：利用Contact Form7原生事件（推荐） #

Contact Form7会在表单提交后触发wpcf7submit原生事件，通过监听这个事件并判断提交状态，能精准追踪成功提交：

1. 创建自定义HTML标签
   在GTM中新建自定义HTML标签，粘贴以下代码：

   document.addEventListener('wpcf7submit', function(event) {
     // 仅在表单提交成功（邮件发送完成）时触发
     if (event.detail.status === 'mail_sent') {
       window.dataLayer.push({
         'event': 'cf7_form_submit_success',
         'cf7_form_id': event.detail.contactFormId,
         'cf7_form_title': event.detail.contactFormTitle
       });
     }
   }, false);
   

   标签触发条件选择DOM Ready（确保CF7脚本加载完成后再监听事件），可限制在表单所在页面触发以优化性能。

2. 创建自定义事件触发器
   新建触发器，选择「自定义事件」类型，事件名称填写cf7_form_submit_success，保存后关联你需要触发的标签（比如GA4事件标签）。

方法二：修正元素可见性触发器设置 #

如果你偏好元素可见性方案，需要修正CSS选择器和触发条件：

1. 精准匹配成功提示元素
   Contact Form7的成功提示框会同时拥有wpcf7-response-output和wpcf7-mail-sent-ok两个类，所以正确的CSS选择器应为：

   .wpcf7-response-output.wpcf7-mail-sent-ok
   

   （避免只写.wpcf7-response-output，因为表单验证失败时这个元素也会显示，无法区分成功状态）

2. 调整触发器设置

   • 选择「元素可见性」触发器，设置为「当元素可见时」
   • 可见性条件选择「元素的一部分可见」（避免因提示框位置导致无法触发）
   • 勾选「一旦元素可见就触发」（防止重复触发）
   • 限制触发条件为表单所在页面，避免无关页面误触发

调试验证 #

使用GTM预览模式，提交表单后检查：

• 方法一：查看dataLayer是否有cf7_form_submit_success事件推送
• 方法二：查看元素可见性触发器是否被标记为「已触发」

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