Firebase + React 기반 A/B 테스트 실시간 플랫폼 구축 – 로그 수집부터 리포트까지 완성하기

Firebase + React 기반 A/B 테스트 실시간 플랫폼 구축 – 로그 수집부터 리포트까지 완성하기

---

이전 글에서는 광고 수익화를 위한 A/B 테스트 플랫폼 설계를 다루었습니다.
이번 글에서는 Firebase와 React를 이용하여
실시간 A/B 테스트 플랫폼을 직접 구현하는 과정을 소개하겠습니다.

---

✅ 프로젝트 개요

• 목표: Firebase와 React를 사용하여
  실시간 A/B 테스트 관리 대시보드를 구축하고
  광고 클릭률, 전환률, 수익률을 자동 분석
• 주요 기능:
  1. A/B 테스트 그룹 분리
  2. 실시간 클릭/전환 로그 수집
  3. Firebase를 통한 데이터 저장
  4. 실시간 KPI 모니터링 대시보드

---

🔧 1. 프로젝트 구조 설계

디렉토리 구조 설명

/src	React 소스 코드
/src/components	UI 컴포넌트 모음
/src/pages	대시보드 페이지
/src/utils	Firebase 초기화 및 헬퍼 함수
/src/api	Firebase 데이터 관리 함수

---

📌 Firebase 세팅

1. Firebase 프로젝트 생성
   • Firebase Console 접속
   • Firestore 활성화
   • 인증: 이메일/비밀번호 방식 사용
2. 패키지 설치

npm install firebase react-firebase-hooks

---

📁 2. Firebase 초기화 설정

반응형

// src/utils/firebase.ts
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

---

📝 3. A/B 테스트 그룹 나누기

✅ 랜덤 그룹 할당

function getABGroup() {
  const randomNum = Math.random();
  return randomNum < 0.5 ? "A" : "B";
}

✅ 그룹 정보 저장

const group = getABGroup();
localStorage.setItem("adGroup", group);

---

📊 4. 로그 수집 (Firestore 저장)

✅ Firestore 컬렉션 구조

컬렉션명 필드명 설명

logs	userId	사용자 고유 ID
	group	A/B 테스트 그룹
	action	클릭/전환 이벤트 타입
	timestamp	발생 시간
	adId	광고 ID

---

✅ 클릭 이벤트 전송 코드

import { collection, addDoc } from "firebase/firestore";
import { db } from "../utils/firebase";

async function logEvent(userId: string, group: string, action: string, adId: string) {
  try {
    await addDoc(collection(db, "logs"), {
      userId,
      group,
      action,
      adId,
      timestamp: new Date().toISOString(),
    });
    console.log("로그 저장 성공");
  } catch (err) {
    console.error("로그 저장 실패:", err);
  }
}

---

🧭 5. 실시간 대시보드 구현

📊 실시간 로그 조회

import { collection, onSnapshot } from "firebase/firestore";
import { db } from "../utils/firebase";

function useRealtimeLogs() {
  const [logs, setLogs] = useState([]);

  useEffect(() => {
    const unsub = onSnapshot(collection(db, "logs"), (snapshot) => {
      const data = snapshot.docs.map((doc) => doc.data());
      setLogs(data);
    });
    return () => unsub();
  }, []);

  return logs;
}

---

📈 대시보드 컴포넌트

import React from "react";
import { useRealtimeLogs } from "../hooks/useRealtimeLogs";

function Dashboard() {
  const logs = useRealtimeLogs();

  return (
    <div>
      <h2>실시간 A/B 테스트 로그</h2>
      <table>
        <thead>
          <tr>
            <th>User ID</th>
            <th>Group</th>
            <th>Action</th>
            <th>Timestamp</th>
          </tr>
        </thead>
        <tbody>
          {logs.map((log, index) => (
            <tr key={index}>
              <td>{log.userId}</td>
              <td>{log.group}</td>
              <td>{log.action}</td>
              <td>{log.timestamp}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Dashboard;

---

💡 6. 클릭률 계산 함수

function calculateCTR(logs: any[]) {
  const clicks = logs.filter(log => log.action === "click").length;
  const impressions = logs.length;
  return ((clicks / impressions) * 100).toFixed(2);
}

✅ 실시간 로그를 통해 CTR(클릭률) 자동 계산

---

📝 7. Firebase 인증 추가

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
import { app } from "../utils/firebase";

const auth = getAuth(app);

async function login(email: string, password: string) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("로그인 성공:", userCredential.user);
  } catch (err) {
    console.error("로그인 실패:", err);
  }
}

✅ 관리자 페이지 접근을 위한 인증 필수

---

✅ 8. KPI 리포트 자동화

지표 계산 공식

CTR	클릭 수 / 노출 수 × 100
CVR	전환 수 / 클릭 수 × 100
eCPM	수익 / 노출 수 × 1000
수익률	(수익 - 비용) / 비용 × 100

• Firebase Functions를 통해 매일 자정에 KPI 자동 계산
• 결과를 이메일로 발송하거나 대시보드에 표기

---

🧠 오늘의 요약

구성 요소 설명

A/B 테스트 그룹	랜덤 또는 성능 기반으로 그룹 할당
로그 수집 구조	Firestore에 실시간 저장
실시간 대시보드	Firebase onSnapshot 활용
KPI 자동 계산	Firebase Functions로 배치 처리
인증 관리	Firebase Auth 사용

---

📌 다음 글 예고

👉 “Firebase Functions로 자동화된 광고 수익 보고서 만들기 – 실시간 데이터 정리와 알림 발송”

---

 

Firebase A/B 테스트, React 실시간 대시보드, 광고 로그 수집, Firebase Firestore 연동, 실시간 클릭률 분석, Firebase Functions 활용, A/B 테스트 관리, Firebase 실시간 데이터, 광고 수익 분석, React 광고 대시보드

---