이 빠른 시작에서는 앱에 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 호스팅을 사용하고 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를 추가하고 애널리틱스를 초기화합니다.
웹 모듈식 API
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);
웹 네임스페이스화된 API
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();
기존 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()
메서드를 사용하여 이벤트 로깅을 시작할 수 있습니다.
모든 앱에 권장되는 특정 이벤트가 있으며 특정 비즈니스 유형이나 카테고리에 권장되는 이벤트가 있습니다. 추천 이벤트를 사전 정의된 매개변수와 함께 전송해야 합니다. 이렇게 하면 보고서에 세부정보가 최대한 포함되고 향후 기능 및 통합을 즉시 사용할 수 있습니다. 이 섹션에서는 사전 정의된 이벤트 로깅을 보여줍니다. 이벤트 로깅에 대한 자세한 내용은 이벤트 로깅을 참조하세요.
다음 예시에서는 사용자가 앱에서 알림을 수신했음을 나타내는 추천 이벤트를 로깅하는 방법을 보여줍니다.
웹 모듈식 API
import { getAnalytics, logEvent } from "firebase/analytics"; const analytics = getAnalytics(); logEvent(analytics, 'notification_received');
웹 네임스페이스화된 API
firebase.analytics().logEvent('notification_received');
다음 단계
- DebugView를 사용하여 이벤트를 확인합니다.
- Firebase Console에서 데이터를 탐색합니다.
- 이벤트 및 사용자 속성에 대한 가이드를 살펴봅니다.
- BigQuery로 데이터를 내보내는 방법을 알아봅니다.