Google タグ マネージャー (GTM) を React Web サイトに追加するには、GTM スクリプトをアプリケーションに挿入する必要があります。その方法は次のとおりです:

1. Googleタグマネージャーアカウントを作成する

まだ作成していない場合は、Google タグ マネージャー アカウントを作成し、ウェブサイト用のコンテナを設定する必要があります。 Google から 2 つのコードが提供されます:

• HTML の に入る
• 開始 タグの直後に置かれるオプションの

2. React アプリに GTM をインストールする

オプション 1: GTM コードを手動で追加する

1. GTM スクリプトを タグに挿入します: React アプリでは、public/index.html ファイルに GTM スクリプトを追加します。

GTM-XXXXXX を実際の G​​TM コンテナ ID に置き換えます。

1. タグの後に 上に示すように、開始 タグの直後に

オプション 2: React GTM ライブラリの使用

React ライブラリを使用して統合を簡素化することもできます。

1. GTM ライブラリをインストールします:

npm または Yarn を使用して、react-gtm-module をインストールします:

   npm install react-gtm-module

1. アプリで 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 (
           

               {/* Your app components */}
           
       );
   };

   export default App;

再度、GTM-XXXXXX を実際の G​​TM コンテナ ID に置き換えます。

3. インストールの確認

GTM を React アプリに追加した後、変更を公開し、Google Tag Assistant Chrome 拡張機能を使用するか、Google アナリティクスの「リアルタイム」セクションをチェックして、GTM が機能していることを確認します。