ReactでGoogle Analyticsの独自イベントを使う

ReactにGoogle Analyticsの独自タグを埋め込んだときのメモです。

1. FirebaseコンソールからAnalyticsの情報を取得

Firebaseコンソールにログインし、下記画像の、、

下の方にある下記画像に記載されているコードをコピーし、

新規作成したGoogleAnalytics.jsに貼り付けます。(ファイル名は何でも可)
GoogleAnalytics.jsをReactのsrc直下に配置します。

GoogleAnalytics.js

import { getAnalytics } from "firebase/analytics";
import { initializeApp } from "firebase/app";

const AnalyticsConfig_prod = {
  apiKey: "aaaaaaaaaaaaaaaaaaa",
  authDomain: "bbbbbbbbbbbbbbbbbb",
  projectId: "cccccccccccc",
  storageBucket: "dddddddddddd",
  messagingSenderId: "eeeeeeeee",
  appId: "fffffffff7",
  measurementId: "gggggggggg",
};

const app = initializeApp(AnalyticsConfig_prod);
export const analytics = getAnalytics(app);

2. FirebaseライブラリをReact環境にインストール

npm install firebase

3. 本番環境と開発環境の切り替え

必要に応じて、Analyticsをドメイン名で切り替えるようにしておきます。

GoogleAnalytics.js

import { getAnalytics } from "firebase/analytics";
import { initializeApp } from "firebase/app";

const AnalyticsConfig_prod = {
  apiKey: "aaaaaaaaaaaaaaaaaaa",
  authDomain: "bbbbbbbbbbbbbbbbbb",
  projectId: "cccccccccccc",
  storageBucket: "dddddddddddd",
  messagingSenderId: "eeeeeeeee",
  appId: "fffffffff7",
  measurementId: "gggggggggg",
};

const AnalyticsConfig_stage = {
  apiKey: "hhhhhhhhhhhhh",
  authDomain: "iiiiiiiiiiiiii",
  projectId: "jjjjjjjjjjjjjj",
  storageBucket: "kkkkkkkkkkkk",
  messagingSenderId: "lllllllllll",
  appId: "mmmmmmmmmmmmmmm",
  measurementId: "nnnnnnnnnnnn",
};

let app;
if (document.domain === "xxxxxxx.yyyy.com") {
  app = initializeApp(AnalyticsConfig_prod);
} else {
  app = initializeApp(AnalyticsConfig_stage);
}

export const analytics = getAnalytics(app);

4. 各ページでイベント送信処理を実装

hoge.js

import { logEvent } from "firebase/analytics";
import { analytics } from "../GoogleAnalytics";
    ：
  const buttonClicked = () => {
    logEvent(analytics, "xxx画面のボタン押下");
  };
    ：
  useEffect(() => {
    logEvent(analytics, "xxx画面を表示");
  }, []);
    ：
など

リアルタイムではないのでコンソールに結果が表示されるまで1日かかります。下記のようにイベント名のところに独自イベント名が表示されます。