Google Analytic GA4没有在React应用程序中禁用默认的page_view事件

Question

我正在尝试将Google Analytics GA4添加到React应用程序中，

index.html

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

但这并没有禁用默认的 page_view 事件。

我想要禁用默认请求，以便我手动发送 page_view 事件。有些页面的标题不像 saga 返回的那样设置，例如项目：。默认事件将其设置为 undefined，这是有道理的，因为数据尚未加载。

那么我该如何实现这个功能呢？

- usertest

Answer 1

尝试从GA4管理中的增强测量设置（Web流设置）中关闭自动跟踪历史事件作为页面浏览的选项。

许多SPA网站在状态管理目的（或其他原因）上已经有了初始的pushState/replaceState，如果启用了增强测量选项，将会跟踪到一个页面浏览。

- Simo Ahava

---

这就是了 :) 我刚刚花了2个小时搜索为什么 { send_page_views: false } 没有起作用。 - Ziad

谢谢！非常烦人的是，启用增强测量设置会覆盖 gtag('config', { send_page_view: false })。我花了几个小时试图弄清楚为什么在切换到GA4后，使用gatsby-plugin-google-gtag的Gatsby会发送双重page_view事件。 - Juliusz Gonera

如果您想保留大部分增强型测量功能，似乎您也可以在增强型测量设置的页面浏览高级设置中仅禁用“基于浏览器历史记录事件的页面更改”（单击右下角的齿轮图标）。 - Juliusz Gonera

正如Juliusz Gonera所说，关闭“基于浏览器历史记录事件的页面更改”就足够了。 - Mikael Lirbank

哇！那真是一个极其混乱的噩梦！有人知道为什么“基于浏览器历史事件的页面更改”足以去除重复项吗？我知道重复项是由于我有一个自定义的“路由更改”事件处理程序引起的，但我不明白为什么我的Angular应用程序似乎没有任何初始页面加载事件。 - Simon_Weaver

Answer 2

这是一个非常复杂的问题 - 我相信如果你在这里，你一定很沮丧。

除了确保在增强测量事件下禁用了“浏览器历史记录事件”之外，我还发现了以下内容：

• 预览功能与实际部署版本的工作方式不同。我将我的网站分别在GTM“预览”功能和另一个正常实例下打开。尽管部署了完全相同的版本，在预览下只有一个page_view事件，在正常打开网站时则有两个。

• 我似乎无法弄清楚为什么会出现这种情况，但为了调试事件来自哪里，我发现以下设置很有用：

这两个黄色字段被发送为事件参数，这意味着当我查看Chrome控制台中的调试信息时，我可以精确地看到它们来自哪里：

在这种情况下，你可以看到它们在“路由更改”和“DOM加载”时触发 - 这正是我配置它们的方式：

当我在预览模式下加载时，它只会得到gtm.dom事件而没有Route change。我无法弄清楚原因。就像“GTM预览”功能吞噬了我的历史更改事件一样。

• 另一个最后的提示：

添加以下代码的自定义HTML标签，并在Route Change发生时触发它。这样你就可以在控制台中精确地看到它何时发生（或不发生）。

<script>
  console.log('Route Change - GTM Debug - {{Page Hostname}} {{Page URL}}'); 
</script>

- Simon_Weaver

Answer 3

您是否在每个网页上都禁用gtag？

正如文档所述：

send_page_view设置不会跨页面保留。您必须在您希望禁用自动页面浏览的网站的每个页面上重复此设置。

我遇到了同样的问题，我的最初想法是，由于默认的index.html作为React应用的框架加载，我可以通过在此处添加片段来禁用所有页面的page_view事件。但对我来说并非如此。

最终，我使用App.tsx的componentDidMount以及类似于下面伪代码的ts等效代码来编程式地从dataLayer中删除gtag事件（我现在手头没有确切的代码）：

window.dataLayer = window.dataLayer.filter(element => element['event'] && !(element['event'] === 'gtm.load' || element['event'] === 'gtm.dom'));

这看起来很疯狂：我们直接从数据缓冲区中删除负责页面点击的标签。虽然这似乎有效，但它不仅是一个主要的黑客方式，而且在我看来很丑陋，因此，任何更好的非lib方法都会受到我的欢迎！

- oneManArmin