如何从WordPress站点的Hubspot表单提取邮箱并推送至Google Analytics？

你的代码失效主要有几个核心原因：

• HubSpot表单是动态生成的，页面加载时直接用getElementById获取元素，此时表单还没被HubSpot脚本渲染出来，绑定的onsubmit事件根本不会触发。
• 原生JS获取输入框值应该用.value，而不是.value()（这是jQuery的写法）。
• 表单提交后会立即跳转，可能导致dataLayer.push还没完成就跳走，数据无法成功发送到GA。

正确的做法是利用HubSpot表单提供的官方回调函数处理提交事件，同时完成邮箱哈希和GA数据推送：

完整实现代码 #

替换你原来的两段脚本，用下面的代码嵌入到联系页面：

<script>
// 定义SHA-256哈希函数（符合GA增强转化的邮箱格式要求）
async function hashEmail(email) {
  const encoder = new TextEncoder();
  const data = encoder.encode(email.trim().toLowerCase());
  const hash = await crypto.subtle.digest('SHA-256', data);
  return Array.from(new Uint8Array(hash))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

// 初始化HubSpot表单并绑定提交回调
hbspt.forms.create({
  region: "na1",
  portalId: "20085053",
  formId: "412d2c51-95f1-4a6c-b3f3-f71c5852ac98",
  onFormSubmit: async function($form) {
    // 从表单提取邮箱值（字段name通常为'email'，可根据实际表单调整）
    const email = $form.find('input[name="email"]').val();
    
    if (email) {
      // 对邮箱进行哈希处理
      const hashedEmail = await hashEmail(email);
      
      // 推送到dataLayer供GA捕获
      dataLayer.push({
        'event': 'form_submit',
        'enhanced_conversion_data': {
          "email": hashedEmail
        }
      });
      
      // 延迟100毫秒跳转，确保数据发送完成
      setTimeout(() => {
        window.location.href = "https://stagezero.ai/thank-you/";
      }, 100);
      // 阻止默认跳转，改用延迟跳转
      return false;
    }
  }
});
</script>

关键说明 #

1. HubSpot官方回调：onFormSubmit是HubSpot表单原生支持的提交后回调，能确保表单渲染完成后才绑定事件，不会出现元素找不到的问题。
2. 邮箱哈希处理：GA增强转化要求邮箱必须是SHA-256哈希后的小写字符串，hashEmail函数严格实现了这个格式要求。
3. 延迟跳转：100毫秒的延迟是为了保证dataLayer.push的事件能被GA成功捕获，避免表单提交后立即跳转导致数据丢失。
4. 字段匹配：如果你的表单邮箱字段的name不是email，需要替换成实际的字段名称（可通过浏览器开发者工具查看表单元素属性）。

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