React に Google Analytics を簡単に導入: react-ga と gtag.js を徹底解説
2024-07-27
React に Google Analytics を追加する方法
react-ga を使う
react-ga は、React で Google Analytics を簡単に導入するためのライブラリです。主な利点は以下の通りです。
- シンプルなコード: react-ga を使うと、コードを数行追加するだけで Google Analytics を実装できます。
- 便利なコンポーネント:
<OutboundLink>コンポーネントなど、様々な便利なコンポーネントが用意されています。 - HOC (Higher-Order Component):
withTrackerHOC を使って、コンポーネントに自動的にトラッキング機能を追加できます。
react-ga を使った実装手順
- react-ga をインストールします。
npm install react-ga
- トラッキング ID を設定します。
import ReactGA from 'react-ga';
ReactGA.initialize('YOUR_TRACKING_ID');
- ページビューのトラッキングを行います。
ReactGA.pageview();
ReactGA.event({ category: 'Button', action: 'Click' });
gtag.js を使う
gtag.js は、Google Analytics の公式 JavaScript ライブラリです。react-ga よりも柔軟性がありますが、コード量も多くなります。
gtag.js を使った実装手順
- Google Analytics アカウントを作成し、トラッキング ID を取得します。
- index.html の
<head>タグ内に以下のコードを追加します。
<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 { useEffect } from 'react';
useEffect(() => {
gtag('event', { category: 'Page View', action: 'View Page' });
}, []);
import { useEffect } from 'react';
useEffect(() => {
gtag('event', { category: 'Button', action: 'Click' });
}, []);
SPA (Single Page Application) の場合
SPA の場合、ページ遷移しても URL が変わらないため、通常の方法ではページビューが正しくカウントされません。そのため、以下の対策が必要です。
- useHistory を使う:
react-router-domのuseHistoryHook を使って、URL の変化を検知し、ページビューイベントを送信します。 - pushState を使う:
window.history.pushStateAPI を使って、URL を変更せずにページビューイベントを送信します。
import React, { useEffect } from 'react';
import ReactGA from 'react-ga';
const App = () => {
useEffect(() => {
ReactGA.initialize('YOUR_TRACKING_ID');
ReactGA.pageview();
}, []);
return (
<div>
<h1>React GA Demo</h1>
<button onClick={() => ReactGA.event({ category: 'Button', action: 'Click' })}>Click Me</button>
</div>
);
};
export default App;
useEffectHook を使って、コンポーネントがマウントされたときにトラッキング ID を設定し、ページビューイベントを送信します。<h1>タグとボタンを表示します。- ボタンがクリックされたときに、
ReactGA.eventを使ってイベントを送信します。
import React, { useEffect } from 'react';
const App = () => {
useEffect(() => {
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'YOUR_TRACKING_ID');
gtag('event', { category: 'Page View', action: 'View Page' });
}, []);
return (
<div>
<h1>gtag.js Demo</h1>
<button onClick={() => gtag('event', { category: 'Button', action: 'Click' })}>Click Me</button>
</div>
);
};
export default App;
このコードは、以下のことを行っています。
注意事項
- 上記のコードはあくまでサンプルです。本番環境で使用するには、
YOUR_TRACKING_IDを自分のトラッキング ID に置き換えてください。 - SPA の場合は、ページビューのトラッキング漏れを防ぐために、
useHistoryまたはpushStateを使って対策する必要があります。
Google Tag Manager は、Google Analytics を含む様々なタグを簡単に管理できるツールです。React で Google Tag Manager を使うには、以下の手順が必要です。
- Google Tag Manager アカウントを作成します。
- コンテナを作成し、Google Analytics タグを追加します。
- React アプリケーションに Google Tag Manager スクリプトを追加します。
Google Tag Manager を使った実装手順
- React アプリケーションに Google Tag Manager スクリプトを追加します。
<head>タグ内に以下のコードを追加します。
<script src="https://www.googletagmanager.com/gtm.js?id=YOUR_CONTAINER_ID" async></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'YOUR_CONTAINER_ID');
</script>
- プレビューモードで動作確認を行い、問題なければ公開します。
メリット:
- react-ga や gtag.js よりも設定が簡単です。
- コードを直接書き換える必要がないため、メンテナンスが容易です。
- react-ga や gtag.js よりも動作が遅くなる可能性があります。
- Google Tag Manager の使用方法を覚える必要があります。
独自ライブラリを使う
React には、Google Analytics を統合するための独自ライブラリがいくつかあります。代表的なライブラリは以下の通りです。
これらのライブラリは、それぞれ異なる機能を提供しています。プロジェクトの要件に合わせて、適切なライブラリを選択してください。
独自ライブラリを使うメリット:
- ライブラリによって、独自の機能が提供されている場合があります。
- react-ga や gtag.js よりも知名度が低いため、情報が少ない場合があります。
- ライブラリのメンテナンスが終了している可能性があります。
Server-Side Rendering (SSR) を使う
Next.js や Gatsby などの SSR フレームワークを使用している場合は、サーバー側で Google Analytics タグをレンダリングすることができます。この方法のメリットは、クライアント側で JavaScript を実行する必要がないため、パフォーマンスが向上する可能性があることです。
SSR を使った実装手順
- 使用している SSR フレームワークのドキュメントに従って、Google Analytics タグをサーバー側でレンダリングします。
- クライアント側で JavaScript を実行する必要がないため、パフォーマンスが向上する可能性があります。
- ヘッドレンダリングが必要な場合に有効です。
- 設定が複雑になる可能性があります。
- SSR フレームワークの知識が必要となります。
reactjs google-analytics react-ga
