如何使用新版Google Analytics 4（gtag.js）追踪和发送自定义事件？

Question

我有一个使用上个世纪的旧版 Google Analytics 代码的旧网站，现在需要帮助使用新的 GA4。

旧代码 (2016)

要发送自定义事件和页面浏览数据到 Google，我需要通过他们的 <script> 代码片段中的全局 ga() 函数来实现：

// Event
ga('send', 'event', {
    eventAction: 'click',
    eventCategory: 'social',
    eventLabel: 'twitter'
});

// Pageview
ga('send', {
    hitType: 'pageview',
    page: 'Video page',
    title: 'Intro video'
});

新代码 (2022)

根据Google Analytics的通知，所有旧版属性将于2023年7月1日停止工作，因此我们需要切换到新的Google Analytics 4属性，头部中的<script>代码片段已经发生了一些变化，现在它创建了gtag()：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=X-XXX123456"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'X-XXX123456');
</script>

但是当我尝试像以前一样使用gtag("send")时，貌似没有任何内容被传输到Google。我已经尝试查找相关信息，但是所有的教程/文章仍然演示了旧的方法。我该如何使用新的GA4发送自定义事件？

- Marquizzo

Answer 1

建议使用"event"而不是"send"，官方文档在此。此外，建议的参数应该使用下划线，例如event_category（尽管您可以使用自定义参数）：

// Send event
gtag("event", "click", {
    "event_category": "social",
    "event_label": "twitter"
});

// Pageview
gtag('event', 'page_view', {
    "page_title": "landing-page",
});

如果您正在手动发送自定义页面视图，请确保在着陆时禁用初始页面视图，以避免重复计数。 这在“手动页面视图”部分中有解释。您可以通过在头部<script>中的初始配置调用中添加send_page_view: false来实现此目的。

gtag('config', 'X-XXX123456', {send_page_view: false});

您可以通过打开网络选项卡并查看每个收集（collect）网络请求的有效载荷来检查是否正在本地发送某些内容：

来源:

• 事件文档
• 页面浏览文档

- Marquizzo

---

这似乎运行良好，但是在GA4中如何查看event_category和event_label呢？似乎只有动作名称在各处可见。 - ZTefter

Answer 2

以下是使用GA4发送事件的语法：

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

这里 是事件文档。

或者，如果您想测试点击量，以及事件是否随数据一起发送，您可以使用Google标签助手进行审核。

- Rod

---

这应该可以工作，因为GA中的event_label，即编码的URL是（未设置）。我想在此报告中看到URL： gtag('config', 'UA-123456789-1'); gtag('event', 'Page Load', { 'event_category': 'JavaScript Widgets', 'event_label': 'https://www.testdomain.com/test-iframe', 'value': 1 }); - James Wilson

我的gtag.js被加载在iframe中，但是没有调用https://www.google-analytics.com/g/collect，而在常规网页中它通常会调用该收集点。 - Dee

这似乎运行良好，但是在GA4中如何查看event_category和event_label呢？似乎只有动作名称在各处可见。 - ZTefter