ReactにGoogleAnalyticsのタグを埋め込み

ReactにGoogleAnalyticsのタグを埋め込み

Google AnalyticsのタグをReactに埋め込むには、react-gaというライブラリを使用するのが一般的です。
以下は、TypeScriptを使用してGoogle Analyticsのタグを埋め込む方法の例です。

まず、react-gaライブラリをインストールします。

npm install react-ga

または

yarn add react-ga

次に、TypeScriptを使用した実装例です。

// src/analytics.ts
import ReactGA from 'react-ga';

const GA_TRACKING_ID = 'Google AnalyticsのトラッキングID';

export const initGA = () => {
  ReactGA.initialize(GA_TRACKING_ID);
};

export const logPageView = () => {
  ReactGA.set({ page: window.location.pathname });
  ReactGA.pageview(window.location.pathname);
};

次に、アプリケーションのエントリーポイントであるApp.tsxなどで、Google Analyticsの初期化とページビューのログを設定します。

// src/App.tsx
import React, { useEffect } from 'react';
import { initGA, logPageView } from './analytics';

const App: React.FC = () => {
  useEffect(() => {
    initGA();
    logPageView();
    
    const handleRouteChange = () => {
      logPageView();
    };

    window.addEventListener('popstate', handleRouteChange);
    return () => {
      window.removeEventListener('popstate', handleRouteChange);
    };
  }, []);

  return (
    <div>
      <h1>Hello, Google Analytics!</h1>
    </div>
  );
};

export default App;

このコードでは、Google Analyticsの初期化をuseEffect内で行い、ページが変更されるたびにlogPageView関数を呼び出して、ページビューを記録します。
また、popstateイベントリスナーを使用して、ブラウザの戻るボタンによるページ遷移も追跡しています。

このようにすることで、Google Analyticsにページビューを送信し、ユーザーの行動を追跡することができます。