Google 애널리틱스 시작하기

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

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

이벤트 : 사용자 작업, 시스템 이벤트 또는 오류와 같이 앱에서 발생하는 것입니다.
사용자 속성 : 언어 기본 설정 또는 지리적 위치와 같은 사용자 기반 세그먼트를 설명하기 위해 정의하는 속성입니다.

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

시작하기 전에

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

새 Firebase 프로젝트를 만드는 경우 프로젝트 생성 워크플로 중에 Google 애널리틱스를 활성화하세요.
Google 애널리틱스가 활성화되지 않은 기존 Firebase 프로젝트를 사용하는 경우 > 프로젝트 설정 의 통합 탭으로 이동하여 활성화하세요.

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

앱에 애널리틱스 SDK 추가

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

코드의 Firebase 구성 객체에 measurementId 가 포함되어 있는지 확인하세요. 이 ID는 Firebase 프로젝트에서 애널리틱스를 활성화하고 웹앱을 등록할 때 자동으로 생성되며 애널리틱스를 사용하기 위해 필요합니다.
참고: Firebase JavaScript SDK v7.20.0 이상을 사용하는 앱의 경우 Firebase는 앱이 애널리틱스를 초기화할 때 measurementId 를 동적으로 가져옵니다. 구성 개체에 이 ID를 포함하는 것은 선택 사항이지만 동적 가져오기가 실패하는 드문 경우에 대체 역할을 합니다.
- 앱에서 Firebase 호스팅 을 사용하고 Firebase SDK용으로 예약된 URL 을 사용하는 경우 :
  Firebase는 애플리케이션 구성을 자동으로 처리합니다. 설정을 완료하려면 프로젝트 설정 에 있는 내 앱 카드의 스크립트를 앱의 <body> 태그에 추가하세요(아직 추가하지 않은 경우).
- 앱에서 예약된 URL을 사용하지 않는 경우 : 기존 웹 앱으로 작업하는 경우 코드에서 Firebase 구성 객체를 업데이트하여 measurementId 필드가 있는지 확인하세요. 구성 개체는 다음 예제와 유사해야 합니다.
```
// 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를 초기화 합니다.
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 애널리틱스 호출을 페이지에 추가하지만 동일한 페이지에서 직접 gtag() 호출을 계속 사용할 계획입니다.
직접 gtag() 호출과 Firebase로 전송되는 Google 애널리틱스 데이터 간에 동일한 측정 ID를 사용하려고 합니다.

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

gtag('config', ' GA_MEASUREMENT_ID '); 행을 제거합니다. 여기서 GA_MEASUREMENT_ID 는 Firebase 웹 앱의 measurementId 입니다. 페이지에 다른 애널리틱스 속성에 대한 다른 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');analytics_log_event.js

Web version 8

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

다음 단계

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