如何在HubSpot表单加载完成时向GTM dataLayer推送事件？

问题说明 #

当前编写的onFormSubmitted事件监听可正常触发，但同逻辑实现的onFormReady监听始终无法生效，核心需求是准确捕获表单加载完成时机，后续执行隐藏字段赋值等自定义操作。
原有监听代码如下：

<script type="text/javascript">
window.addEventListener('message', function(event) {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       window.dataLayer.push({
        'event': 'hubspot-form-ready',
        'hs-form-guid': event.data.id
      });
    }
});
</script>

核心失效原因 #

• 监听器绑定时机过晚：onFormReady会在表单渲染到DOM的瞬间立刻派发，若监听脚本放在HubSpot表单嵌入代码之后、页面底部，或是等DOM加载完成后才绑定，会直接错过事件派发。而onFormSubmitted是用户提交表单时才触发，只要监听器在用户操作前绑定即可生效，这是两个事件表现不一致的核心原因。
• 事件解析缺少容错：直接读取event.data.type时，若收到结构不完整的跨域消息，会触发静默JS错误中断监听逻辑，导致后续合法事件也无法被处理。
• 兼容问题：部分旧版HubSpot表单嵌入逻辑不会通过postMessage派发onFormReady事件，仅支持全局回调方式注册监听。

可直接使用的稳定实现 #

采用三层监听逻辑做兼容，覆盖所有场景，不会漏过表单就绪事件：

// 提前初始化全局对象，避免脚本加载早于表单SDK时报错
window.hsFormOnReady = window.hsFormOnReady || [];
window.dataLayer = window.dataLayer || [];
// 缓存已触发就绪事件的表单ID，避免重复执行逻辑
const loadedFormSet = new Set();

/**
 * 表单就绪后的自定义处理逻辑
 * @param {string} formId HubSpot表单ID
 */
function onHubspotFormReady(formId) {
  if (loadedFormSet.has(formId)) return;
  loadedFormSet.add(formId);

  // 推送数据层事件
  dataLayer.push({
    event: 'hubspot-form-ready',
    'hs-form-guid': formId
  });

  // 在此处编写自定义逻辑，比如给隐藏字段赋值Cookie
  const targetForm = document.querySelector(`form[data-form-id="${formId}"]`);
  if (!targetForm) return;
  // 示例：给名为user_track_id的隐藏字段写入对应Cookie值
  const hiddenField = targetForm.querySelector('input[name="user_track_id"]');
  if (hiddenField) {
    const trackCookie = document.cookie.match(/(?:^|;\s*)track_id=([^;]*)/)?.[1] || '';
    hiddenField.value = trackCookie;
  }
}

// 第一层：postMessage事件监听，必须尽早绑定
window.addEventListener('message', (event) => {
  if (!event.data || typeof event.data !== 'object') return;
  const { type, eventName, id } = event.data;
  if (type === 'hsFormCallback' && eventName === 'onFormReady' && id) {
    onHubspotFormReady(id);
  }
}, false);

// 第二层：兼容全局SDK回调，覆盖不发postMessage的场景
window.hbspt = window.hbspt || {};
window.hbspt.forms = window.hbspt.forms || {};
const originalFormReady = window.hbspt.forms.onReady;
window.hbspt.forms.onReady = (formInstance) => {
  if (typeof originalFormReady === 'function') originalFormReady(formInstance);
  const formId = formInstance.getAttribute('data-form-id');
  if (formId) onHubspotFormReady(formId);
};

// 第三层：兜底检查，脚本加载过晚时扫描已渲染完成的表单
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('form[data-form-id]').forEach(formEl => {
    // 判定表单渲染完成：已生成提交按钮
    if (formEl.querySelector('input[type="submit"], button[type="submit"]')) {
      const formId = formEl.getAttribute('data-form-id');
      onHubspotFormReady(formId);
    }
  });
});

部署注意事项 #

• 上述脚本必须放在HubSpot表单嵌入代码之前加载，最佳位置是页面<head>标签内，不要添加async/defer属性，保证监听器在表单初始化前完成绑定。
• 如果通过Google Tag Manager部署，需要选择「页面浏览 - 尽早」的触发时机，禁止使用DOM Ready、Window Loaded这类晚时机的触发器。
• 自定义逻辑里不要添加同步阻塞的长任务，避免影响表单正常渲染。

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