如何在 React 網站中新增 Google 追蹤程式碼管理器程式碼-js教程-PHP中文網

如何在 React 網站中新增 Google 追蹤程式碼管理器程式碼

WBOY

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

原創

668 人瀏覽過

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。