ホームページ > 記事 > ウェブフロントエンド > React ウェブサイトに Google タグ マネージャー コードを追加する方法
React ウェブサイトに Google タグ マネージャー コードを追加する方法
- WBOYオリジナル
- 2024-08-09 02:07:02731ブラウズ
Google タグ マネージャー (GTM) を React Web サイトに追加するには、GTM スクリプトをアプリケーションに挿入する必要があります。その方法は次のとおりです:
1. Googleタグマネージャーアカウントを作成する
まだ作成していない場合は、Google タグ マネージャー アカウントを作成し、ウェブサイト用のコンテナを設定する必要があります。 Google から 2 つのコードが提供されます:
- に入れるタグ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. インストールの確認
React アプリに GTM を追加した後、変更を公開し、Google Tag Assistant Chrome 拡張機能を使用するか、Google アナリティクスの「リアルタイム」セクションをチェックして、GTM が機能していることを確認します。
以上がReact ウェブサイトに Google タグ マネージャー コードを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：非同期と遅延について理解する次の記事：非同期と遅延について理解する