将 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 是否正常工作。