Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

Google 애널리틱스 시작하기

이 빠른 시작에서는 앱에 Google 애널리틱스를 추가하고 이벤트 로깅을 시작하는 방법을 보여줍니다.

Google Analytics는 웹 앱에 대한 사용 및 행동 데이터를 수집합니다. SDK는 두 가지 기본 유형의 정보를 기록합니다.

  • 이벤트 : 사용자 작업, 시스템 이벤트 또는 오류와 같이 앱에서 일어나는 일입니다.

  • 사용자 속성 : 언어 기본 설정 또는 지리적 위치와 같은 사용자 기반의 세그먼트를 설명하기 위해 정의하는 속성입니다.

Analytics는 일부 이벤트사용자 속성 을 자동으로 기록합니다. 활성화하기 위해 코드를 추가할 필요가 없습니다.

시작하기 전에

아직 추가하지 않은 경우 JavaScript 프로젝트에 Firebase를 추가 하고 Firebase 프로젝트에서 Google Analytics가 활성화되어 있는지 확인합니다.

  • 새 Firebase 프로젝트를 생성하는 경우 프로젝트 생성 워크플로 중에 Google 애널리틱스를 활성화합니다.

  • Google 애널리틱스가 활성화되지 않은 기존 Firebase 프로젝트를 사용하는 경우 통합 탭 > 프로젝트 설정 으로 이동하여 활성화합니다.

프로젝트에서 Google 애널리틱스를 사용 설정하면 Firebase 웹 앱이 앱 + 웹 속성 과 연결된 Google 애널리틱스 데이터 스트림에 연결됩니다.

앱에 Analytics SDK 추가

웹 애플리케이션이 호스팅되는 방식에 따라 구성이 자동으로 처리되거나 Firebase 구성 객체 를 업데이트해야 할 수 있습니다. 웹 앱에서 이미 Google 애널리틱스를 사용하는 경우 기존 gtag.js 태깅과 함께 Firebase 사용 에 설명된 추가 설정을 수행해야 할 수 있습니다.

  1. 코드의 Firebase 구성 객체에 measurementId 가 포함되어 있는지 확인하세요. 이 ID는 Firebase 프로젝트에서 Analytics를 활성화하고 웹앱을 등록할 때 자동으로 생성되며 Analytics를 사용하기 위해 필요합니다.

    • 앱이 Firebase 호스팅 사용하고 Firebase SDK용으로 예약된 URL 을 사용하는 경우 :

      Firebase는 애플리케이션 구성을 자동으로 처리합니다. 설정을 완료하려면 프로젝트 설정내 앱 카드에 있는 스크립트를 앱의 <body> 태그에 추가합니다(아직 추가하지 않은 경우).

    • 앱에서 예약된 URL을 사용하지 않는 경우 : 기존 웹 앱으로 작업하는 경우 코드에서 Firebase 구성 객체를 업데이트하여 measurementId ID 필드가 있는지 확인합니다. config 개체는 다음 예와 유사해야 합니다.

      // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
      const firebaseConfig = {
        apiKey: "AIzaSyCGQ0tYppWFJkuSxBhOpkH0xVDmX245Vdc",
        authDomain: "project-id.firebaseapp.com",
        databaseURL: "https://project-id.firebaseio.com",
        projectId: "project-id",
        storageBucket: "project-id.appspot.com",
        messagingSenderId: "637908496727",
        appId: "2:637908496727:web:a4284b4c99e329d5",
        measurementId: "G-9VP01NDSXJ"
      };
      
  2. 아직 설치하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화 합니다.

  3. Analytics JS SDK를 추가하고 Analytics를 초기화합니다.

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


// Initialize Analytics and get a reference to the service
const analytics = firebase.analytics();

기존 gtag.js 태깅과 함께 Firebase 사용

이전에 gtag.js 스니펫 을 사용하여 앱에서 Google 애널리틱스를 실행했다면 다음 중 하나를 수행하려는 경우 앱에 추가 설정이 필요할 수 있습니다.

  • Firebase의 Google Analytics 호출을 페이지에 추가하되 동일한 페이지에서 직접 gtag() 호출을 계속 사용할 계획입니다.
  • 직접 gtag() 호출과 Firebase로 전송되는 Google 애널리틱스 데이터 간에 동일한 측정 ID를 사용하고 싶습니다.

모든 Firebase 서비스에서 이벤트를 사용할 수 있도록 하려면 다음 추가 설정 단계를 완료하세요.

  • gtag('config', ' GA_MEASUREMENT_ID '); 행을 제거하십시오. 여기서 GA_MEASUREMENT_ID 는 Firebase 웹 앱의 measurementId ID입니다. 페이지에 다른 Analytics 속성에 대한 다른 ID가 있는 경우 해당 구성 행을 제거할 필요가 없습니다.
  • gtag() 를 사용하여 이벤트를 보내기 전에 gtag() firebase.analytics() 호출해야 합니다.

그렇지 않으면 gtag() 호출을 통해 해당 ID로 전송된 이벤트가 Firebase와 연결되지 않고 다른 Firebase 서비스에서 타겟팅할 수 없습니다.

이벤트 로깅 시작

Analytics 서비스 를 초기화한 후 logEvent() 메서드를 사용하여 이벤트 기록을 시작할 수 있습니다.

특정 이벤트는 모든 앱에 권장됩니다 . 다른 것들은 특정 비즈니스 유형이나 업종에 권장됩니다. 보고서에서 사용 가능한 최대한의 세부 정보를 확인하고 향후 기능 및 통합이 제공되는 대로 이점을 누리려면 사전 정의된 매개변수와 함께 제안된 이벤트를 보내야 합니다. 이 섹션에서는 미리 정의된 이벤트를 기록하는 방법을 보여줍니다. 이벤트 기록에 대한 자세한 내용은 이벤트 기록 을 참조 하십시오 .

다음 예는 사용자가 앱에서 알림을 수신했음을 나타내기 위해 권장 이벤트를 기록하는 방법을 보여줍니다.

Web version 9

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

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

Web version 8

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

다음 단계