谷歌分析4和React路由器==页面标题滞后

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）我们将转向非标准实现，过去这给我们带来了许多麻烦。

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

- Jake

Answer 1

为了做到这一点，我们必须完全关闭增强型测量；没有办法保持增强型测量启用并仅禁用自动页面查看事件。

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

然而，正如你所指出的那样，如果你关闭了通过历史更改自动跟踪功能，那么触发页面视图就取决于你。但是，如果你已经在使用React Router，这并不是什么坏事。你可以设置延迟来给你的组件更新页面标题的机会，或者你可以将标题存储在状态中并从中读取。

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

另一个想法是在文档标题更改时触发页面视图，而不是在历史对象更改时触发。(请参见如何监听标题元素的更改?)

- stereoscott