[React Native] 구글 애널리틱스 이벤트 추가

구글 애널리틱스 이벤트에 관한 게시물로, 파이어베이스에 프로젝트를 등록하는 과정 생략

npm 설치

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

커스텀 이벤트 등록

import react, { useEffect } from 'react';
import { View, Button } from 'react-native';
import analytics from '@react-native-firebase/analytics'; // 설치한 npm import

function App() {
  return (
    <View>
      <Button
        title="Add To Basket"
        onPress={async () =>
          await analytics().logEvent('basket', { // 첫번째인자:GA에 표시될 이름 지정
            id: 3745092,  // 더 디테일한 데이터 전달가능
          })
        }
      />
    </View>
  );
}

페이지 별 이벤트 등록 가능(screen_view 이벤트에 페이지 이름 전달)

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

const App = () => {
  const routeNameRef = React.useRef();
  const navigationRef = React.useRef();
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef.current.getCurrentRoute().name;
      }}
      onStateChange={async () => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current.getCurrentRoute().name;

        if (previousRouteName !== currentRouteName) {
          await analytics().logScreenView({
            screen_name: currentRouteName, // 디테일 정보 표시되는곳
            screen_class: currentRouteName, // GA 표시되는 이름
          });
        }
        routeNameRef.current = currentRouteName;
      }}
    >
      ...
    </NavigationContainer>
  );
};

export default App;

제대로 애널리틱스에 올라가는지 테스트

실제 수집되는곳은 1시간마다 업데이트 되기 때문에 실시간으로 업데이트 되는 Debug View로 이동해야 됨

1. firebase 콘솔로 이동
2. 좌측 애널리틱스 선택
3. debug view 선택

Debug View에서 디버그 기기로 인식되도록 디버그모드로 실행

1. 출처의 rn 디버그모드로 실행 링크를 보면서 하세요
2. 1단계 firebase용 google 애널리틱스(모바일앱) 클릭
3. 이벤트 디버깅 링크 클릭

android

• adb shell setprop debug.firebase.analytics.app 패키지네임 의 명령어를 터미널에 입력(전 프로젝트 root 경로에서 입력했습니다)

  패키지네임 확인 위치: root/android/app/src/main/java/com/프로젝트명/MainActivity.java 를 열면 제일 상단에 package 옆에 써있는 내용입니다.)

• 기기 연결 후 터미널에 npm run android 명령어 입력

ios

• xcode 실행
• 상단의 product -> scheme -> Edit scheme -> 모달 좌측에 run -> 모달 상단에 Arguments -> Arguments Passed On Launch +버튼 -> -FIRDebugEnabled 추가

동작 후 Debug View에서 이벤트가 제대로 캐치 되는지 확인

출처
rn firebase 설명
rn 디버그모드로 실행