開始使用 Google Analytics 網頁版

選取平台： iOS+ Android Web Flutter Unity C++


本快速入門導覽課程說明如何將 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，您可能需要按照「搭配現有的 gtag.js 標記使用 Firebase」一文所述，完成額外設定。

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

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

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

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

      // 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"
};
      1. 如果尚未 安裝 Firebase JS SDK 並初始化 Firebase，請先完成這些步驟。 2. 新增 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();

搭配現有的 gtag.js 標記使用 Firebase

如果您先前使用 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');

Web

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

後續步驟