開始使用 Google Analytics


本快速入門導覽課程說明如何在應用程式中加入 Google Analytics，並開始記錄事件。

Google Analytics 會收集網頁應用程式的使用和行為資料。SDK 會記錄兩種主要資訊：

  • 事件：應用程式中的活動，例如使用者動作、系統事件或錯誤。

  • 使用者屬性：您定義的屬性，用來描述使用者族群區隔，例如語言偏好或地理位置。

Analytics 會自動記錄部分事件和使用者屬性，您無需加上任何程式碼即可啟用。

事前準備

如果您尚未將 Firebase 新增至 JavaScript 專案，請確認已在 Firebase 專案中啟用 Google Analytics：

  • 如果您要建立新的 Firebase 專案，請在專案建立工作流程中啟用 Google Analytics。

  • 如果您使用的是現有的 Firebase 專案，但未啟用 Google Analytics，請前往 >「專案設定」 的「整合」分頁標籤 啟用。

在專案中啟用 Google Analytics 後，您的 Firebase 網頁應用程式就會連結至與應用程式 + 網站資源相關聯的 Google Analytics 資料串流。

在應用程式中加入 Analytics SDK

視網頁應用程式的託管方式而定，系統可能會自動處理您的設定，或者您可能需要更新 Firebase 設定物件。如果您的網頁應用程式已使用 Google Analytics，您可能需要按照「使用 Firebase 搭配現有的 gtag.js 標記」一文所述，進行額外設定。

  1. 檢查程式碼中的 Firebase 設定物件是否包含 measurementId。在 Firebase 專案中啟用 Analytics 並註冊網頁應用程式時，系統會自動建立這個 ID，且必須使用 Analytics。

    • 如果您的應用程式使用 Firebase Hosting 且使用 Firebase SDK 的保留網址：

      Firebase 會自動處理應用程式設定。如要完成設定，請將專案設定中「您的應用程式」分頁中的指令碼新增至應用程式的 <body> 標記 (如果尚未新增)。

    • 如果應用程式未使用保留的網址：如果您使用的是現有的網頁應用程式，請更新程式碼中的 Firebase 設定物件，確保 measurementId 欄位存在。config 物件應類似下列範例：

      // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-GA_MEASUREMENT_ID"
};

  2. 如果您尚未安裝，請 安裝 Firebase JS SDK 並初始化 Firebase。

  3. 新增 Analytics JS SDK 並初始化 Analytics：

Web 

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 

import firebase from "firebase/compat/app";
import "firebase/compat/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 Analytics，如果您打算執行下列任一操作，應用程式可能需要額外設定：

  • 將 Firebase 的 Google Analytics 呼叫新增至頁面，但也打算繼續在同一頁面直接使用 gtag() 呼叫。
  • 希望在直接 gtag() 呼叫和傳送至 Firebase 的 Google Analytics 資料之間使用相同的評估 ID。

如要確保所有 Firebase 服務都能使用您的事件，請完成下列額外設定步驟：

  • 移除 gtag('config', 'GA_MEASUREMENT_ID'); 行，其中 GA_MEASUREMENT_ID 是 Firebase 網頁應用程式的 measurementId。如果您在頁面上有其他 Analytics 資源的其他 ID，則不需要移除其設定行。
  • 請務必先呼叫 firebase.analytics()，再透過 gtag() 傳送任何事件。

否則，透過 gtag() 呼叫傳送至該 ID 的事件將不會與 Firebase 建立關聯，也無法在其他 Firebase 服務中指定目標。

開始記錄事件

初始化 Analytics 服務後，您就可以開始使用 logEvent() 方法記錄事件。

有些事件適用於所有應用程式，有些則適用於特定業務類型或產業。建議您傳送包含規定參數的建議事件，這樣報表就能呈現最詳盡的資料，也方便您日後使用新推出的功能和整合服務。本節將示範如何記錄預先定義的事件。如要進一步瞭解記錄事件，請參閱「記錄事件」。

以下範例示範如何記錄建議事件，表示使用者已在應用程式中收到通知：

Web

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

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

Web

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

後續步驟