React Native 앱에 Google Analytics를 이용한 유저 트래킹 기능을 추가했다.

웹 서비스는 SEO 태그를 붙여 유저를 트래킹할 수 있었는데 앱에는 해당 기능을 붙여놓지 않아 앱 사용자가 어떻게 앱을 사용하고 있는지 알 수 없었다. 조금 더 완전한 유저 데이터를 위해 앱에서도 유저 데이터를 수집할 수 있도록 작업했다.

앱은 브라우저에서 작동하지 않기 때문에 웹처럼 JS 조각을 삽입하기는 어렵다. 유저가 버튼 터치를 통해 이벤트(ex. 예약하기, 구매하기 등)을 수행할 때마다 로그를 찍어 Google Analytics로 보내는 방식을 적용하려고 한다.

Google Analytics 세팅하기

1. Google Analytics 계정을 만들고, 데이터 스트림(앱)을 추가한다.
   
2. 제시된 과정을 따라 세팅을 진행한다. iOS와 Android의 과정이 다르므로 따로 작업한다.
   

React Native 세팅하기

1. React Native 프로젝트에 Google Analytics 와 연동할 수 있는 Firebase 패키지를 설치한다.

   > yarn add @react-native-firebase/app @react-native-firebase/analytics
   > cd ios && pod install

2. Android 파일에 패키지 관련 내용을 추가한다.
   /android/build.gradle

   buildscript {
     ...
      repositories {
         google()
         mavenCentral()
         ...
      dependencies {
         ...
   	  classpath 'com.google.gms:google-services:4.3.15'
     }
   }
   
   allprojects {
       repositories {
        	google()
       }
   }

   /android/app/build.gradle

   ...
   dependencies {
     implementation 'com.google.firebase:firebase-analytics:17.4.1'
     ...
   }
   ...

3. iOS 파일에 패키지 관련 내용을 추가한다.
   AppDelgate.mm

     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   	{
     		...
   		[FIRApp configure];
           ...
           return YES;
     	}
       ...
   

   Podfile

   require_relative '../node_modules/react-native/scripts/react_native_pods'
   require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
   
   platform :ios, '13.0'
   prepare_react_native_project!
   ...
   $RNFirebaseAnalyticsWithoutAdIdSupport = true
   ...

이벤트에 코드 삽입하기

원하는 이벤트 시점에 다음 코드를 삽입한다.

import analytics from '@react-native-firebase/analytics'
...
analytics().logScreenView({screen_class: '스크린명', screen_name: '스크린명'})
...

유저 트래킹 데이터 확인하기

1. Google Analytics 대시보드에서 screen_view를 클릭한다.
   
2. 각 screen_view 이벤트를 확인한다.