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

Question

我需要使用 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参数以便衡量转化？

Answer 1

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

1. 创建自定义事件：在您的 GA4 媒体资源 go 的管理面板中选择“事件”>“创建事件”并创建一个如下所示的事件：

2. 将您的自定义事件标记为转化：在您的 GA4 媒体资源 go 的管理面板中转到“转化”>“新转化事件”，然后粘贴在第 1 项中创建的自定义事件的名称（必须匹配）

3. 这仅在您打开“表单交互”和“增强测量”时才有效。 要检查这一点，请在您的 GA4 属性 go 的管理面板中转到“数据流”> 点击您的数据 stream > 点击“增强测量”选项下的齿轮并检查“表单交互”是否打开。

Tenha um ótimo 直径。