在WordPress中跟踪HubSpot表单提交次数的实现方案

我在WordPress中通过HubSpot提供的JavaScript代码嵌入表单，希望统计该表单的提交次数。通过Chrome开发者工具观察到，表单提交时会发送如下数据：

email: example@example.com
phone: 1234567890
firstname: example
lastname: exmaple
company: 
address:

请求响应状态码为200，示例请求URL为：

https://forms.hsforms.com/submissions/v3/public/submit/formsnext/multipart/9726307/91a9604-1cd5-46aa-a3e1-3399f55d8c43

看起来这并非Ajax调用，请问该如何跟踪表单提交次数？

可行的跟踪方法 #

1. 利用HubSpot官方表单提交回调（最推荐） #

HubSpot的表单嵌入JS提供了onFormSubmit回调函数，直接在嵌入代码中添加这个回调就能触发统计逻辑，这是最可靠的方式，不会受DOM结构变化影响。

修改你的HubSpot表单嵌入代码，加入回调：

hbspt.forms.create({
  portalId: '9726307',
  formId: '91a9604-1cd5-46aa-a3e1-3399f55d8c43',
  onFormSubmit: function() {
    // 这里执行你的统计逻辑
    // 示例1：调用自定义接口记录提交次数（需自己实现后端接口）
    // fetch('/wp-json/your-custom-api/v1/track-submit', { method: 'POST' });
    // 示例2：输出日志用于测试
    console.log('HubSpot表单已成功提交');
  }
});

2. 用MutationObserver监听提交成功的DOM变化 #

如果无法修改原有的HubSpot嵌入代码，可以通过监听DOM变化来捕获表单提交成功的状态。HubSpot表单提交后通常会显示成功提示元素，我们可以监听这个元素的出现：

// 监听表单容器的DOM变化，替换成你的表单容器选择器
const formContainer = document.querySelector('.hs-form');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    // 检查是否出现成功提示（HubSpot默认类为.hs-success-message）
    const successEl = document.querySelector('.hs-success-message');
    if (successEl && successEl.offsetParent !== null) {
      // 执行统计逻辑
      console.log('表单提交成功');
      observer.disconnect(); // 避免重复触发，按需调整
    }
  });
});

// 开始监听
observer.observe(formContainer, { childList: true, subtree: true });

注意：这种方法依赖HubSpot的DOM结构，如果官方更新样式类可能会失效，需要定期验证。

3. 拦截Network提交请求 #

你观察到的请求其实是通过fetch或XMLHttpRequest发送的，并非传统页面跳转。可以通过拦截全局请求来捕获提交成功事件：

// 拦截fetch请求
const originalFetch = window.fetch;
window.fetch = function(resource, options) {
  // 匹配HubSpot的提交URL特征
  if (typeof resource === 'string' && resource.includes('forms.hsforms.com/submissions/v3/public/submit')) {
    return originalFetch(resource, options).then(response => {
      // 检查请求是否成功（状态码200-299）
      if (response.ok) {
        console.log('表单提交请求成功');
        // 执行统计逻辑
      }
      return response;
    });
  }
  return originalFetch(resource, options);
};

这种方法不依赖DOM结构，能准确捕获提交请求的成功状态，适合无法修改嵌入代码的场景。

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