참고 Expo 37에서는 firebase analytics를 사용할 수 있습니다.

실은 Expo(react naitve 앱을 만드는 프레임워크)에는 표준으로 애널리틱스가 붙어 있다.

우선, Expo가 공식적으로 대응하고 있는 analytics 서비스의 Amplitude에 계정을 만들고 API key를 Get합시다. (불행히도 Expo에서는 firebase analytics를 사용할 수 없지만 fierbase보다 amplitude가 사용하기 쉽습니다.)

Amplitude

계정을 만들면 아래 화면이 나오므로 오른쪽 상단의 create project를 클릭하여 project를 만듭니다.

api key는 ios 탭을 클릭하면, ios용의 apikey가 나오므로, 그것을 클립보드에 카피해 두자.

Amplitude라는 분석 서비스가 expo에서 표준으로 제공되며 코드에서
import { Amplitude } from 'expo'
하는 것만으로 analytics를 시작할 수 있다.

Let's 코딩

우선 expo로 프로젝트를 작성.

npm i -g expo
expo init AwesomeProject
cd AwesomeProject
npm i

그런 다음 analytics에 대한 파일 만들기

touch analytics.js

// analytics.js
import {Amplitude} from 'expo'

Amplitude.initialize("97f362XXXXXXXXXXXX")
Amplitude.logEvent("Hello World")

그런 다음 analytics.js를 App.js로 가져옵니다.

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './navigation/AppNavigator';
+ import analytics from './analytics'

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require('./assets/images/robot-dev.png'),
        require('./assets/images/robot-prod.png'),
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
      }),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

시뮬레이터를 시작한 후 Amptitude에 가보자.

expo start
expo ios

시뮬레이터를 시작하기 전에는 다음과 같은 화면이 나와있을 것이다.


시뮬레이터를 시작한 후 몇 분이 지나면,


했어!

이벤트 페이지에 가면, 제대로 event가 불리고 있다!

그런 다음 이벤트를 수집하고 싶은 곳에
Amptitude.logEvent ( '문자열')를 넣으면 OK!

조금 복잡한 것을 해본다.
구체적으로는 UserId를 설정하고 그룹과 속성을 설정합니다.
속성이있는 이벤트도 수집하고 싶습니다 ...
analytics.js에 뒤에 오는 계정을 추가한다.

// analytics.js
import {Amplitude} from 'expo'

Amplitude.initialize("97f362aa96e30dd43b924684984a664b")
Amplitude.logEvent("Hello World")

+Amplitude.setUserId("xxxx")
+Amplitude.setGroup("Expo person")
+Amplitude.setUserProperties("Woman")
+Amplitude.logEventWithProperties("Hello World", {heavyUser: 'yes'})

간단하네요!

live stream에서 디버깅도 할 수 있어요.

깨끗한 차트도 사용할 수 있다.

분석에 사용할 수있는 방법은 8 개뿐이지만 여전히 분석을 할 수 있습니다.

expoAmptitude 공식 문서

약간 기능이 부족하다고 생각할 때도 있지만, 무엇보다 간편하기 때문에, expo로 analytics를 넣고 싶을 때는 한번 시험해 보면 어떨까?