如何在 React 網站中新增 Google 追蹤程式碼管理器程式碼
- WBOY原創
- 2024-08-09 02:07:02795瀏覽
將 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