eatthefrog

React-Native - Firebase Analytics 도입하기 본문

프론트엔드 노트

React-Native - Firebase Analytics 도입하기

eater_forg 2025. 11. 19. 17:07

 

요구사항 정리

분석 요건은 앱 전반의 UX 개선과 비즈니스 지표 분석에 직접적으로 연관된 기능이다.

1. 광고 수입 발생 시 해당 수익을 어떤 사용자가 만들었는지 매칭

2. 각 화면에서 사용자가 얼마나 머무르는지 측정

 

구현 전략

1. 광고 수익 이벤트 발생 -> 회원 정보와 결합 -> Firebase Analytics로 로깅
2. 네비게이션컨테이너 레벨에서 전역 화면 전환을 감지하고, 진입/이탈 시각을 기록해 체류시간을 계산한 뒤 Firebase에 로깅

 

1. 패키지 설치 : @react-native-firebase/analytics

고려되었던 후보군

1. Sentry :  it’s mainly for error tracking, it may not meet our marketing needs for user behavior tracking
2. Mixpanel 
3. Amplitude
4. firebase : easy/cheap/free

 

 

2. 컴포넌트 수정 (로깅 로직 추가)

 

3. 테스트 하기 : 디버그 모드에서 이벤트 확인

iOS (React Native)

Xcode에서:

Product > Scheme > Edit Scheme
Arguments 탭 선택
Arguments Passed On Launch에 추가: -FIRDebugEnabled

 

AOS(React Native)

# 디버그 모드 활성화
adb shell setprop debug.firebase.analytics.app [패키지명]

# 예시
adb shell setprop debug.firebase.analytics.app com.yourapp

# 확인
adb logcat -v time -s FA FA-SVC

 

  1. Firebase Console → Analytics → DebugView 메뉴 선택
  2. 디버그 모드가 활성화된 디바이스에서 앱 실행
  3. 30분 이내 이벤트가 표시됨 (최대 1분 지연)

 

4. 테스트가 끝난후

  • FIRDebugEnabled 같은 Xcode Scheme 설정은 개발 중에만 일시적으로 쓰는 플래그라서, 테스트가 끝났다면 지우고 커밋하는 게 좋아요. 계속 남겨두면 DebugView에만 이벤트가 찍히고, 팀원이 같은 Scheme로 실행할 때도 무조건 디버그 모드가 켜져서 혼동될 수 있어요.
  • 그러니 커밋 전에 Product → Scheme → Edit Scheme → Run → Arguments Passed On Launch에 추가했던 -FIRDebugEnabled는 제거하세요. 필요할 때 다시 잠깐 추가하면 됩니다.

Firebase Analytics  사용 방법