Google タグ マネージャー (GTM) を React Web サイトに追加するには、GTM スクリプトをアプリケーションに挿入する必要があります。その方法は次のとおりです:
まだ作成していない場合は、Google タグ マネージャー アカウントを作成し、ウェブサイト用のコンテナを設定する必要があります。 Google から 2 つのコードが提供されます:
<!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 に置き換えます。
React アプリに GTM を追加した後、変更を公開し、Google Tag Assistant Chrome 拡張機能を使用するか、Google アナリティクスの「リアルタイム」セクションをチェックして、GTM が機能していることを確認します。
以上がReact ウェブサイトに Google タグ マネージャー コードを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
