如何用Google Analytics 4追踪表单提交并统计转化数据

1. 提取URL中的UTM与Topic参数 #

编写工具函数，从当前页面URL中提取所需查询参数，兼容带参数和不带参数的/contact页面：

function getTrackingParams() {
  const params = new URLSearchParams(window.location.search);
  return {
    topic: params.get('topic'),
    utm_source: params.get('utm_source'),
    utm_campaign: params.get('utm_campaign'),
    utm_id: params.get('utm_id')
  };
}

2. 在表单提交成功时发送GA4事件 #

修改你的send_message Alpine.js组件，在表单提交成功后调用GA4的gtag接口发送转化事件，同时携带提取到的追踪参数。使用GA4推荐的form_submit事件名，便于平台自动分析：

export default function send_message() {
  const trackingParams = getTrackingParams();

  return {
    submit() {
      fetch("/messages", {
        method: "POST",
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(body)
      })
      .then((response) => {
        if (response.ok) {
          // 发送成功提交事件
          gtag('event', 'form_submit', {
            form_name: 'contact_form',
            form_page: '/contact',
            ...trackingParams
          });
          // 显示成功消息
        } else {
          // 可选：追踪提交失败事件
          gtag('event', 'form_submit_failed', {
            form_name: 'contact_form',
            ...trackingParams,
            error_status: response.status
          });
          // 显示错误消息
        }
      })
      .catch((error) => {
        // 可选：捕获网络错误并追踪
        gtag('event', 'form_submit_failed', {
          form_name: 'contact_form',
          ...trackingParams,
          error_message: error.message
        });
      });
    }
  };
}

3. 验证追踪有效性 #

• 打开浏览器开发者工具（F12），在Console标签查看dataLayer是否新增form_submit事件条目；
• 登录GA4后台，进入实时报告，确认form_submit事件及参数是否被正确记录；
• 后续可在GA4事件报告中，通过topic、utm_source等维度筛选，分析不同来源的转化效果。

注意事项 #

• 若页面为SPA（单页应用），需确保getTrackingParams在表单页面切换时重新执行，获取当前URL最新参数；
• 若URL中无某UTM/Topic参数，对应参数值为null，GA4会自动忽略该参数，不影响事件上报；
• 确保全局可访问gtag函数（你的现有GA4部署代码已满足此条件）。

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