如何为React-路由器设置Google Analytics 4？

Question

我正试图在我的react网站上设置谷歌分析4。之前我用的是react-ga，但是这个库还不支持Google Analytics 4。我将GA4标签直接粘贴到index.html文件中，没有外部库。要让GA4与react路由器一起工作，我还需要添加什么代码？< br >预先感谢！

Answer 1

您应该能够停止使用react-ga，只需在index.html中插入全局脚本标记，正如Cameron提到的那样。请记住，您可能需要确保您的应用程序按照需要更新GA4工作的window.location和document.title。

谷歌的文档提到：

“当页面浏览被发送到Analytics时，将使用默认页面参数值，除非进行了修改。这意味着如果在发送事件之前对window.location（例如通过历史API）和document.title进行了更新，则无需修改page_title或page_location参数。”。

我有一个简单的单页应用程序，直到我在每次渲染时更新标题和位置之前，我没有收到详细的页面视图数据。

Answer 2

您也可以签出npm软件包ga-4-react:

https://www.npmjs.com/package/ga-4-react

Answer 3

可以直接调用< code>gtag。只需将全球网站标签代码放入您的index.html <代码>

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

  gtag('config', 'G-XXXXXXXXXX');
</script>

我今天面临着同样的问题，最终拿出react-ga包并走这条路。我从react-ga演示代码中保存了withTracker.js部分并如下所示对其进行了修改。

export default function withTracker(WrappedComponent, options = {}) {
    const trackPage = (page) => {
        window.gtag('send', 'page_view', {
            page_location: window.location.href,
            page_path: window.location.pathname            
        });
    };
...