React Native FireBase Analytics 사용 준비

이승훈·2023년 9월 16일
1

TIL

목록 보기
29/31
post-thumbnail

들어가며

요즘 읽고 있는 책
그로스해킹이란것에 대해 처음 알게되었다.
책의 절반을 읽어가고있는 지금 책이 시사한다고 느끼는 바는 크게 아래 2가지 이다.

  • 데이터 기반의 근거있는 선택
  • 실험과 결과 그리고 결과로 얻은 인사이트를 통한 다음 실험

같은 말일 수 있지만 아무튼 그렇다.
어떤 선택을 하던 데이터에 근거해서 결정해라.
데이터에 근거할 수 없다면 최대한 합리적인 근거를 마련해라.

중요한 말이다.
이전 직장의 경우 비교적 오래된 큰 기업이라 그랫는지 본인의 의견을 주장할 때 데이터를 근거로 본인 주장의 타당성을 입증하는것이 당연한 문화였다.

이직 후 현 직장은 아직 작은 스타트업이기 때문인지 주장의 근거로서 데이터를 제시하거나 다른 선례에 근거하는것이 아닌 비교적 주관적인 이유를 들이미는 경우가 많다.

이래선 안된다고 생각한다.
나는 지금 내가 개발하고 있는 프로덕트가 너무 소중하다.
조금씩 나오고있는 새싹같은 유저들의 반응 감사의 말, 질책의 말 모두 너무 감사하다.

이러한 프로덕트를 변경함에 있어 개인의 주관에 근거한 주장들이 난무하는것을 더 이상 두고볼 순 없다.

데이터에 근거한 문화를 만들기 위해선 조회할 수 있는 데이터가 필요하다.
바로 그러한 데이터를 만들기 위한 작업이다.

analytics().LogEvent

개인이 이벤트를 커스터마이징하여 발생시킬 수 있다.
제일 자유롭게 사용할 수 있는 이벤트 발생 메소드이다.

사용법은 아래와 같다.

logEvent(name: string, params?: undefined | { [key: string]: any }, options?: AnalyticsCallOptions): Promise<void>;

사용예시를 아라보자

analytics().logEvent('login', { method: 'email' });

위와 같은 코드로 이벤트를 발생시킬 수 있다.
예를들면 로그인 버튼을 눌렀을 때 위와같은 login Event를 발생시킬 수 있고 각 버튼 별로
params의 method에 다른 값을 넣어줌으로서(Ex. NAVER, GOOGLE...)
유저가 많이 사용하는 로그인 방법을 추적할 수 있게 된다.

analytics().logScreenView

위의 analytics.logEvent() 처럼 이름과 데이터를 직접 설정하여 커스텀 이벤트를 발생시킬수도 있지만 기본적으로 제공해주는 이벤트들도 많다.
logScreenView 이벤트가 바로 그 중 하나다.

같은 상황이라면 기본 이벤트를 사용하는게 커스텀 이벤트를 사용하는것 보다 좋고 그 이유는 아래의 2가지 이다.

  • 이벤트 유형에 따라 맞춤 보고서가 제공됨
  • 프로젝트당 고유 parameter를 최대 50개까지만 설정할 수 있음

커스텀 이벤트를 남용하면 Parameter 개수제한에 걸려 애써 수집한 데이터를 날릴 수도 있다.
그러니 기본 이벤트를 사용하는게 좋고 logScreenView의 사용법에 대해 아라보자.

React Native는 기본적으로 하나의 Activity/View Controller에서 동작하기에 native Firebase SDK가 자동으로 screen_view 이벤트를 기록하지 못한다.

따라서 별도의 코드를 작성해 screen을 tracking 해야 한다.

import analytics from '@react-native-firebase/analytics';
import { NavigationContainer } from '@react-navigation/native';

<NavigationContainer
  ref={navigationRef}
  onReady={() =>
    (routeNameRef.current = navigationRef.current.getCurrentRoute()?.name)
  }
  onStateChange={() => {
    const previousScreenName = routeNameRef.current;

    const currentRoute = navigationRef.current.getCurrentRoute();

    const currentScreenName =  `${currentRoute?.name}_${Object.values(currentRoute?.params || {}).join('/')}`

    if (currentRoute && previousScreenName !== currentScreenName) {
      analytics().logScreenView({
        screen_name: currentScreenName,
        screen_class: currentRoute.name,
      });
    }

    // Save the current route name for later comparision
    routeNameRef.current = currentScreenName;
  }}
>

Firebase는 페이지 클래스와 이름을 별개로 수집/관리하기 때문에 위처럼 screenName과 screenClass를 각각 입력해주면 Funnel 설정 등에서 편하게 사용할 수 있다.

코드 예시 참고
React-Native Firebase Analytics 설정 팁!(작성자 : Choi su Min)

profile
Beyond the wall

0개의 댓글