Google 애널리틱스 시작하기

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

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

이벤트: 사용자 행동, 시스템 이벤트, 오류 등 앱에서 발생하는 상황입니다.
사용자 속성: 사용자층을 나눈 세그먼트를 기술하고자 개발자가 정의하는 언어 환경설정, 지리적 위치 등의 속성입니다.

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

시작하기 전에

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

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

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

앱에 애널리틱스 SDK 추가

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

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

참고: Firebase 자바스크립트 SDK v7.20.0 이상을 사용하는 앱의 경우 앱이 애널리틱스를 초기화할 때 Firebase에서 measurementId를 동적으로 가져옵니다. 구성 객체에 이 ID를 지정하는 것은 선택사항이지만 동적 가져오기가 실패하는 경우 드물게 대체 역할을 수행합니다.
- 앱에서 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"
};
```
아직 진행하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화합니다.
애널리틱스 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

다음 단계

DebugView를 사용하여 이벤트를 확인합니다.
Firebase Console에서 데이터를 탐색합니다.
이벤트 및 사용자 속성에 대한 가이드를 살펴봅니다.
BigQuery로 데이터를 내보내는 방법을 알아봅니다.