Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기

Google 애널리틱스 시작하기

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

Google 애널리틱스는 웹 앱의 사용량과 행동 데이터를 수집합니다. 이 SDK는 다음 두 가지 기본 유형의 정보를 로깅합니다.

  • 이벤트: 사용자 행동, 시스템 이벤트, 오류 등 앱에서 발생하는 상황입니다.

  • 사용자 속성: 사용자층을 나눈 세그먼트를 기술하고자 개발자가 정의하는 언어 환경설정, 지리적 위치 등의 속성입니다.

애널리틱스는 몇 가지 이벤트와 사용자 속성을 자동으로 로깅하며 별도의 코드 없이 이러한 속성을 사용 설정할 수 있습니다.

시작하기 전에

자바스크립트 프로젝트에 Firebase를 추가하지 않은 경우 추가하여 Firebase 프로젝트에서 Google 애널리틱스를 사용 설정해야 합니다.

  • 새 Firebase 프로젝트를 만드는 경우 프로젝트 생성 워크플로 중에 Google 애널리틱스를 사용 설정합니다.

  • Google 애널리틱스가 사용 설정되지 않은 기존 Firebase 프로젝트를 사용하는 경우 > 프로젝트 설정의 통합 탭에서 Google 애널리틱스를 사용 설정할 수 있습니다.

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

앱에 애널리틱스 SDK 추가

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

  1. 코드의 Firebase 구성 객체에 measurementId가 포함되어 있는지 확인합니다. 이 ID는 Firebase 프로젝트에서 애널리틱스를 사용 설정하고 웹 앱을 등록할 때 자동으로 생성되며 애널리틱스를 사용하는 데 필요합니다.

    • 앱에서 Firebase 호스팅을 사용하고 Firebase SDK에 예약된 URL을 사용하는 경우 다음 안내를 따르세요.

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

    • 앱에서 예약된 URL을 사용하지 않는 경우: 기존 웹 앱으로 작업하는 경우 measurementId 필드가 포함되도록 코드에서 Firebase 구성 객체를 업데이트합니다. 구성 객체는 다음 예시와 유사합니다.

      // 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. 애널리틱스 JS SDK를 추가하고 애널리틱스를 초기화합니다.

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 애널리틱스 호출을 페이지에 추가하고 같은 페이지에서 직접 gtag() 호출을 계속 사용하려고 합니다.
  • 직접 gtag() 호출과 Firebase로 전송된 Google 애널리틱스 데이터 간에 동일한 측정 ID를 사용하려고 합니다.

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

  • gtag('config', 'GA_MEASUREMENT_ID'); 줄을 삭제합니다. 여기서 GA_MEASUREMENT_ID는 Firebase 웹 앱의 measurementId입니다. 페이지의 다른 애널리틱스 속성에 다른 ID가 있으면 해당 구성 줄을 삭제하지 않아도 됩니다.
  • gtag()로 이벤트를 전송하기 전에 firebase.analytics()를 호출해야 합니다.

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

이벤트 로깅 시작

애널리틱스 서비스를 초기화한 후 logEvent() 메서드를 사용하여 이벤트 로깅을 시작할 수 있습니다.

모든 앱에 권장되는 특정 이벤트가 있으며 특정 비즈니스 유형이나 카테고리에 권장되는 이벤트가 있습니다. 추천 이벤트를 사전 정의된 매개변수와 함께 전송해야 합니다. 이렇게 하면 보고서에 세부정보가 최대한 포함되고 향후 기능 및 통합을 즉시 사용할 수 있습니다. 이 섹션에서는 사전 정의된 이벤트 로깅을 보여줍니다. 이벤트 로깅에 대한 자세한 내용은 이벤트 로깅을 참조하세요.

다음 예시에서는 사용자가 앱에서 알림을 수신했음을 나타내는 추천 이벤트를 로깅하는 방법을 보여줍니다.

Web version 9

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

const analytics = getAnalytics();
logEvent(analytics, 'notification_received');
analytics_log_event.js

Web version 8

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

다음 단계