如何在Tag Manager中跟踪与错误消息同div class的表单提交成功事件

核心原因是你使用的Contact Form 7插件默认的错误、成功反馈元素共用wpcf7-response-output类名，仅内部文本、触发的自定义事件有区别，可根据你的操作权限选以下任意一种方案实现：

方案1：基于文本匹配的可见性触发器（无需修改站点代码，操作门槛最低） #

• 第一步：在GTM中新建「自定义JavaScript」变量，命名为CF7 - 反馈文本内容，代码如下：

function() {
  var responseEle = document.querySelector('.wpcf7-response-output');
  return responseEle ? responseEle.textContent.trim() : '';
}

• 第二步：新建元素可见性触发器，CSS选择器填写.wpcf7-response-output，添加触发条件：CF7 - 反馈文本内容 包含 你站点的成功提示文本（示例场景填写Thank you for your message. It has been sent.即可）
• 第三步：将该触发器绑定到你需要触发的表单转化标签上即可，错误提示因文本不匹配不会触发。

方案2：监听CF7原生自定义事件（准确率最高，不受提示文本修改影响） #

CF7提交成功后会主动触发专属的wpcf7mailsent自定义事件，不需要依赖元素可见性判断：

• 第一步：在GTM中新建「自定义事件」触发器，事件名称填写wpcf7mailsent，触发范围选择「所有自定义事件」
• 第二步：如果需要额外采集表单ID、提交数据等参数，可新建对应数据层变量，读取event.detail下的对应字段即可
• 第三步：绑定该触发器到转化标签即可，该事件仅在表单提交成功时触发，完全不会和错误提交、校验失败场景冲突。

方案3：新增成功状态专属类名（适合有站点代码修改权限的场景） #

如果可以修改站点代码，可直接给成功反馈元素添加专属类名，后续可以直接用CSS选择器匹配：

• 在站点主题的functions.php文件中添加如下过滤代码：

add_filter( 'wpcf7_form_response_output', function( $output, $class, $content, $form, $status ) {
    // 提交成功状态下给反馈元素加专属类
    if ( $status === 'mail_sent' ) {
        $output = str_replace( 'class="wpcf7-response-output', 'class="wpcf7-response-output wpcf7-submit-success', $output );
    }
    return $output;
}, 10, 5 );

• 代码生效后，直接用CSS选择器.wpcf7-response-output.wpcf7-submit-success配置元素可见性触发器即可。

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