[react-native] Google Analytics & Firebase 적용 기술 검토

1. 우리 제품이 필요로 하는 기능은 무엇인가?

1. 앱 사용자가 어떤 스크린에 제일 많이 머무르는지 수집하기 위함입니다.

2. Firebase 와 연동하여 사용합니다.

2. Google Analytics 란 무엇인가?

https://analytics.google.com/analytics/web/provision/?hl=ko&pli=1#/provision

2.1. Google Analytics 란?

웹사이트 방문자의 데이터를 수집해서 분석함으로써 온라인 비즈니스의 성과를 측정하고 개선하는 데 사용하는 웹로그분석 도구입니다.

2.2. 어떤 기능이 있는가?

맞춤 보고서

구글에서 기본적으로 제공하는 표준보고서 이외에 분석하고자 하는 데이터(측정기준과 측정항목)를 선택하여 나만의 맞춤 보고서(custom reports)를 쉽게 만들어서 활용 가능하다.

세그먼트 분석

시스템 세그먼트 및 맞춤 세그먼트 기능을 사용하여 심층적인 데이터 분석이 가능하다.

화면 추적

화면 전환을 추적하고 현재 화면에 관한 정보를 이벤트에 첨부하므로 사용자 참여와 같은 측정항목이나 사용자 행동을 화면별로 추적할 수 있습니다. 이 데이터 수집은 대부분 자동으로 이루어지지만 수동으로 화면 조회수를 로깅할 수도 있습니다.

디버깅 이벤트

DebugView를 사용하면 개발 기기에서 앱이 기록하는 원시 이벤트 데이터를 거의 실시간으로 확인할 수 있습니다.

Firebase 와 함께 사용해서 사용자 맞춤 앱을 제공할 때

이 글을 참고하자

애널리틱스는 Firebase 기능 전체에 통합되며 Firebase SDK를 사용하여 정의할 수 있는 최대 500개의 고유한 이벤트에 대한 무제한 보고를 제공합니다.

Remote Config 와 GA 를 모두 포함하는 앱을 빌드하면, 앱 사용자를 더욱 자세히 파악하면서도 사용자에 맞춰 앱을 맞춤설정 할 수가 있게 된다.

2.3. 어떤 항목을 사용하는가?

저희가 사용하고자 하는 Firebase Analytics는 정보를 ‘사용자 속성’과 ‘이벤트’ 두 가지 종류로 구분합니다.

홍길동 씨가 오늘 회원가입을 했다.

여기서 ‘홍길동’은 사용자 속성에, ‘회원가입’은 이벤트에 해당합니다.

사용자 속성

사용자 고유의 속성을 붙일 수 있습니다. 회원 구분, 연령대 등의 각 회원 고유의 정보를 붙여주면 됩니다.

이벤트와 달리 지속적으로 정보가 유지되고 어느 이벤트에나 붙여 읽을 수 있습니다.

이벤트

Custom Event : 일반적으로 우리가 원하는 이벤트 입력을 얘기합니다.

자동 수집되는 이벤트 : 별도로 추가 설정하지 않아도 자동으로 수집되는 이벤트들 입니다. 앱 제거나 업데이트, 스크린 뷰 등의 이벤트가 포함되어 있습니다. ( 자세한 내용은 도움말을 참고 )

app_remove 이벤트는 iOS에서 수집되지 않습니다.

Event methods list 링크

2.4. 어떻게 사용하는가?

react native firebase analytics 설치 방법

react native firebase analytics Screen Tracking 예제

2.5. 장점

무료 서비스

구글 계정만 있다면 자신의 사이트에 무료로 구글 애널리틱스를 설치해서 데이터를 확인할 수 있습니다.

다른 프로그램들과 호환가능

Firebase remote config, Google Data Studio, Google Optimize, Google Tag Manager, 이외의 다른 클라우드 서비스와도 무료로 함께 사용이 가능합니다.

구글의 광고서비스와 연동

구글 애널리틱스에서 사용자의 특정 행동을 조건으로 걸어서 광고계정에서 리마케팅 캠페인을 만들 수 있습니다.

방대한 자료

2.6. 주의해야 할 점

이벤트

이벤트 이름을 설정할 때 알파벳으로 시작해야하는 제한이 있습니다. 또한 ‘firebase’, ‘google’, ‘ga_’로 시작하는 이벤트 이름도 사용할 수 없습니다.

데이터 처리 지연시간

구글 애널리틱스에 데이터 전송 후 리포트에 보여지기까지는 일반적으로 24~48시간이 걸립니다. 또한 수집하는 데이터가 일일 20만 세션이 넘게 될 경우. 하루에 한 번 만 보고서가 업데이트 됩니다. 그렇게 된다면 실질적으로 오늘 쌓은 데이터는 최소 내일에서 모레는 되어야 정확하게 볼 수 있게 됩니다.

샘플링의 문제

