使用 Google Analytics 4 跟踪表单提交以记录转化答案

【问题标题】：Track Form Submissions with Google Analytics 4 to register conversions使用 Google Analytics 4 跟踪表单提交以记录转化
【发布时间】：2023-01-22 09:57:13
【问题描述】：

我需要使用 Google Analytics 跟踪表单的提交。

在我的网站上，我已经有了 Google Analytics (GA4) o 跟踪页面浏览量：

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXX');
</script>

包含表单的页面的 url 是 /contact 但可能是：

/contact?topic=inquiry&utm_source=google&utm_campaign=xyzzy&utm_id=12

表格的简化版本是：

<form x-data="send_message()" method="post">                
  <label>Email</label>
  <input type="text" name="email">
  <button class="action" type="submit">Send</button>
</form>

提交表单后，submit 方法运行：

export default function send_message() {

  submit() {

    fetch("/messages", {
      method: "POST",
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(body)
    })
    .then((response) => {
      if (response.ok) {
        // Show success message
      } else {
        // Show error message
      }
    })
  }
};

如何跟踪表单提交并使用UTM 或Topic 参数以便衡量转化？

【问题讨论】：

标签： javascript google-analytics google-analytics-4

【解决方案1】：

为了跟踪表单提交，因为需要进行转换：

创建自定义事件：在您的 GA4 媒体资源的管理面板中，转到“事件”>“创建事件”并创建一个如下所示的事件：
将您的自定义事件标记为转化：在您的 GA4 媒体资源的管理面板中，转到“转化”>“新转化事件”并粘贴您在第 1 项中创建的自定义事件的名称（必须匹配）
这仅在您打开“表单交互”和“增强测量”时才有效。要检查这一点，请在您的 GA4 属性的管理面板中转到“数据流”> 点击您的数据流 > 点击“增强测量”选项下的齿轮并检查“表单交互”是否打开。

【讨论】：