이 빠른 시작에서는 앱에 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 호스팅 을 사용하고 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');
Web version 8
firebase.analytics().logEvent('notification_received');
다음 단계
- DebugView 를 사용하여 이벤트를 확인하십시오.
- Firebase 콘솔 에서 데이터를 탐색합니다.
- 이벤트 및 사용자 속성에 대한 가이드를 살펴보세요.
- 데이터를 BigQuery로 내보내는 방법을 알아보세요.