將 Google 追蹤程式碼管理員 (GTM) 新增至 React 網站需要將 GTM 腳本插入您的應用程式中。操作方法如下：
如果您還沒有這樣做，您需要建立 Google 追蹤代碼管理器帳戶並為您的網站設定容器。 Google 將提供您兩段程式碼：
<!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.m.sbmmt.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.m.sbmmt.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。
您也可以使用 React 函式庫來簡化整合。
使用npm或yarn安裝react-gtm-module：
npm install react-gtm-module
在主 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。
將 GTM 新增至 React 應用程式後，發布變更並透過使用 Google Tag Assistant Chrome 擴充功能或檢查 Google Analytics 中的「即時」部分來驗證 GTM 是否正常運作。
以上是如何在 React 網站中新增 Google 追蹤程式碼管理器程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
