React Native Firebase Analytics Setting

요즘 시장에서 도메인에 대한 분석은 아주 중요한 부분입니다.

아무리 잘 만들어진 앱이라도 사용자에게 불편한 경험을 준다면 그들은 가차없이 앱을 지우고, 이전의 좋지 않은 경험 때문에 신규 버전이 나와도 떠난 사용자들이 다시 돌아올 가능성은 거의 희박합니다.

 

이러한 불상사를 막기 위해 우리는 앱에 사용자의 행동을 분석할 수 있는 도구를 반드시, 그리고 꼼꼼하게 세팅해두어야 합니다.

RN 앱에서 보통 사용되는 사용자 행동 분석(PA, Product Analysis)툴은 믹스패널(Mixpanel), GA4(Google Analytics 4), 앰플리튜드(Amplitude) 등이 있으며, Firebase가 구글에 인수된 이후 지속적인 관심과 업데이트를 통해 GA4보다 사용성이 좋은 Firebase Analytics가 있습니다.

 

이전에 Mixpanel로 사용자를 트래킹하는 방법을 알아본 것에 이어 이번 시간에는 Firebase Analytics 를 설정하고 간단히 테스트 할 수 있는 방법에 대해 알아보겠습니다.

📌 Mixpanel vs GA4 vs Amplitude ?

위에서 언급했던 PA 시장의 믹스패널, GA4, 앰플리튜드는 어떤 차이가 있을까요?

결론부터 말하자면, 가장 큰 차이는 비용💰 입니다.

 

믹스패널은 PA에 대해 잘 모르더라도 직관적인 UI, 쉬운 사용성 덕분에 비교적 러닝커브가 낮은 장점이 있습니다. 다만 무료 사용량에 한계가 있어 앱의 분석 도구로 제대로 활용하려면 적지 않은 비용이 드는 단점이 있습니다.

앰플리튜드는 기본적으로 가격이 상당히 비싸다고 인식이 되고 있으며 심지어 플랜을 업그레이드 할수록 더 비싸지는 단점이 있습니다. 다만 비싼 만큼 믹스패널보다 제공되는 리포트 수도 더 많고 PA에 필요한 거의 모든 것을 다 할 수 있는 툴이라고 할 수 있습니다.

GA4는 예전 웹이 대세였던 시절부터 세션과 페이지뷰 기반으로 마케팅 분석에 최적화된 무료 분석툴이었지만, 이제는 모바일 중심으로 전환되며 세션과 페이지뷰 기반에서 ‘이벤트 기반’의 분석이 대세가 되다보니 현재도 이벤트 기반의 분석을 제공한 믹스패널과 앰플리튜드에 비해 부족한 점이 많습니다.

⇒ GA4의 시장 포지션은 아직까지 ‘무료니까 쓰는 툴’ 이라는 인식이 많다고 합니다.

 

GA4의 유료 버전인 GA360도 있는데, GA4와 제공되는 기능은 거의 같고 GA4에 대비하여 이벤트나 속성 수가 확장되는 약간의 차이가 있어 사용자들의 말로는 거의 차이가 없다고 합니다.

 

◽ 데이터 보관기간

각 툴에서 데이터를 보관하는 기간은 믹스패널은 5년, 앰플리튜드는 제한X(분석할 때는 최대 1년이라고 합니다) GA4는 14개월(GA360은 50개월) 이라고 합니다.

📌 Firebase Analytics?

글 제목처럼 우리는 최종적으로 Firebase Analytics를 연동할 것입니다. 그렇다면 GA4가 Firebase Analytics와 같은 개념일까요? Firebase Analytics는 GA4와 같은 것처럼 보이지만 사실 GA4보다 활용할 수 있는 기능이 적습니다.

(GA4와 Firebase Analytics를 연동하면 GA4에서 모두 사용이 가능합니다)

 

GA4도 단점이 존재하는데 보다 더 적은 기능을 제공하는 Firebase Analytics를 왜 사용해야 할까요?

먼저 초기 스타트업 단계에서 비용적인 문제는 매우 중요합니다.

그리고 이러한 단계에 있는 회사라면 전문적인 데이터 분석가가 있을 리가 만무하죠.

 

또 우리는 이미 기본적인 Firebase 세팅이 되어 있을 것입니다.

앱 초기에는 사용자의 기본적인 세션과 페이지뷰 분석으로도 충분히 앱을 사용자 친화적으로 업데이트 할 수 있고,

개발자라면 세팅하는 데 오랜 시간이 걸리지 않으며 무료인 장점만으로도 Firebase Analytics는 우리에게 선물같은 존재죠 🎁

 

서론이 길었네요! 이제 React Native 앱에 Firebase Analytics를 연동하는 방법을 알아보도록 합시다 :)

📌 Installation

💁🏻‍♂️ Firebase Analytics 모듈은 @react-native-firebase/app 모듈의 설치 및 설정이 되어 있어야 합니다.
APP 모듈이 설정되어 있지 않다면 공식문서를 참조하세요.

 

# Install the analytics module
YARN : yarn add @react-native-firebase/analytics
NPM : npm install @react-native-firebase/analytics

# If you're developing your app using iOS, run this command
cd ios/ && pod install