구글 애널리틱스의 좌측 메뉴에는 기본으로 볼 수 있는 보고서는 전수 데이터가 적용되어 있지만, 임의로 리포트를 생성하는 [두 번째 측정기준], [세그먼트], [맞춤보고서] 등의 기능을 사용할 경우,리포트를 보기 위해 설정한 기간 중 세션(방문) 수가 50만이 넘을 경우에 데이터가 샘플링이 됩니다.

샘플링이 적용되는 이유란 ? 데이터를 처리하는 데 한정된 리소스를 가지고 있기때문에 데이터 양이 많아도 일정한 리소스를 사용하고, 일정 시간내에 사용자에게 빠르게 리포트를 보여주기 때문에 샘플링이 적용 될 경우 하위 집합의 결과로, 전체 집합의 결과가 리포팅 되기 떄문에 정확성이 떨어지는 문제가 발생합니다.

3. 가격, 사용량(한계치), API 지원 여부는 어떻게 되는가?

3.1. 가격

Firebase react-native analytics 사용료는 무료다.

단, 월 1천만 히트(Hit) 이상이 발생할 경우 유료 전환이 필요합니다.

3.2. 이벤트 사용량(한계치)

이벤트 개수

전송 가능 한 이벤트 개수는 ‘무제한’으로 안내되고 있습니다.

실제로 문서화 되지 않은 제한이 있는것으로 알려지고 있다고 합니다.. 하나의 디바이스에서 일반적으로는 발생할 수 없는 만큼의 이벤트를 발생시키면 해당 디바이스에 한해 더 이상 이벤트가 저장되지 않는 상황이 발생합니다. (일반적인 상황에서 발생하지 않음.)

이벤트 종류

500개까지의 이벤트 종류만 저장 가능합니다.

사용자 속성 개수

50개의 사용자 속성을 사용할수 있습니다.

이벤트 파라미터

하나의 이벤트에 25개 파라미터를 붙여 보낼 수 있습니다.

파라미터 키와 값 각각 40글자, 100글자 제한이 있습니다.

3.3. API 지원 여부

Google Analytics의 모든 모듈을 제공한다.

4. 간단한 설계

React Native Firebase Analytics Docs 주소

4.1. 화면전환 하는 경우 Screen class와 Screen name을 현재 네비게이션 스크린으로 설정해 log 기록

5. 샘플 코드 적용

import analytics from '@react-native-firebase/analytics';
import { NavigationContainer } from '@react-navigation/native';
  
const RootNavigator = (props: any): React.ReactElement => {
  const routeNameRef = React.useRef();
  const navigationRef = React.useRef<any>();
  
  return (
    <NavigationContainer
        ref={navigationRef}
        independent={true}
        onReady={() => (routeNameRef.current = navigationRef.current.getCurrentRoute().name)}
        onStateChange={(state) => {
          const previousRouteName = routeNameRef.current;
          const currentRouteName = navigationRef.current.getCurrentRoute().name;
  
          if (previousRouteName !== currentRouteName) {
            console.log(currentRouteName);
            analytics()
              .logScreenView({
                screen_name: currentRouteName,
                screen_class: currentRouteName,
              })
              .then(() => {
                console.log('asdf');
              })
              .catch((err) => {
                console.warn(err);
              });
          }
          routeNameRef.current = currentRouteName;
        }}
      >
      </NavigationContainer>
    )
  } 

6. 우려되는 지점

페이지뷰에 대해서

예를 들어 모달을 페이지뷰로 기록할지 아니면 버튼 클릭 이벤트로 기록 해야할지 최선이 무엇인지 많은 고민이 필요합니다. 확실한 것은 이전의 페이지뷰 단위 이동의 UX에서 Context 이동으로의 UX 변화가 기록 방식에도 같은 변화와 고민을 주고 있습니다.

파라미터의 제한

25개를 넘는 파라미터를 가지는 이벤트들에는 제한이 생기는 점

100글자를 넘는 정보가 충분하지 않는 경우도 존재함

실험에 대해서

예를 들어 버튼의 색으로 A/B 테스트를 진행한다고 할 때 실험 번호 “A” 혹은 “B”를 이벤트에 넣어야 할까요, 사용자 속성에 넣어야 할까요?

버튼 클릭 이벤트에 실험 번호를 넣을 경우 버튼의 색이 이후 사용자 행동에 어떤 영향을 주었는지 알기 힘듭니다. 어떤 실험 번호 였는지 조회하기 위해서 모든 이벤트를 뒤져 사용자 단위로 파티셔닝해 사용자와 매치하는 과정이 필요합니다.

사용자 속성에 실험 번호를 넣는 경우 50개 자리 중 하나를 사용해야 하지만 동시에 진행되는 실험이 다수가 될 경우 실험의 개수를 제한하거나 사용자 속성 정보를 복잡하게 기록하고 복잡하게 파싱해 사용하는 어려운 과정을 거쳐야 합니다.

https://brunch.co.kr/@minwoo/24
참고한 사이트