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 bắt đầu nhanh này trình bày cách thêm Google Analytics vào ứng dụng và bắt đầu ghi nhật ký sự kiện.

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

  • Sự kiện: Những gì đang diễn ra trong ứng dụng, chẳng hạn như thao tác của người dùng, các sự kiện của hệ thống hoặc lỗi phát sinh.

  • Thuộc tính người dùng: Các thuộc tính do 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ư ngôn ngữ ưu tiên hoặc vị trí địa lý.

Analytics sẽ tự động ghi lại nhật ký của một vài 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 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 đ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ẻ Cài đặt > Tích hợp.

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 lưu trữ ứng dụng web, cấu hình của bạn 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, thì bạn có thể cần phải thực hiện thêm bước thiết lập được mô tả trong phần Sử dụng Firebase với tính năng gắn thẻ gtag.js hiện có.

  1. Kiểm tra để đảm bảo đố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 bắt buộc phải 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 Firebase SDK:

      Firebase tự động xử lý việc định cấu hình ứng dụng của bạn. Để hoàn tất quy trình thiết lập, hãy thêm tập lệnh từ thẻ Ứ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 làm việc này).

    • Nếu ứng dụng của bạn không sử dụng URL đặt trước: 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 có trường measurementId. Đố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 Firebase JS 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 tính năng 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 lệnh gọi Google Analytics từ Firebase vào trang, nhưng cũng dự định tiếp tục sử dụng lệnh gọi gtag() trực tiếp trên cùng một trang.
  • Muốn sử dụng cùng một mã đo lường cho cả lệnh gọi gtag() trực tiếp và dữ liệu Google Analytics được gửi đến Firebase.

Để đảm bảo tất cả dịch vụ của 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 có các mã nhận dạng khác cho các tài sản Analytics khác trên trang, bạn không cần xoá dòng cấu hình của các mã nhận dạng đó.
  • Hãy nhớ 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ã nhận dạng đó bằng lệnh gọi gtag() sẽ không được liên kết với Firebase và sẽ không thể dùng để nhắm mục tiêu trong các dịch vụ khác của Firebase.

Bắt đầu ghi nhật ký 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 phương thức logEvent().

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 thông số được quy định cho sự kiện đó để đảm bảo báo cáo có được lượng 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 nhật ký một sự kiện được xác định trước. Để biết thêm thông tin về cách ghi nhật ký sự kiện, hãy xem bài viết Ghi nhật ký 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