React Router で Google Analytics を設定するためのサンプルコード

React-Router で Google Analytics を設定する方法

そこで、React-Router と Google Analytics を適切に連携させるために、以下の2つの方法を紹介します。

react-ga ライブラリを使用する

react-ga は、React 用の公式 Google Analytics ライブラリです。このライブラリを使用すると、React Router のナビゲーションイベントをトラッキングし、Google Analytics に適切なデータを送信することができます。

手順

1. react-ga をインストール
   

npm install react-ga

1. Google Analytics トラッキング ID を取得
   

Google Analytics アカウントにアクセスし、トラッキングしたいプロパティのトラッキング ID を取得します。

1. react-ga を構成
   

src/index.js などのメインファイルに、以下のコードを追加します。

import ReactGA from 'react-ga';

ReactGA.initialize({
  trackingId: 'YOUR_TRACKING_ID', // トラッキング ID を置き換える
  debug: true // デバッグモードを有効にする (オプション)
});

ReactGA.pageview(window.location.pathname);

1. コンポーネント内でページビューをトラッキング
   

useEffect フックを使用して、コンポーネントがレンダリングされるたびにページビューをトラッキングすることができます。

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import ReactGA from 'react-ga';

const MyComponent = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.pageview(location.pathname);
  }, [location]);

  return (
    // ... コンポーネントのコンテンツ
  );
};

1. イベントトラッキング
   

ボタンクリックなどのユーザーアクションをトラッキングすることもできます。

ReactGA.event({
  category: 'ボタン',
  action: 'クリック',
  label: '詳細ページへ'
});

gtag.js を使用する

1. gtag.js をインストール
   

npm install gtag.js

1. gtag.js を構成
   

<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
</script>

1. ページビューをトラッキング
   

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();

  useEffect(() => {
    window.gtag('event', {
      category: 'ページビュー',
      action: '表示',
      label: location.pathname
    });
  }, [location]);

  return (
    // ... コンポーネントのコンテンツ
  );
};

window.gtag('event', {
  category: 'ボタン',
  action: 'クリック',
  label: '詳細ページへ'
});

どちらの方法を選択するべきか？

react-ga と gtag.js のどちらを使用するかは、個々の開発者の好みやプロジェクトの要件によって異なります。

• **g
• react-ga は、React エコシステムとの緊密な統合と使いやすい API を提供します。

トラッキング ID の取得

react-ga のインストール

npm install react-ga

react-ga の初期化

import ReactGA from 'react-ga';

ReactGA.initialize({
  trackingId: 'YOUR_TRACKING_ID', // トラッキング ID を置き換える
  debug: true // デバッグモードを有効にする (オプション)
});

ページビューのトラッキング

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import ReactGA from 'react-ga';

const MyComponent = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.pageview(location.pathname);
  }, [location]);

  return (
    // ... コンポーネントのコンテンツ
  );
};

イベントトラッキング

ReactGA.event({
  category: 'ボタン',
  action: 'クリック',
  label: '詳細ページへ'
});

gtag.js のインストール

npm install gtag.js

gtag.js の設定

<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
</script>

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();

  useEffect(() => {
    window.gtag('event', {
      category: 'ページビュー',
      action: '表示',
      label: location.pathname
    });
  }, [location]);

  return (
    // ... コンポーネントのコンテンツ
  );
};

window.gtag('event', {
  category: 'ボタン',
  action: 'クリック',
  label: '詳細ページへ'
});

• 上記のコードはあくまで基本的な例であり、必要に応じてカスタマイズする必要があります。

npm install react-router-ga

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { GoogleAnalytics } from 'react-router-ga';

const App = () => (
  <Router>
    <GoogleAnalytics trackingId="YOUR_TRACKING_ID">
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </GoogleAnalytics>
  </Router>
);

export default App;

react-redux と react-ga を使用する

react-redux と react-ga を組み合わせることで、より柔軟なトラッキング設定が可能になります。

1. react-redux と react-ga をインストール
   

npm install react react-redux react-ga

1. Redux ストアを作成
   

src/store.js などのファイルに、Redux ストアを作成します。

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

4. Google Analytics アクションを作成

src/actions/analytics.js などのファイルに、Google Analytics アクションを作成します。

import ReactGA from 'react-ga';

export const pageview = (path) => ({
  type: 'PAGEVIEW',
  payload: path
});

export const event = (category, action, label) => ({
  type: 'EVENT',
  payload: {
    category,
    action,
    label
  }
});

1. Google Analytics ミドルウェアを作成
   

import { ReactGA } from 'react-ga';
import { store } from '../store';

const analyticsMiddleware = () => {
  return (next) => (action) => {
    if (action.type === 'PAGEVIEW') {
      ReactGA.pageview(action.payload);
    } else if (action.type === 'EVENT') {
      ReactGA.event(action.payload.category, action.payload.action, action.payload.label);
    }

    return next(action);
  };
};

export default analyticsMiddleware;

1. Redux アプリケーションにミドルウェアを適用
   

src/index.js などのメインファイルに、Redux アプリケーションにミドルウェアを適用します。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
import analyticsMiddleware from './middleware/analytics';

const app = (
  <Provider store={store}>
    <App />
  </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

1. コンポーネント内でアクションを dispatch
   

コンポーネント内で、useDispatch フックを使用してアクションを dispatch できます。

import React, { useDispatch } from 'react';
import { pageview, event } from '../actions/analytics';

const MyComponent = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(pageview('/my-component'));
  }, []);

  const handleClick = () => {
    dispatch(event('ボタン', 'クリック', '詳細ページへ'));
  };