🔥

Next.jsとFirebaseでイベントログを取得する

2021/12/03に公開

Firebase

やりたいこと

ユーザーの行動ログをFirebaseを使っていい感じに可視化していきたい！

Firebaseの設定

config情報は.envファイルから取得します。

~/firebase/index.ts

import 'firebase/auth';
import 'firebase/analytics';

import firebase from 'firebase/app';

const config = {
  apiKey: process.env.FIREBASE_KEY,
  authDomain: process.env.FIREBASE_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
};

// initializeを複数回走らせない
if (typeof window !== 'undefined' && firebase.apps.length === 0) {
  firebase.initializeApp(config);
}
const auth = firebase.auth();
const analytics = firebase.analytics;

export { auth, analytics };

これで、analyticsを好きなところに呼べばいいだけ！簡単！！

analyticsの使用方法

イベントログを収集したいコードの部分に好きなだけ、下記のようなロジックを仕込めばログの集積が可能になります。

~/HogePage.tsx

import { analytics } from '~/firebase';

const onSubmitHogeHoge = (id: number, content: string) => {
  postMethod({
    id: id,
    content: content,
  }).then(() => {
    analytics().logEvent('fuga_submit_content_from_hoge_hoge', {
      id: id,
      content: content,
    });
  });
};

logEventの第一引数に、任意のイベント名を記載して、第二引数に渡したいデータを送ります。
イベント名の命名規則も割と大事なので、記載していきます。

Firebase Analyticsのイベント名戦略

上限

記録されるアイテム	上限	上限に近づいた場合のアイテムのアーカイブの可否
イベント	アプリインスタンスあたり 500 個 first_open や in_app_purchase などの自動的に収集されるイベントは対象外です。	×
イベント名の長さ	40 文字	対象外
イベントあたりのイベントパラメータ	25	○
イベントパラメータ名の長さ	40 文字	対象外
イベントパラメータ値の長さ	100 文字	対象外
ユーザープロパティ	アプリインスタンスあたり 25 個	×
ユーザープロパティ名の長さ	24 文字	対象外
ユーザープロパティ値の長さ	36 文字	対象外
イベントの古さ（アップロードの時期）	記録後 2 日以上経過してからアップロードされたイベントはエクスポートに含まれません。	対象外

イベント名の命名規則

単語と単語の間はアンダースコア（_）をつける
冒頭にサービス名（fuga）を設定（一つのドメインしかない場合は不要）
pageの概要がわかる略語（sh）を次に設定
- searchをshなど
イベントを表す単語（submit_content_from_hoge_hoge）を設定

例：fuga_sh_submit_content_from_hoge_hoge

Debugのやり方（Chrome）

Google Analytics Debuggerを拡張機能から追加
拡張機能をONに
Firebaseの分析から、DebugViewを選択

右の上位のイベントから、"fuga_sh_submit_content_from_hoge_hoge"を選択すると、先ほど設定した、idとcontentの中身を確認できます。

分析に関して

Firebaseの分析からEventsを選択する
イベント名や件数、変化率、ユーザー数、変化率、コンバージョンとしてマークを付けるなどの項目があるので、適宜確認
より行動ログ的に分析したい場合は、右上にある”Google アナリティクスで表示”を選択すると、Google アナリティクスから分析可能に。
行動フローを見たい場合は、Google アナリティクスの行動→行動フローを選択し、仕込んだイベントログの名前ごとに設定をすればOK

※注意点：イベントログの本番反映には1日かかるので、お気をつけください