將 Google Analytics 添加到 React

Question

我正在嘗試將 Google Analytics 添加到 React Web 應用程序中。

我知道如何在 HTML/CSS/JS 站點中執行此操作，並且我也已將其集成到 AngularJS 應用程序中。 但是，我不太確定如何對它做出反應。

使用 HTML/CSS/JS，我剛剛將它添加到每個頁面。

我對 AngularJS 所做的是將 GTM 和 GA 腳本添加到 index.html 並將 UA 標簽添加到 HTML div（和按鈕）以獲取點擊

我怎樣才能用 React 做到這一點？

請幫忙！

Answer 1

我正在嘗試將 Google Analytics 添加到 React Web 應用程序。

我知道如何在 HTML/CSS/JS 站點中執行此操作，並且我也將它集成到了 AngularJS 應用程序中。 但是，當涉及到反應時，我不太確定如何去做。

使用 HTML/CSS/JS，我剛剛將它添加到每個頁面。

我對 AngularJS 所做的是將 GTM 和 GA 腳本添加到 index.html 並將 UA 標簽添加到 HTML div（和按鈕）以獲得點擊。

我怎么能用 React 做到這一點？

請幫忙！

Answer 2

我正在嘗試將 Google Analytics 添加到 React Web 應用程序。

我知道如何在 HTML/CSS/JS 站點中執行此操作，並且我也將它集成到了 AngularJS 應用程序中。 但是，當涉及到反應時，我不太確定如何去做。

使用 HTML/CSS/JS，我剛剛將它添加到每個頁面。

我對 AngularJS 所做的是將 GTM 和 GA 腳本添加到 index.html 並將 UA 標簽添加到 HTML div（和按鈕）以獲得點擊。

我怎么能用 React 做到這一點？

請幫忙！

Answer 3

我正在嘗試將 Google Analytics 添加到 React Web 應用程序。

我知道如何在 HTML/CSS/JS 站點中執行此操作，並且我也將它集成到了 AngularJS 應用程序中。 但是，當涉及到反應時，我不太確定如何去做。

使用 HTML/CSS/JS，我剛剛將它添加到每個頁面。

我對 AngularJS 所做的是將 GTM 和 GA 腳本添加到 index.html 並將 UA 標簽添加到 HTML div（和按鈕）以獲得點擊。

我怎么能用 React 做到這一點？

請幫忙！

Answer 4

我正在嘗試將 Google Analytics 添加到 React Web 應用程序。

我知道如何在 HTML/CSS/JS 站點中執行此操作，並且我也將它集成到了 AngularJS 應用程序中。 但是，當涉及到反應時，我不太確定如何去做。

使用 HTML/CSS/JS，我剛剛將它添加到每個頁面。

我對 AngularJS 所做的是將 GTM 和 GA 腳本添加到 index.html 並將 UA 標簽添加到 HTML div（和按鈕）以獲得點擊。

我怎么能用 React 做到這一點？

請幫忙！

Answer 5

使用dangerouslySetInnerHTML的SetInnerHTML 轉義分析代碼

首先，您當然必須將 header 代碼分享到所有頁面，例如： React js do common header

然后，這個 Next.js 答案https://stackoverflow.com/a/24588369/895245給出了一個很好的工作代碼，它也應該在 ZD2FCB45C52AC7E79CF6C091DB2A8 之外工作。 它使用dangerouslySetInnerHTML轉義分析代碼：

  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-47867706-3"></script>
  <script
    dangerouslySetInnerHTML={{
      __html: `window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47867706-3', { page_path: window.location.pathname });
`,
    }}
  />

你應該用你自己的代碼替換UA-47867706-3 。

此代碼正是 Google 提供的代碼，但進行了以下修改：我們添加了：

{ page_path: window.location.pathname }

到gtag('config'以便它能夠獲取訪問的路徑，因為這是一個 JavaScript SPA。

這會在瀏覽器上生成所需的 output：

<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-47867706-3"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47867706-3', { page_path: window.location.pathname });
</script>

與 Google 給出的確切代碼的唯一其他差異是async=""與async ，但這兩者在 HTML 中是等效的，因為它是一個 boolean 屬性，另請參閱： What's the proper value for a checked attribute of an Z4C4AD5FCA2E7A3AF74DBBB ?

Escaping 和dangerouslySetInnerHTML是必要的，因為否則 React 會將script中的代碼解釋為 JSX 並且失敗並顯示：

Syntax error: Unexpected token, expected "}"

  21 |           <script>
  22 |             window.dataLayer = window.dataLayer || [];
> 23 |             function gtag(){dataLayer.push(arguments);}
     |                                                      ^
  24 |             gtag('js', new Date());
  25 |
  26 |             gtag('config', 'UA-47867706-3');

我希望他們會自動為我們轉義script中的內容。

最后要獲得頁面切換，您還必須使用更多代碼來跟蹤它，請參閱上面提到的 Next.js 答案作為示例。

相關： 將腳本標簽添加到 React/JSX

在反應 17.0.2、next.js 10.2.2 上測試。

Answer 6

我正在嘗試將 Google Analytics 添加到 React Web 應用程序。

我知道如何在 HTML/CSS/JS 站點中執行此操作，並且我也將它集成到了 AngularJS 應用程序中。 但是，當涉及到反應時，我不太確定如何去做。

使用 HTML/CSS/JS，我剛剛將它添加到每個頁面。

我對 AngularJS 所做的是將 GTM 和 GA 腳本添加到 index.html 並將 UA 標簽添加到 HTML div（和按鈕）以獲得點擊。

我怎么能用 React 做到這一點？

請幫忙！

Answer 7

我正在嘗試將 Google Analytics 添加到 React Web 應用程序。

我知道如何在 HTML/CSS/JS 站點中執行此操作，並且我也將它集成到了 AngularJS 應用程序中。 但是，當涉及到反應時，我不太確定如何去做。

使用 HTML/CSS/JS，我剛剛將它添加到每個頁面。

我對 AngularJS 所做的是將 GTM 和 GA 腳本添加到 index.html 並將 UA 標簽添加到 HTML div（和按鈕）以獲得點擊。

我怎么能用 React 做到這一點？

請幫忙！

Answer 8

有 2 種類型的 Google Analytics（分析）資源：Universal Analytics ( UA-xxxxxxxxx-x )，在 2023.07.01 生命周期結束時棄用，Google Analytics 4 資源 ( G-xxxxxxxxxx ) 是替代品。

react-ga在 Universal Analytics 中很受歡迎，但維護者不打算更新它（相關問題： 1 、 2 、 3 ）並且它存在維護問題（ 1 ）。

react-ga4和ga-4-react作為替代品彈出，但由於它們是類似的包裝器，因此您可以由維護者擺布來實現和支持所有功能。 相反， gtag可以簡單地包含在頁面上 ( 1 ) 並用作window.gtag 。 此方法適用於舊標簽和新標簽，甚至通過@types/gtag.js 。

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>

您甚至可以將標簽存儲在 env var中。

這將自動記錄訪問者並授予對window.gtag的訪問權限以發送自定義事件。 必須明確記錄 SPA 上的導航（例如使用 React Router）： https://stackoverflow.com/a/63249329/2771889