logo标签列表

如何为React-Router设置Google Analytics 4？

reactjsgoogle-analyticsreact-router
10

我正在尝试在我的React网站上设置Google Analytics 4。之前我使用了react-ga，但这个库还不支持Google Analytics 4。因此我将GA4标签直接粘贴到index.html文件中，没有使用外部库。我需要添加哪些额外的代码才能使GA4与React路由器配合使用呢？
提前感谢！

5个回答
12
您可以直接调用gtag。只需在您的index.html <head>中放置全局站点标记代码即可。
<!-- 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            
        });
    };
...
1
0

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

Google文档提到：

“当向分析发送页面视图时，默认使用页面参数值，除非进行修改。这意味着如果在事件被发送之前更新了window.location（例如通过History API）和document.title，则不需要修改page_title或page_location参数。”。

我有一个简单的单页应用程序，在每次渲染时更新标题和位置后才收到详细的页面查看数据。

你需要做什么来更新标题和位置？ - thisismydesign
0

背景：Google Analytics的属性有两种类型：通用分析（UA-xxxxxxxxx-x），该属性将在2023.07.01结束生命周期，已被弃用，以及Google Analytics 4属性（G-xxxxxxxxxx），该属性是其替代品。

最简单的入门方法是遵循Google的指南：在页面上包含gtag并将其用作window.gtag。此方法适用于新旧标签，并且甚至还通过@types/gtag.js支持TypeScript。建议异步加载脚本。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->

    <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>

    <!-- ... -->
  </head>

  <body>
    <!-- ... -->
  </body>
</html>

请注意，Google Analytics会自动跟踪页面，但这并不适用于每种情况。例如，更改哈希和搜索参数是不被跟踪的。这可能会导致很多混淆。例如，在使用HashRouter或锚链接时，导航将无法被跟踪。要完全控制页面视图跟踪，您可以禁用自动跟踪。详细解释请参见：React（或其他任何内容）上Google Analytics（UA＆GA4）的终极指南 手动页面跟踪：https://dev59.com/E1sW5IYBdhLWcg3wi36j#63249329

您可以在 cra-typescript-starter 中看到此功能的运作，我还从环境变量中设置了标签。

-1

不需要额外的代码，只需将该标签粘贴到index.html中，Google Analytics就会跟踪所有您的URL。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接