Google Analytics 4 和 React Router == 页面标题滞后

Question

一些背景...

我们正在使用 React 构建的 SPA 站点。我们目前正在集成 Google Analytics 4。我们为 GA4 启用了增强测量，它会自动收集大量数据，包括浏览量。由于 React 路由器使用 Web History API 来更改页面，因此自动 GA4 页面浏览几乎开箱即用。但是，我们注意到在某些数据集上，有时页面标题会滞后并使用上一页的标题。

假设这是由于以下原因而发生的...... 1）当我们开始导航时，React 立即更改 URL，而不知道有关页面的任何其他元数据（包括页面标题），以及 2）一旦我们获取关于页面的元数据，然后我们用该数据更新 DOM；但是... 3) GA4 会在 URL/历史更改时立即触发，这是在我们添加正确标题之前。

知道了这一点，我们明白我们可以通过延迟 URL 更改来解决这个问题，直到我们拥有正确的元数据。但是，由于我们正在使用 React Router，因此似乎没有内置的方法可以做到这一点。似乎我们必须编写自己的路由器，这超出了本项目的范围。有没有人知道有什么方法可以不用大手术来做到这一点？

我们也知道我们可以通过禁用自动网页浏览并简单地实现自定义网页浏览事件来解决这个问题。然而，我们的分析经理对此表示担忧，因为 1) 为了做到这一点，我们必须完全关闭增强测量；没有办法保持启用增强测量并仅禁用自动网页浏览事件，并且 2) 我们将转向非标准实施，这在过去让我们很头疼。

有没有人遇到过这些问题，如果有的话，人们想出了什么样的解决方案来解决这个问题？

Answer 1

1. 为此，我们必须完全关闭增强测量；无法保持增强测量启用状态并仅禁用自动页面浏览事件

您可以保持增强测量启用状态并根据浏览器历史记录事件禁用页面更改。查看增强测量的设置屏幕，然后单击“显示高级设置”。

但是，正如您所指出的，如果您通过历史记录更改关闭自动跟踪，则由您来触发页面视图。如果你已经在使用 React Router，这确实不错。您可以延迟将其放入，以使组件有机会更新页面标题，或者您可以将标题存储在状态中并从中读取。

const history = useHistory();
useEffect(() => {
 history.listen(action => {
   // track page
 });
}, []);

另一种想法是在文档标题更改时触发页面视图，而不是在历史对象更改时触发页面视图。（请参阅如何监听标题元素的更改？）