Catch up on highlights from Firebase at Google I/O 2023. Learn more

Google アナリティクスを使ってみる

このクイックスタートでは、アプリに Google アナリティクスを追加し、イベントのロギングを始める方法について説明します。

Google アナリティクスは、アプリの使用状況や動作に関するデータを収集します。この SDK は主に次の 2 種類の情報を記録します。

  • イベント: ユーザーの操作、システム イベント、エラーなど、アプリで起こっていること。
  • ユーザー プロパティ: 言語や地理的位置など、ユーザー層を示す属性。自由に定義できます。

アナリティクスでは、一部のイベントとユーザー プロパティが自動的にロギングされます。こうしたロギングを有効にするコードを追加する必要はありません。

始める前に

まだ追加していない場合は、JavaScript プロジェクトに Firebase を追加し、Firebase プロジェクトで Google アナリティクスが有効になっていることを確認します。

  • 新しい Firebase プロジェクトを作成する場合は、プロジェクトの作成ワークフローで Google アナリティクスを有効にします。

  • 既存の Firebase プロジェクトで Google アナリティクスが有効になっていない場合は、 > [プロジェクトの設定] の [統合] タブに移動して Google アナリティクスを有効にします。

プロジェクトで Google アナリティクスを有効にすると、Firebase ウェブアプリは、アプリ + ウェブ プロパティに関連付けられた Google アナリティクスのデータ ストリームにリンクされます。

アプリにアナリティクス SDK を追加する

ウェブ アプリケーションのホスト方法によっては、構成が自動的に処理されない場合があります。その場合は、手動で Firebase 構成オブジェクトを更新する必要があります。ウェブアプリですでに Google アナリティクスを使用している場合は、Firebase での既存の gtag.js のタグ付けにある追加の手順が必要になることがあります。

  1. コードの Firebase config オブジェクトに measurementId が含まれていることを確認してください。この ID は、Firebase プロジェクトでアナリティクスを有効にしてウェブアプリを登録すると自動的に作成され、アナリティクスを使用する場合に必要です。

    • アプリが Firebase Hosting を使用し、Firebase SDK に予約済みの URL を使用している場合:

      Firebase は、アプリケーションの構成を自動的に処理します。設定を完了するには、[プロジェクトの設定] の [アプリ] カードのスクリプトをアプリの <body> タグに追加します（まだ追加していない場合）。

    • アプリが予約済みの URL を使用していない場合: 既存のウェブアプリを使用しているときは、measurementId フィールドが存在するようにコードの Firebase config オブジェクトを更新します。config オブジェクトは次の例のようになります。

      // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  apiKey: "AIzaSyCGQ0tYppWFJkuSxBhOpkH0xVDmX245Vdc",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "637908496727",
  appId: "2:637908496727:web:a4284b4c99e329d5",
  measurementId: "G-9VP01NDSXJ"
};

  2. まだ行っていない場合は、Firebase JS SDK をインストールして Firebase を初期化します。

  3. アナリティクス JS SDK を追加して、アナリティクスを初期化します。

Web version 9 

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

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Analytics and get a reference to the service
const analytics = getAnalytics(app);

Web version 8 

import firebase from "firebase/app";
import "firebase/analytics";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Analytics and get a reference to the service
const analytics = firebase.analytics();

Firebase での既存の gtag.js のタグ付け

gtag.js スニペットを使用してアプリ内ですでに Google アナリティクスを実行している場合、次のいずれかを行うには、アプリで追加の設定が必要になることがあります。

  • Firebase からの Google アナリティクス呼び出しをページに追加し、同じページに対する gtag() 直接呼び出しを引き続き使用する。
  • gtag() 直接呼び出しと Firebase に送信される Google アナリティクス データの間で同じ測定 ID を使用する。

すべての Firebase サービスでイベントが使用されるようにするには、次の追加手順を行います。

  • gtag('config', 'GA_MEASUREMENT_ID'); の行を削除します。GA_MEASUREMENT_ID は、Firebase ウェブアプリの measurementId です。ページで他のアナリティクス プロパティに他の ID が設定されている場合、この config 行を削除する必要はありません。
  • gtag() でイベントを送信する前に、firebase.analytics() を呼び出します。

この設定を行わないと、gtag() 呼び出しの ID に送信されたイベントは Firebase に関連付けられず、他の Firebase サービスでのターゲティングに利用できません。

イベントのロギングを開始する

アナリティクス サービスを初期化した後、logEvent() メソッドでイベント ロギングを開始できます。

イベントには、すべてのアプリで推奨されるイベントと、特定のビジネスや業種で推奨されるイベントがあります。推奨イベントと既定のパラメータを一緒に送信することで、レポートに詳しい情報を表示できます。また、リリースされる最新の機能や統合を活用することもできます。このセクションでは、あらかじめ定義されているイベントのロギングについて説明します。イベント ロギングの詳細については、イベントをロギングするを参照してください。

次の例は、ユーザーがアプリで通知を受信したことを示す推奨イベントをロギングします。

Web version 9

import { getAnalytics, logEvent } from "firebase/analytics";

const analytics = getAnalytics();
logEvent(analytics, 'notification_received');
analytics_log_event.js

Web version 8

firebase.analytics().logEvent('notification_received');
index.js

次のステップ