Android

Firebase 모듈을 사용하기 위해 build.gradle에 dependency를 추가해줍니다.

🔥 google-services 최신 버전을 확인하려면 구글 서비스 Gradle 플러그인 공식문서를 참조하세요.

// build.gradle(project root)
buildscript {
	...
	dependencies {
		...
+		classpath('com.google.gms:google-services:4.4.2')
	}
}

app/build.gradle 에도 플러그인을 적용시켜줍니다.

// build.gradle(:app)
+ apply plugin: "com.google.gms.google-services"

이후 Android Studio > Sync Project with Gradle Files 를 해주면 됩니다.

iOS

iOS는 pod install 과정에서 이전에 설치한 Firebase 라이브러리 버전과 충돌나는 부분을

pod update <FirebasePackageName> 을 해주면서 버전 동기화를 시켜주면 됩니다.

충돌나는 패키지 이름은 pod install 과정에서 친절하게 어느 부분인지 터미널에서 확인이 가능할 것입니다.

📌 Event Testing

Android, iOS 설정을 마치고 빌드까지 완료했다면 이제 본격적으로 앱 소스 코드에 screen_view 이벤트를 넣어 Firebase Analytics에 유저 데이터가 들어오는 지 확인해 봅시다.

 

Analytics에서 제공되는 screen_view는 RN에서 {screen_name ?: string, screen_class ?: string} 객체를 인자로 받는 logScreenView 함수를 사용합니다.

 

추가로, 이전에 세팅한 mixpanel과 기능이 겹치므로 screen_name을 props로 넘겨받아 mixpanel과 Firebase Analytics에 모두 트래킹이 되도록 공통 함수를 작성해 줍시다.

// utils/functions/analytics.ts
import analytics from '@react-native-firebase/analytics';
import {mixpanel} from '../mixpanel';

export const onTrackingAnalytics = (screen_name: string) => {
  // Firebase Analytics
  analytics()?.logScreenView({screen_name});

  // Mixpanel
  mixpanel?.track(screen_name);
};

 

스크린이 이동될 때마다 트래킹을 할 수 있게 NavigationContainer의 onStateChange Props에 해당 로직을 작성해 줍니다.

app.js
...
<NavigationContainer
    ref={naviRef}
    onStateChange={() => {
			...
      const screen_name = naviRef.getCurrentRoute().params?.screen_name;
      if (screen_name) onTrackingAnalytics(screen_name);
      ...
    }}
>

 

onStateChange가 동작할 때마다 현재 route의 params.screen_name을 가져오도록 작성했습니다.

stack.screen을 선언한 곳에서 initialParams를 추가하여 각 페이지마다 screen_name을 가지도록 해줍시다.

RootStackNavigator.tsx
...
<Stack.Screen
	  name="LoginScreen"
	  component={Login}
+	  initialParams={{
+	    screen_name: '로그인',
+	  }}
	  options={{
	    headerShown: false,
	  }}
/>

 

로그인 페이지만을 예시로 들었지만, RootStackNavigator 안에 선언된 모든 Screen마다 추가해주어야 합니다.

여기까지 잘 따라오셨다면 Firebase Analytics > Events > screen_view를 선택해 확인합니다.

screen_view 이벤트에 아무것도 나오지 않는다구요? 그렇다면 잘 따라오고 있는겁니다.

 

Firebase Analytics는 이벤트 발생 직후 약 30분 정도 이후에 데이터가 Firebase에 쌓이게 됩니다. 실시간 이벤트 감지를 위해 Firebase DebugView를 설정해줍시다.

📌 DebugView 설정하기

iOS

앱이 디버그 중일 때 Firebase Analytics에 실시간으로 로깅이 될 수 있도록 Scheme을 편집해 줍니다.

Xcode > Scheme > Edit Scheme..

아래 이미지 순서를 따라 Arguments Passed On Launch에 옵션을 추가해 줍니다.

-FIRDebugEnabled 를 작성해 준 후 Close를 해주면 적용됩니다.

 

Android

안드로이드는 비교적 간단합니다.

Firebase 공식문서 - 디버깅 이벤트에 나와있는 대로 간단한 명령어 하나로 쉽게 연결할 수 있습니다.

Android 에뮬레이터나 연결된 디바이스를 실행하고 다음 명령어를 실행합니다.

adb shell setprop debug.firebase.analytics.app PACKAGE_NAME

 

DebugView를 중지하려면 다음 명령어를 실행해주면 됩니다.

adb shell setprop debug.firebase.analytics.app .none.

 

세팅이 잘 되었는지 Firebase > DebugView 항목에서 확인합니다.

 

위와 같이 실시간으로 잘 나오는 것을 확인할 수 있습니다.

그렇다면 이제 다시 Analytics의 Events 항목으로 가서 screen_view를 확인해 봅시다.

 

이렇게 설정한 screen_name이 잘 잡히는 것을 확인할 수 있고, 페이지를 이동할 때마다 이벤트 데이터가 쌓이게 됩니다.

추후 사용자에게 배포된다면 사용자들이 어느 페이지에 가장 많은 방문을 하는지,

페이지에 얼마나 오래 머물러 있었는지 확인할 수 있게 됩니다 👍🏻