6

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

索引.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 返回，例如： Project: 。默认事件设置为未定义，这是有道理的，因为尚未加载数据。

那么我该如何实现呢？

4

3 回答 3

9

尝试从 GA4 管理中的增强测量设置（Web 流设置）切换选项以在页面关闭时自动跟踪历史事件。

许多 SPA 站点出于状态管理目的（或出于其他原因）设置了初始 pushState/replaceState，这将导致在启用增强测量选项时跟踪 page_view。

于 2021-02-22T15:11:53.167 回答
1

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

正如文档所说：

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

我遇到了同样的问题，我最初的想法是将默认index.html加载作为 react 应用程序的框架，我可以page_view通过在此处添加代码段来禁用所有页面上的事件。但对我来说不是这样。

我最终以编程方式从 App.tsxdataLayer上删除了 gtag 事件componentDidMount，ts 等效于这样的伪代码段（我现在没有确切的代码）：

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

这看起来很疯狂：我们直接从数据缓冲区中删除了负责页面点击的标签。这似乎有效，但它不仅是一个主要的黑客攻击，而且在我看来看起来很丑，所以任何更好的非 lib 方式都非常感谢我！

于 2021-04-01T19:26:18.227 回答
0

这是一个非常复杂的问题——我敢肯定，如果你在这里，你会感到沮丧。

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

  • 预览功能与实时部署的版本不同。我的网站在 GTM“预览”功能下打开了两次，通常是另一个实例。部署完全相同的版本后，我在预览下得到一个 page_view 事件，当我正常打开站点时得到两个。

  • 我似乎无法弄清楚为什么会发生这种情况的细微差别，但要调试事件的来源，我发现以下设置很有用：

在此处输入图像描述

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

在此处输入图像描述

在这种情况下，您可以看到它们在“Route change”和“DOM Loaded”上触发——这正是我配置它们的方式：

在此处输入图像描述

当我以预览模式加载时，它只获取gtm.dom事件而没有Route change. 我不知道为什么。这就像“GTM 预览”功能正在吞噬我的历史更改事件。

  • 最后的另一个提示：

Custom HTML为以下代码添加标签并在发生时触发它Route Change。这样您就可以在控制台中准确地看到它何时发生（或不发生）。

<script>
  console.log('Route Change - GTM Debug - {{Page Hostname}} {{Page URL}}'); 
</script>
于 2022-01-14T06:05:27.700 回答