Bắt đầu sử dụng Google Analytics cho web

Chọn nền tảng: iOS+ Android Web Flutter Unity C++


Hướng dẫn nhanh này sẽ chỉ cho bạn cách thêm Google Analytics vào ứng dụng và bắt đầu ghi lại các sự kiện.

Google Analytics thu thập dữ liệu về mức sử dụng và hành vi cho ứng dụng web của bạn. SDK ghi lại 2 loại thông tin chính:

  • Sự kiện: Những gì đang xảy ra trong ứng dụng của bạn, chẳng hạn như hành động của người dùng, các sự kiện của hệ thống hoặc lỗi.

  • Thuộc tính người dùng: Các thuộc tính mà bạn xác định để mô tả các phân khúc trong cơ sở người dùng, chẳng hạn như lựa chọn ưu tiên về ngôn ngữ hoặc vị trí địa lý.

Analytics sẽ tự động ghi lại một số sự kiện và thuộc tính người dùng; bạn không cần thêm mã nào để bật những sự kiện và thuộc tính này.

Trước khi bắt đầu

Nếu bạn chưa thực hiện, hãy thêm Firebase vào dự án JavaScript và đảm bảo rằng Google Analytics đã được bật trong dự án Firebase:

  • Nếu bạn đang tạo dự án Firebase mới, hãy bật Google Analytics trong quy trình tạo dự án.

  • Nếu bạn đang sử dụng một dự án Firebase hiện có chưa bật Google Analytics, bạn có thể bật tính năng này trong thẻ Settings > Integrations.

Khi bạn bật Google Analytics trong dự án, các ứng dụng web Firebase sẽ được liên kết với các luồng dữ liệu Google Analytics liên kết với một tài sản Web và ứng dụng.

Thêm SDK Analytics vào ứng dụng của bạn

Tuỳ thuộc vào cách ứng dụng web của bạn được lưu trữ, cấu hình có thể được xử lý tự động hoặc bạn có thể cần cập nhật đối tượng cấu hình Firebase. Nếu ứng dụng web của bạn đã sử dụng Google Analytics, bạn có thể cần thực hiện thêm bước thiết lập được mô tả trong bài viết Sử dụng Firebase với phương pháp gắn thẻ gtag.js hiện có.

  1. Kiểm tra để đảm bảo rằng đối tượng cấu hình Firebase trong mã của bạn có chứa measurementId. Mã này được tạo tự động khi bạn bật Analytics trong dự án Firebase và đăng ký một ứng dụng web. Bạn cần có mã này để sử dụng Analytics.

    • Nếu ứng dụng của bạn sử dụng Firebase Hosting và sử dụng URL dành riêng cho SDK Firebase:

      Firebase sẽ tự động xử lý việc định cấu hình ứng dụng của bạn. Để hoàn tất quá trình thiết lập, hãy thêm các tập lệnh từ thẻ Your apps (Ứng dụng của bạn) trong phần Cài đặt dự án vào thẻ <body> của ứng dụng, nếu bạn chưa thêm.

    • Nếu ứng dụng của bạn không sử dụng URL dành riêng: Nếu bạn đang làm việc với một ứng dụng web hiện có, hãy cập nhật đối tượng cấu hình Firebase trong mã của bạn để đảm bảo trường measurementId xuất hiện. Đối tượng cấu hình sẽ có dạng như ví dụ sau:

      // 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. Nếu bạn chưa thực hiện, hãy cài đặt SDK JS Firebase và khởi chạy Firebase. 2. Thêm SDK JS Analytics và khởi chạy 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();

Sử dụng Firebase với phương pháp gắn thẻ gtag.js hiện có

Nếu trước đây bạn đã chạy Google Analytics trong ứng dụng bằng đoạn mã gtag.js, thì ứng dụng của bạn có thể cần thiết lập thêm nếu bạn dự định thực hiện một trong những việc sau:

  • Thêm các lệnh gọi Google Analytics từ Firebase vào trang nhưng cũng dự định tiếp tục sử dụng trực tiếp các lệnh gọi gtag() trên cùng một trang.
  • Muốn sử dụng cùng một mã đo lường giữa cả lệnh gọi gtag() trực tiếp và Google Analytics dữ liệu được gửi đến Firebase.

Để đảm bảo tất cả dịch vụ Firebase đều có thể sử dụng các sự kiện của bạn, hãy hoàn tất các bước thiết lập bổ sung sau:

  • Xoá dòng gtag('config', 'GA_MEASUREMENT_ID'); trong đó GA_MEASUREMENT_ID là measurementId của ứng dụng web Firebase. Nếu bạn có các mã khác cho các tài sản Analytics khác trên trang, thì bạn không cần xoá dòng cấu hình của các mã đó.
  • Đảm bảo bạn gọi firebase.analytics() trước khi gửi bất kỳ sự kiện nào bằng gtag().

Nếu không, các sự kiện được gửi đến mã đó bằng lệnh gọi gtag() sẽ không được liên kết với Firebase và sẽ không có sẵn để nhắm mục tiêu trong các dịch vụ Firebase khác.

Bắt đầu ghi lại các sự kiện

Sau khi khởi chạy dịch vụ Analytics, bạn có thể bắt đầu ghi lại các sự kiện bằng logEvent() phương thức.

Có một số sự kiện được đề xuất cho tất cả ứng dụng; một số sự kiện khác được đề xuất cho các loại hình kinh doanh hoặc ngành dọc cụ thể. Bạn nên gửi các sự kiện được đề xuất cùng với các thông số quy định cho sự kiện đó để đảm bảo báo cáo có được thông tin chi tiết tối đa, đồng thời để khai thác lợi ích từ các tính năng cũng như công cụ tích hợp sẽ ra mắt trong tương lai. Phần này minh hoạ cách ghi lại một sự kiện được xác định trước. Để biết thêm thông tin về cách ghi lại các sự kiện, hãy xem bài viết Ghi lại các sự kiện.

Ví dụ sau đây minh hoạ cách ghi lại một sự kiện được đề xuất để cho biết người dùng đã nhận được thông báo trong ứng dụng của bạn:

Web

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

const analytics = getAnalytics();
logEvent(analytics, 'notification_received');

Web

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

Các bước tiếp theo