❗️ Android 기준으로 작성 ❗️

React Native 🤝 Firebase

앱 등록

Firebase 콘솔에서 앱을 등록한다.

간단히 패키지명으로 등록 가능 하다.

프로젝트 구성

설명이 정말 잘 되어있어서 그대로 따라하면 된다.
다운받은 json 파일을 React-native 프로젝트에서 andriod/app/src path에 추가 한다.

두개의 build.gradle 파일을 아래와 같이 수정한다.

여기서 dependencies는 추가하지 않는다 ( react-native-firebase 를 이용 )

React Native 🤝 Firebase · Analytics

패키지 설치

Analytics의 custom events를 기록하기 위해 React Native Firebase 패키지를 이용 할 것이다.

아래 명령어로 firebase sdk와 함께 패키지를 설치한다.

npm i @react-native-firebase/app @react-native-firebase/analytics

앱을 실행하기 전에 analytics dashboard를 보고 데이터가 없는 상태인걸 확인하자.

앱 실행 및 데이터 확인

안드로이드 에뮬레이터를 실행한다.

npm run android

데이터가 수집됐다.

Stream View 화면으로 이동해 자세히 보면 사용자(앱)의 속성과 트리거 된 이벤트들을 볼 수 있다.

별다른 설정을 하지않아도 기본적으로 수집하는 이벤트들을 볼 수 있다.

Debug View 이용하기

실시간으로 개발 기기에서 앱이 기록하는 이벤트를 분석할 수 있는 화면이다.

안드로이드는 아래 명령어로 간단히 세팅 할 수 있다. (com.apptest은 패키지명)

adb shell setprop debug.firebase.analytics.app com.apptest

안드로이드 에뮬레이터를 실행하고 Debug View를 보면 실시간으로 트리거 되는 이벤트를 볼 수 있다.

npm run android

참고 : https://firebase.google.com/docs/analytics/debugview?hl=ko

React Native 🤝 FCM

앱푸시 메시지 관련 이벤트도 기본적으로 수집되길래 확인해보고자 FCM도 연동한다.

패키지 설치

앱을 실행시키기만 하면 되지만 실제로 업무에 필요한 웹뷰도 같이 세팅 해주었다.

아래 명령어로 설치

npm i @react-native-firebase/messaging
npm i react-native-webview

React 소스 수정

App.js를 아래와 같이 수정했다.
FCM을 이용하려면 토큰을 이용해야 함으로 permissionCheck 함수로 토큰을 발급받고, 로그를 찍었다.

import React, {useState, useEffect} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import messaging from '@react-native-firebase/messaging';
import {WebView} from 'react-native-webview';

const App: () => React$Node = () => {
  const [url, setUrl] = useState('http://www.google.com');

  useEffect(() => {
    permissionCheck();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        minimumFontSize={3}
        thirdPartyCookiesEnabled={true}
        mixedContentMode={'always'}
        javaScriptEnabled={true}
        startInLoadingState={true}
        useWebKit={false}
        source={{uri: url}}
      />
    </SafeAreaView>
  );
};

const permissionCheck = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    const token = await messaging().getToken();
    console.log(token);
  }
};

앱 실행 및 토큰 확인

안드로이드 에뮬레이터를 실행하고 찍히는 토큰을 복사 해둔다.

npm run android

푸시 메시지 발송

send your first message 클릭 후 알림 컨텐츠 정보를 입력한다.

우측의 테스트 메시지 전송버튼을 누르면 토큰을 추가할 수 있다.
아까 복사한 토큰을 입력하고 테스트 버튼을 누른다.

앱푸시 메시지가 도착하면, 메시지를 클릭해 앱을 실행시킨다.

notification event 확인

Stream View 화면에서 이벤트를 확인하면 notification 관련 이벤트들이 수집된 것을 확인할 수 있다.

Firebase 🤝 BigQuery

요금제 변경

무료로 이용할 수 있으나, 실시간으로 데이터를 확인할 수 없어 요금제를 변경한다.

BigQuery 연결 및 데이터 확인

Firebase 콘솔의 프로젝트 설정 > 통합 탭으로 이동 후 BigQuery 연결 클릭

Google Analytics 데이터 내보내기 설정

BigQuery 콘솔에서 데이터 확인