เริ่มต้นใช้งาน Google Analytics สําหรับเว็บ

เลือกแพลตฟอร์ม: iOS+ Android Web Flutter Unity C++


การเริ่มต้นอย่างรวดเร็วนี้แสดงให้คุณเห็นถึงวิธีเพิ่ม Google Analytics ลงในแอปและเริ่มบันทึกเหตุการณ์

Google Analytics จะรวบรวมข้อมูลการใช้งานและพฤติกรรมสำหรับเว็บแอปของคุณ โดย SDK จะบันทึกข้อมูล 2 ประเภทหลักๆ ได้แก่

  • เหตุการณ์: สิ่งที่เกิดขึ้นในแอป เช่น การกระทำของผู้ใช้ เหตุการณ์ ของระบบ หรือข้อผิดพลาด

  • พร็อพเพอร์ตี้ผู้ใช้: แอตทริบิวต์ที่คุณกำหนดเพื่ออธิบายกลุ่มต่างๆ ในฐานผู้ใช้ เช่น ค่ากำหนดภาษาหรือสถานที่ตั้งทางภูมิศาสตร์

Analytics จะบันทึกเหตุการณ์และพร็อพเพอร์ตี้ผู้ใช้บางรายการโดยอัตโนมัติ คุณจึงไม่ต้องเพิ่มโค้ดใดๆ เพื่อเปิดใช้เหตุการณ์และพร็อพเพอร์ตี้ผู้ใช้เหล่านั้น

ก่อนเริ่มต้น

หากยังไม่ได้เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript ให้เพิ่มและตรวจสอบว่าได้เปิดใช้ Google Analytics ในโปรเจ็กต์ Firebase แล้ว โดยทำดังนี้

  • หากจะสร้างโปรเจ็กต์ Firebase ใหม่ ให้เปิดใช้ Google Analytics ในระหว่างขั้นตอนการสร้างโปรเจ็กต์

  • หากใช้โปรเจ็กต์ Firebase เดิมที่ไม่ได้เปิดใช้ Google Analytics คุณสามารถเปิดใช้ได้ใน การตั้งค่า > แท็บการผสานรวม

เมื่อเปิดใช้ Google Analytics ในโปรเจ็กต์ เว็บแอป Firebase จะลิงก์กับสตรีมข้อมูล Google Analytics ที่เชื่อมโยงกับ พร็อพเพอร์ตี้แอป + เว็บ

เพิ่ม Analytics SDK ลงในแอป

ระบบอาจจัดการการกำหนดค่าโดยอัตโนมัติ หรือคุณอาจต้องอัปเดต ออบเจ็กต์การกำหนดค่า Firebaseทั้งนี้ขึ้นอยู่กับวิธีโฮสต์เว็บแอปพลิเคชัน หากเว็บแอปใช้ Google Analytics อยู่แล้ว คุณอาจต้องทำการตั้งค่าเพิ่มเติม ตามที่อธิบายไว้ในหัวข้อใช้ Firebase กับการติดแท็ก gtag.js ที่มีอยู่

  1. ตรวจสอบว่าออบเจ็กต์การกำหนดค่า Firebase ในโค้ดมี measurementId ระบบจะสร้างรหัสนี้โดยอัตโนมัติเมื่อคุณเปิดใช้ Analyticsในโปรเจ็กต์ Firebase และลงทะเบียนเว็บแอป และคุณต้องใช้รหัสนี้เพื่อใช้Analytics

    • หากแอปใช้ Firebase Hosting และใช้ URL ที่สงวนไว้สำหรับ Firebase SDK:

      Firebase จะจัดการการกำหนดค่าแอปพลิเคชันของคุณโดยอัตโนมัติ หากต้องการตั้งค่าให้เสร็จสมบูรณ์ ให้เพิ่มสคริปต์จากการ์ด แอปของคุณ ใน การตั้งค่าโปรเจ็กต์ ลงในแท็ก <body> ของแอป หากยังไม่ได้เพิ่ม

    • หากแอปไม่ได้ใช้ URL ที่สงวนไว้: หากคุณกำลังทำงานกับเว็บแอปที่มีอยู่ ให้อัปเดตออบเจ็กต์การกำหนดค่า 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();

ใช้ Firebase กับการติดแท็ก gtag.js ที่มีอยู่

หากก่อนหน้านี้คุณเคยใช้ Google Analytics ในแอปโดยใช้ ข้อมูลโค้ด gtag.js, แอปของคุณอาจต้องมีการตั้งค่าเพิ่มเติมหากคุณวางแผนที่จะทำสิ่งใดสิ่งหนึ่งต่อไปนี้

  • เพิ่มการเรียก Google Analytics จาก Firebase ลงในหน้าเว็บ แต่ก็วางแผนที่จะ ใช้การเรียก gtag() ในหน้าเดียวกันต่อไป
  • ต้องการใช้รหัสการวัดเดียวกันระหว่างการเรียก gtag() โดยตรงและ Google Analytics ข้อมูลที่ส่งไปยัง Firebase

โปรดทำตามขั้นตอนการตั้งค่าเพิ่มเติมต่อไปนี้เพื่อให้แน่ใจว่าบริการทั้งหมดของ Firebase จะใช้เหตุการณ์ได้

  • นำบรรทัด gtag('config', 'GA_MEASUREMENT_ID'); ออก โดยที่ GA_MEASUREMENT_ID คือ measurementId ของ เว็บแอป Firebase หากคุณมีรหัสอื่นๆ สำหรับพร็อพเพอร์ตี้ Analytics อื่นๆ ในหน้าเว็บ คุณไม่จำเป็นต้องนำบรรทัดการกำหนดค่าของรหัสเหล่านั้นออก
  • ตรวจสอบว่าคุณเรียก firebase.analytics() ก่อนที่จะส่งเหตุการณ์ใดๆ ด้วย gtag()

มิเช่นนั้น เหตุการณ์ที่ส่งไปยังรหัสดังกล่าวด้วยการเรียก gtag() จะไม่เชื่อมโยงกับ Firebase และจะใช้กำหนดเป้าหมายในบริการอื่นๆ ของ Firebase ไม่ได้

เริ่มบันทึกเหตุการณ์

หลังจากเริ่มต้นบริการ Analyticsแล้ว คุณจะ เริ่มบันทึกเหตุการณ์ด้วยเมธอด logEvent() ได้

เราขอแนะนำให้ใช้เหตุการณ์บางอย่างกับแอปทั้งหมด ส่วนเหตุการณ์อื่นๆ เราขอแนะนำให้ใช้กับธุรกิจบางประเภท คุณควรส่งเหตุการณ์ที่แนะนำพร้อมกับพารามิเตอร์ที่กำหนดไว้เพื่อให้รายงานมีรายละเอียดมากที่สุด และรับประโยชน์จากฟีเจอร์และการผสานรวมในอนาคตทันทีที่พร้อมให้บริการ ส่วนนี้แสดงการบันทึกเหตุการณ์ที่กำหนดไว้ล่วงหน้า หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการบันทึกเหตุการณ์ โปรดดูที่หัวข้อ บันทึกเหตุการณ์

ตัวอย่างต่อไปนี้แสดงวิธีบันทึกเหตุการณ์ที่แนะนำเพื่อระบุว่าผู้ใช้ได้รับการแจ้งเตือนในแอป

Web

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

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

Web

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

ขั้นตอนถัดไป