Expoでfirebase analytics使えないけど、もっといいのあるよ。

![alt](https://user-images.githubusercontent.com/26253721/39765058-e8d0eae4-531b-11e8-9305-4c852f269517.png)

# 注意 Expo 37からはfirebase analyticsが使用可能です。

## 実はExpo(react naitveアプリを作るフレームワーク)には標準でアナリティクスが付いている。

まず、Expoが公式で対応しているanalyticsサービスのAmplitudeにアカウントを作り、API keyをGetしましょう。（残念ながらExpoではfirebase analyticsを使えませんが、 fierbaseより、amplitudeのが使いやすいですよー）

# [Amplitude](https://amplitude.com/)
<img width="1137" alt="スクリーンショット 2018-12-26 20.13.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/183835/f071c1e7-fba8-7e4c-9e8f-91c332120d8f.png">

## アカウントを作成すると以下の画面が出てくるので、右上の create projectをクリックして、projectを作成する。
<img width="1438" alt="スクリーンショット 2018-12-26 20.20.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/183835/d8c00d98-83e1-8bd3-600f-310fbc78262d.png">

## api keyはiosタブをクリックすると、ios用のapikeyが出てくるので、それをクリップボードにコピーしておこう。


<img width="336" alt="スクリーンショット 2018-12-26 20.28.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/183835/d1698471-f76c-3679-a688-275870b81b4d.png">


Amplitudeというanalyticsサービスがexpoから標準提供されていて、コードで
import { Amplitude } from 'expo'
とするだけでanalyticsを始めることが出来る。

## Let's コーディング

まず　expoでプロジェクトを作成。

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

## 次にanalytics用のファイルを作成

```
touch analytics.js
```

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

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

## そしてanalytics.jsをApp.jsにimportする。

```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
```

シュミレータを立ち上げる前は以下のような画面が出ているはずだ。
<img width="868" alt="スクリーンショット 2018-12-28 22.29.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/183835/5327cbe0-88e1-8ee4-c5b3-c696b6827ff0.png">


シュミレータを立ち上げてから数分経つと、
<img width="874" alt="スクリーンショット 2018-12-28 22.30.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/183835/0aa0c194-781e-e287-6307-7040abb6e044.png">


やったぜ！

## イベントページへ行くと、ちゃんとeventが呼ばれている！


あとは、eventを収集したい箇所に
Amptitude.logEvent('文字列')を仕込めばOK!

ちょっと複雑なことをやってみる。
具体的には、UserIdをセットして、グループとプロパティをセット、
プロパティ付きのeventも収集したい...
analytics.jsに以下の記述を加える。

```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でデバッグも出来るよ。
<img width="830" alt="スクリーンショット 2018-12-27 21.52.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/183835/ac564da6-ebff-6b85-a1e9-2e83d0f8c425.png">

## 綺麗なチャートも使える。
<img width="938" alt="スクリーンショット 2018-12-28 22.51.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/183835/7e0cd99c-a5f5-9c7b-5a4d-68e1d23e784d.png">


## analyticsに使えるメソッドは8個だけだが、それでも十分analyticsできますよー
[expo　Amptitude 公式ドキュメント](https://docs.expo.io/versions/latest/sdk/amplitude)

若干機能が足りないと思う時もあるが、何より手軽なので、expoでanalyticsを入れたいときは一度試してみてはどうだろうか？