將 Google 追蹤程式碼管理員 (GTM) 新增至 React 網站需要將 GTM 腳本插入您的應用程式中。具體方法如下：

1. 建立 Google 追蹤代碼管理器帳戶

如果您還沒有，您需要建立 Google 追蹤代碼管理器帳戶並為您的網站設定容器。 Google將為您提供兩段程式碼：

• HTML 的 中的
• 緊接在開始 標籤之後的可選

2. 在你的 React 應用程式中安裝 GTM

選項 1：手動新增 GTM 代碼

1. 在標籤中插入GTM腳本： 在 React 應用程式中，您將在 public/index.html 檔案中新增 GTM 腳本。

將 GTM-XXXXXX 替換為您的實際 GTM 容器 ID。

1. 在 標籤後插入 將

選項 2：使用 React GTM 函式庫

您也可以使用 React 函式庫來簡化整合。

1. 安裝GTM庫：

使用npm或yarn安裝react-gtm-module：

   npm install react-gtm-module

1. 在您的應用程式中初始化 GTM：

在你主要的 React 元件（例如 App.js）中，像這樣初始化 GTM：

   import React, { useEffect } from 'react';
   import TagManager from 'react-gtm-module';

   const App = () => {
       useEffect(() => {
           const tagManagerArgs = {
               gtmId: 'GTM-XXXXXX'
           };
           TagManager.initialize(tagManagerArgs);
       }, []);

       return (
           

               {/* Your app components */}
           
       );
   };

   export default App;

再次將 GTM-XXXXXX 替換為您的實際 GTM 容器 ID。

3. 驗證安裝

將 GTM 添加到您的 React 應用程式後，發布更改並透過使用 Google Tag Assistant Chrome 擴充功能或檢查 Google Analytics 中的「即時」部分來驗證 GTM 是否正常運作。