Firebase Analytics: 사용자 마음속으로! 🚀 (Next.js 기준)

데이터 기반 의사 결정, 서비스 개선의 핵심이죠? 

사용자 행동 분석, 그중에서도 이벤트 추적은 매우 중요한 역할을 합니다. 

오늘은 Firebase Analytics를 활용하여 우리 서비스에 이벤트를 심는 방법에 대해 빠르게, 하지만 꼼꼼하게 알아보겠습니다. 

특히 Next.js 환경에서 어떻게 구현하는지 구체적인 코드 예시와 함께 공유드릴게요.

 

firebase 프로젝트 생성 방법은 이미 많은 블로그에서 자세히 다루고 있으므로, 여기서는 간략하게 넘어가겠습니다.

(혹시 Firebase 프로젝트가 없으신 분들은 Firebase 공식 문서를 참고해 주세요.) Firebase 이벤트 추적, 왜 중요할까요?

 

🤔 Firebase 이벤트를 추적하는 것은 우리 서비스의 보물 지도를 만드는 것과 같습니다.

이벤트를 통해 다음과 같은 소중한 정보들을 얻을 수 있습니다.

사용자 관심사 파악: 사용자들이 우리 서비스의 어떤 기능에 관심이 있는지 정확히 알 수 있습니다.

 

예를 들어, 특정 버튼을 클릭하는 횟수나 특정 페이지를 방문하는 횟수를 통해 어떤 콘텐츠가 사용자들에게 인기가 있는지 파악할 수 있습니다. 서비스 개선 방향: 수집된 데이터를 분석하여 서비스 개선 방향을 설정할 수 있습니다.

 

예를 들어, 특정 기능 사용률이 낮다면, 해당 기능의 사용성을 개선하거나 다른 기능으로 대체하는 것을 고려해 볼 수 있습니다. 마케팅 효율 측정: 어떤 마케팅 캠페인이 사용자를 우리 서비스로 유입시키는 데 효과적인지 측정할 수 있습니다.

 

 

Firebase 이벤트 추적, Next.js에서 쉽게 구현하기! 💻

이제 실제로 Next.js 프로젝트에서 Firebase 이벤트를 추적하는 방법에 대해 알아보겠습니다. 코드는 매우 간단하지만, 핵심 내용이 모두 담겨있으니 차근차근 따라 해 보세요!

일단 폴더 하나를 생성합니다. firebase

파일 두개를 생성합니다. firebase/init.ts, firebase/logEvent.ts

 

1단계: Firebase SDK 초기화 설정 (firebase/init.ts)

// init.ts

import { initializeApp } from "firebase/app";
import { getAnalytics, isSupported } from "firebase/analytics";
import type { Analytics } from "firebase/analytics";

export const initFirebase = () => {};

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  sotrageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);

export let analytics: Analytics | null = null;

if (typeof window !== "undefined") {
  isSupported().then((supported) => {
    if (supported && app) {
      console.log("Firebase Analytics is supported in this environment");
      analytics = getAnalytics(app);
    } else {
      console.log("Firebase Analytics is not supported in this environment");
    }
  });
}

코드 설명:

• Firebase 설정 값 (apiKey, authDomain 등)은 .env 파일에 저장하고, process.env를 통해 가져오는 것이 일반적입니다.
• initializeApp 함수를 사용하여 Firebase 앱을 초기화합니다.
• isSupported 함수를 사용하여 브라우저 환경에서 Firebase Analytics를 지원하는지 확인하고, 지원하는 경우에만 getAnalytics 함수를 호출하여 analytics 객체를 초기화합니다.
• 만약 서버 환경에서 이 코드가 실행되는 경우에는 window 객체가 존재하지 않으므로, Firebase Analytics 초기화를 건너뛰도록 합니다.

 

2단계: 이벤트 로깅 함수 작성 (firebase/logEvent.ts)

// logEvent.ts

import { logEvent } from "firebase/analytics";
import { analytics } from "./init";

export enum EventName {
  BUTTON_CLICK = "button_click",
}

interface EventParams {
  purpose: string;
  category?: string;
  [key: string]: string | number | boolean | undefined;
}

export const FIREBASE_EVENT = {
  PURPOSE: {
    GET_STARTED: "get_started",
  },
  CATEGORY: {},
};

export const firebaseLogging = (
  eventName: EventName,
  eventParams: EventParams
): void => {
  if (analytics) {
    logEvent(analytics, eventName, eventParams);
    return;
  }

  console.log(`Firebase Analytics is not supported`);
};

코드 설명:

• EventName enum을 사용하여 이벤트 이름을 관리합니다. 이는 오타를 방지하고 코드 가독성을 높이는 데 도움이 됩니다.
• EventParams 인터페이스를 사용하여 이벤트 매개변수의 타입을 정의합니다. 이를 통해 매개변수 타입 오류를 사전에 방지할 수 있습니다.
• FIREBASE_EVENT 객체를 사용하여 이벤트 매개변수 값들을 관리합니다.
• firebaseLogging 함수는 analytics 객체가 존재할 때만 logEvent 함수를 호출합니다. 서버 환경에서는 analytics 객체가 null이므로, logEvent 함수는 실행되지 않습니다.

다들 아시겠지만 firebaseLogging을 호출해서 이벤트를 심으면 끝입니다.

 

firebase event를 등록하는 것은 간단하지만 강력한 기능입니다.

유저들이 어떤것에 관심있는지 알 수 있으며, 

관심에 집중할 수 있으면 서비스의 개선방향도 어느정도 유추가능하기 때문입니다.

 

저도 유저의 마음을 잘 아는 개발자가 되고 싶네요~

 

감사합니다.