Google Tag Manager 是一个强大的工具，可以帮助你轻松管理和跟踪网站上的各种标签。在 React 项目中使用 Google Tag Manager 时，一个好的选择是使用 @info.nl/react-google-tagmanager 这个 npm 包。
安装
使用 npm 进行安装：
npm install --save @info.nl/react-google-tagmanager
配置
要使用 @info.nl/react-google-tagmanager，你需要先在 Google Tag Manager 中创建帐号和容器，并获取 ID。
在 React 项目中，你需要在 index.html 文件的 <head> 标签中添加以下代码：
-- -------------------- ---- -------
---- ------ --- ------- ---
--------
---------------------
------------------------------------- --- ----------------------------------
--- ---------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
-------------------------------------------------------
---------
---- --- ------ --- ------- ---注意将 GTM-XXXXXXX 替换为你的 Google Tag Manager 容器 ID。
然后在你的 React 组件中引入 @info.nl/react-google-tagmanager 包，配置你的 Google Tag Manager ID：
import GoogleTagManager from '@info.nl/react-google-tagmanager';
<GoogleTagManager gtmId={process.env.GTM_ID} />注意要将 process.env.GTM_ID 替换为你的 Google Tag Manager 容器 ID。
使用
一旦配置完成，你就可以在项目中使用 Google Tag Manager 的各种标签和变量。下面是一个示例，展示如何在 React 发送 Google Analytics 事件：
-- -------------------- ---- -------
------ ------- ---- -----------
-------- ------------- -
---------------
--------- ---------
------- --------
------ -----------
---
-
-------- ---------- -
------ -
------- --------------------------- -----------
--
-总结
@info.nl/react-google-tagmanager 是一个方便的 npm 包，可以在 React 项目中帮助您轻松配置和使用 Google Tag Manager。只需简单的配置即可访问 Google Analytics 事件和其他功能。希望这篇文章可以帮助您更好地理解如何使用该工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e2441b8