GatsbyにGoogle Analytics 4(GA4)を導入する方法

Gatsbyは静的サイトジェネレーターとして人気が高く、パフォーマンスとSEO対策に優れています。Google Analyticsを導入すれば、ユーザーの行動データを分析し、サイトの改善に役立てることができます。この記事では、Gatsbyサイトに最新のGoogle Analytics 4(GA4)を導入する手順を説明します。

前提条件

• Gatsbyサイトがすでにセットアップされていること
• Google Analyticsアカウントを持っていること

手順

1. GA4プロパティを作成する

Google Analyticsにログインし、「アカウント」セクションから「プロパティを作成」を選択します。「プロパティの種類」では「Webストリーム」を選び、「次へ」をクリックします。必要な情報を入力し、設定を完了させると、測定ID(G-XXXXXXXXXX)が発行されます。

2. react-ga4プラグインをインストールする

Gatsbyプロジェクトのルートディレクトリで以下のコマンドを実行し、react-ga4をインストールします。

yarn add react-ga4

3. gatsby-browser.jsファイルを編集する

gatsby-browser.jsファイルを編集し、GA4の初期化とトラッキングを設定します。

// gatsby-browser.js
import ReactGA from "react-ga4";

// トラッキングIDを設定
const trackingId = "G-XXXXXXXXXX"; //ご自身のトラッキングIDに置き換えてください

// Google Analyticsを初期化
ReactGA.initialize(trackingId);

// ページビューをトラッキング
exports.onRouteUpdate = () => {
  ReactGA.send({ hitType: "pageview" });
};

4. イベントのトラッキング

特定のユーザー行動(クリックイベントなど)をトラッキングしたい場合は、アプリケーションコードで以下のようにReact GA4 APIを呼び出します。

import ReactGA from "react-ga4";

const handleClick = () => {
  // クリックイベントをトラッキング
  ReactGA.event({
    category: "Button Click",
    action: "Click event",
    label: "Button label",
  });
};

return <button onClick={handleClick}>Click me</button>;

まとめ

以上の手順で、GatsbyサイトにGoogle Analytics 4を導入することができました。この設定により、ユーザーの行動データを収集・分析し、サイトの改善につなげることができるようになります。Google Analyticsの詳細な機能については、公式ドキュメントを参照してください。