如何在 React 网站中添加 Google 跟踪代码管理器代码
- WBOY原创
- 2024-08-09 02:07:02731浏览
将 Google 跟踪代码管理器 (GTM) 添加到 React 网站需要将 GTM 脚本插入到您的应用程序中。操作方法如下：
1. 创建 Google 跟踪代码管理器帐户
如果您还没有这样做，您需要创建一个 Google 跟踪代码管理器帐户并为您的网站设置一个容器。 Google 将为您提供两段代码：
- 位于 中的标签您的 HTML。
- 可选的
2. 在你的 React 应用程序中安装 GTM
选项 1：手动添加 GTM 代码
- 将 GTM 脚本插入到 中标签： 在 React 应用程序中，您将在 public/index.html 文件中添加 GTM 脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<div id="root"></div>
</body>
</html>
将 GTM-XXXXXX 替换为您的实际 GTM 容器 ID。
- 插入 将
选项 2：使用 React GTM 库
您还可以使用 React 库来简化集成。
- 安装 GTM 库：
使用npm或yarn安装react-gtm-module：
npm install react-gtm-module
- 在您的应用中初始化 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 (
<div className="App">
{/* Your app components */}
</div>
);
};
export default App;
再次将 GTM-XXXXXX 替换为您的实际 GTM 容器 ID。
3. 验证安装
将 GTM 添加到 React 应用程序后，发布更改并通过使用 Google Tag Assistant Chrome 扩展或检查 Google Analytics 中的“实时”部分来验证 GTM 是否正常工作。
以上是如何在 React 网站中添加 Google 跟踪代码管理器代码的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn