如何在 React 网站中添加 Google 跟踪代码管理器代码-js教程-PHP中文网

如何在 React 网站中添加 Google 跟踪代码管理器代码

WBOY

发布： 2024-08-09 02:07:02

原创

796 人浏览过

How To Add Google Tag Manager Code in a React Website

将 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。