Firebase Analytics 연동: A/B 테스트 커스텀 이벤트 통계

2024. 12. 6. 17:45·Development Tools/Firebase

저번 A/B Testing 목표에서 활성화 이벤트를 screen_view로 잘못 설정했었다.

이번에 Firebase Analytics 연동해서 컴포넌트를 클릭했을 때 Dashboard 집계가 되는 커스텀 이벤트를 만들었다. 

Firebase Analytics 연동하기

A/B 테스트 실험 목표에서 Firebase Analytics의 대시보드에서 활성화 이벤트를 설정할 때,

Firebase에서 기본 제공하는 이벤트 중 기록이 많이 잡힌 이벤트만 선택할 수 있었다.

그래서 custom_click이라는 새 이벤트를 만들어 통계를 기록하기로 했다.

 

1) SDK 버전에 맞는 패키지 다운받기

프로젝트 SDK 버전 16.5.0에 맞춰 설치했다.

npm install @react-native-firebase/analytics

 

2) logEvent 작성해서 이벤트 보내기

클릭 이벤트와 함께 기록할 파라미터로 컴포넌트 이름과 게시판 ID를 추가했다.

Why?  Firebase A/B 테스트 실험에서 자동으로 데이터를 분류해주더라도, 이후 Analytics Dashboard에서 별도 분석을 더 상세히 하기 위해 필요하다고 판단했다.

/*글쓰기 버튼*/
{config?.componentToUse === 'floating_button' && (
          <FloatingWriteButton
            onPress={async () => {
              await analytics().logEvent('custom_click', {
                component: 'floating_button',
                boardId: route.params.boardId.toString(),
              });
              console.log('Floating button clicked');
              navigation.navigate('PostWriteScreen', {
                boardId: route.params.boardId,
                contentType: boardInfo?.contentType,
              });
            }}
          />
        )}
/*글 박스*/
<View style={{backgroundColor: 'white'}}>
              {!isLoading && config?.componentToUse === 'writing_box' && (
                <PostWriteBCase
                  navigation={navigation}
                  route={route}
                  contentType={boardInfo?.contentType || 'TYPE1'}
                  hasTitle={boardDetail?.hasTitle}
                  onPress={async () => {
                    console.log('Writing box clicked');
                    await analytics().logEvent('custom_click', {
                      component: 'writing_box',
                      boardId: route.params.boardId.toString(),
                    });
                  }}
                />
              )}
            </View>

이러고 통계에 잡히면 바로 연동 완료일 거 같았다. 근데,


문제 : 통계 미집계

애뮬레이터에서 컴포넌트를 여러 번 클릭하여 이벤트 전송 → Firebase Analytics 대시보드에 집계X

Firebase로 이벤트가 전송이 안되나?

이벤트 전후로 로그 찍기 →  로그가 찍히는 걸 보면 정상 동작이 분명했다.

여전히 통계에는 0으로 표기되고 있었다. 

3시간을 헤매어 깨달은 사실 : 

1) Firebase DebugView로 실시간 확인

Firebase에서 DebugView라는 실시간 디버깅 기능을 제공하여,

이 기능으로 이벤트가 Firebase에 전송되고 있는지 실시간으로 확인할 수 있다. (로그 찍는 것보다 분명한..)

 

2) 24~48시간 대기

Firebase 문서에 따르면, Analytics Dashboard 집계는 24~48시간이 소요될 수 있는 점이다.
그래서 이벤트가 전송이 되었어도 나중에 확인할 수 있다는 것이다. (너무 희망고문이라고 생각했다..)


해결하기

1. Firebase DebugView로 실시간 확인

DebugView 설정 과정

1) Android Studio의 ADB 명령어로 Firebase Analytics와 앱 디버깅을 연동한다.

adb shell setprop debug.firebase.analytics.app <YOUR_APP_PACKAGE_NAME>

2) 앱을 재실행한 뒤 Firebase 콘솔에서 연동된 기기를 확인했다. (무조건 재실행해야 로그가 들어온다..)

3) 디버깅 모드에서 이벤트를 트리거 → custom_click 이벤트가 들어오는지 실시간 확인

아주 잘 들어오는 닭똥 같은 이벤트들
아주 잘 들어온 추가 설정한 파라미터

But, 대시보드 통계에는 여전히 집계되지 않았다.

 

2. 24~48시간 대기와 데이터 축적

분명 통계 집계는 24~48시간이 소요될 수 있다고 했는데, 많은 블로그에는 바로 통계 집계가 되는 스크린샷을 봐서 그런지

비정상적인 것 같았다. 며칠 후에야 대시보드에서 데이터를 확인했다는 블로그를 보고 나서야, 마음이 놓였다.

그 전까지는 충분한 데이터량이 쌓여야 집계가 된다고 하니, 통계를 확인하기 위해 100번 이상 클릭하며 데이터를 수집했다.
캘린더에 알림을 설정하고, 하루 뒤 통계를 확인하기로 했다.


집계 성공

다음날, Firebase Analytics 대시보드에서 144번의 custom_click 이벤트가 집계된 것을 확인했다.

너를 보려고 2일 간 생고생을..

그리고 새로운 실험을 생성하고 목표>활성화 이벤트 드롭박스를 눌러보니 여기에도 custom_click이 표기되었다!

기본 이벤트 사이에 낀 커스텀 이벤트

 

리브랜딩 프로젝트를 통해 Firebase의 새로운 기능을 직접 사용하며 많은 것을 배운 한 주였다.

DebugView 활용하기, 통계를 보기 위한 데이터를 축적하는 노력, 그리고 인내심과 끈기..

'Development Tools > Firebase' 카테고리의 다른 글

Firebase Remote Config와 A/B Testing으로 UI/UX 최적화 도전기  (2) 2024.12.02
'Development Tools/Firebase' 카테고리의 다른 글
  • Firebase Remote Config와 A/B Testing으로 UI/UX 최적화 도전기
gitit
gitit
짬내서 쓰는 프론트엔드와 기술 메모 공간
  • gitit
    깃잇-gitit
    gitit
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Coding Test
        • Programmers
        • BackJoon
      • Development Tools
        • Firebase
        • Git
        • Monorepo
      • Programming
        • JavaScript
        • React
        • React-Native
      • etc.
        • GeekNews
        • Blockchain
      • Technical Interview
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    백준
    코딩
    javascript
    파이썬
    코딩테스트
    독학
    BFS
    긱뉴스
    기본문법
    node.js
    FE
    kakao
    자바스크립트
    modal
    frontend
    Firebase
    프론트엔드
    매일메일
    리액트
    코테
    React
    기술 질문
    알고리즘
    파이어베이스
    js
    styled-components
    geeknews
    프로그래머스
    개발
    AWS
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
gitit
Firebase Analytics 연동: A/B 테스트 커스텀 이벤트 통계
상단으로

티스토리툴바