Unity + Firebase Analytics + Data Portalでユーザー行動を可視化

# 概要
この記事は[Unity Advent Calendar 2021 その2](https://qiita.com/advent-calendar/2021/unity) 17日目の記事です

- Unity+Firebase Analytics+Data Portalを組み合わせて、アプリ内のユーザー行動を可視化します
    - Unityから送ったログをもとにData Portalを使ってグラフを起こします
    - 応用すればDAUやMAUのグラフを書くこともできます
- 本記事は大きく分けて2部に分かれます
    1. UnityアプリへのFirebase Analyticsの導入
    2. Data Portalを用いた可視化

イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/2f511550-5482-2a01-0fbb-e077cc98a3a6.png)




# UnityアプリへのFirebase Analyticsの導入
## Firebaseの下準備
https://console.firebase.google.com/u/1/
にアクセスし、新規プロジェクトを作成します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/f4be50f0-15fd-64ad-5fc4-f2195e8f660f.png)

プロジェクトの名前は何でも大丈夫です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/90fe1a0f-bb86-2299-52b4-eac40619357c.png)

今回はAnalyticsを使いたいのでGoogleアナリティクスを有効にしておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/2103a3ac-51cc-0048-9403-586755ec7339.png)

アナリティクスを紐づけします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/4e2dc1f4-c758-dd66-88e6-906013c78a55.png)

プロジェクトが作られたら、次にアプリケーションをFirebase上で作成します
iOSまたはAndroidのアイコンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/39945c09-a196-67b9-d3f1-ead1581aba52.png)

パッケージ名を指定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/f46133b1-9552-6edd-8e72-2b24750c8e0c.png)

Androidの場合はjson、iOSの場合はplistがダウンロードできるようになるのでダウンロードしておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/641bd9d8-aa7b-3f9a-f92b-270fd56f6731.png)

あとは「次へ」で進めていけば登録完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/6307f1c1-765b-7fcc-03dd-4f1737564b5c.png)

次にBigqueryとの連携を行います

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/7709a250-b64d-8703-1848-a42462424a34.png)

エクスポートが毎日行われるように設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/0704d72b-973d-3f20-2c94-e04504ae5a32.png)



## Unity側の準備
今回はAndroidアプリの場合で説明していきます

まず、Unityプロジェクトの任意の場所に先ほどダウンロードした
`google-services.json`または`GoogleService-Info.plist`、あるいはその両方を配置しておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/8dd9b23f-81e1-cf3f-bf30-ddc4aad7d78b.png)


Firebase SDKを下記からダウンロードします
https://firebase.google.com/download/unity?hl=ja
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/794cca77-9210-9cd3-a5c0-f1077ab19035.png)

ZIPを展開したら使用するdotnetのバージョンのフォルダに入っている`FirebaseAnalytics.unitypackage`をインポートします
(ほとんどの方はdotnet4だと思われます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/49a3973a-da7f-35a3-3896-694ada0e3620.png)

インポート後に自動的にFirebaseの設定を行ってくれます

また、パッケージ名は先ほどWEB上で指定したものと同じである必要があります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/b67c6532-f73b-93ed-45b9-c6f6f8297d61.png)

## アプリから任意のイベントを発行する
- 何も設定しない状態でも、インストール・アプリを開く辺りのイベントはFirebaseが自動的に回収してくれます
- ここではアプリから任意のイベントを発行できるようにコードを書いていきます

ボタンを押したらイベントが発行されるサンプルコードです

```c#
using Firebase.Analytics;   //このusingが必要
using UnityEngine;
using UnityEngine.UI;

public class Analytics : MonoBehaviour
{
    [SerializeField]
    Button startButton;

    [SerializeField]
    Button levelUpButton;

    int level = 1;

    private void Start()
    {
        this.startButton.onClick.AddListener(() =>
        {
            //イベントだけ発行してパラメータが無いパターン
            FirebaseAnalytics.LogEvent("startbutton_pushed");
            Debug.Log("StartButton Pushed");
        });

        this.levelUpButton.onClick.AddListener(() =>
        {
            this.level++;

            //イベント＋パラメータのパターン
            FirebaseAnalytics.LogEvent("levelup", new Parameter("level", this.level));
            Debug.Log($"LevelUp:{this.level}");
        });
    }
}
```

イベントの発行の仕方は大きく分けて2つのパターンがあります
一つはイベントだけ発行してパラメータが無いパターン。例えばゲームスタート、ゲームクリアなどトリガーとなるイベントに使うことができます
もう一つがイベントとパラメータを同時に発行するパターン
イベント名と各パラメータを同時にログを取ることができます
このパラメータは、可変長引数になっているので、同時に複数のパラメータを送ることもできます。

```c#
FirebaseAnalytics.LogEvent("gameover",
                            new Parameter("level", this.level),
                            new Parameter("stage", this.stageName),
                            new Parameter("enemy", this.enemyName));
```

ここまで出来たらビルドしてモバイル端末で実行できるようにします

# イベントが来ているかテストする
通常、Firebase Analyticsはイベントが発行されてから次の日にならないとイベントが来ているかどうかわかりません
しかし、Debug Viewという機能を使うことでイベントが発行されたら即時に確認することができます

[イベントのデバッグ:Firebase公式ドキュメント](https://firebase.google.com/docs/analytics/debugview?hl=ja#android)

Androidの場合はAPKインストール時後に下記のコマンドを実行します

```
adb shell setprop debug.firebase.analytics.app package_name
```

iOSの場合はXcode で次のコマンドライン引数を指定します

```
-FIRDebugEnabled
```

FirebaseのWebコンソールからDebugViewを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/7a1b7e0b-d0e3-51ff-8a86-1e4d7847e9db.png)

アプリ上でイベントが発行される行動をすると、Web上でもイベントが発行されていることが確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/d6aefc4f-67fd-c0a2-4be6-bdf809d541bf.png)

また、各イベントの詳細を開いて、来ているパラメータを確認することもできます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/e2da1558-9b4d-91f1-bf31-72717bca06c7.png)

# Data Portalを用いた可視化
## Big Query上で確認する
直接Data Portalでグラフを書いてもいいのですが、まずはBigquery上でデータがどのような形式で来ているかを確認することをお勧めします
Firebaseのコンソールを開き、`Events`のページ下部に`BigQueryで生のイベントを表示`という項目があるのでそこをクリックしBig Queryを開きます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/d4d4e388-6292-7fe1-d83b-172c2b126f1c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/112ce555-536f-2644-035e-b0fdca8999cc.png)

Big Queryのテーブルは1日のデータが1テーブルに分かれて保存されています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/56872485-b1af-0d9f-9c92-2f89c99b2231.png)

とりあえず、どのようなデータ形式になっているか見てみましょう

```sql
SELECT * 
FROM `unity-analytics-a849e.analytics_295319553.events_20211202` 
LIMIT 1000
```

このように1つのレコードに様々なデータが入っています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/466e3407-5cea-d317-b3d0-00b558813af8.png)

代表的なカラムは

|カラム名|意味|
|----|----|
|event_date|日付|
|event_timestamp|タイムスタンプ(UTC)|
|event_name|イベント名|
|event_params|イベントのパラメータ|
|user_pseudo_id|Firebaseからアプリインストール時に付与されるID|
|user_id|`FirebaseAnalytics.SetUserID`を利用して付与されたID|
|device.mobile_model_name|モバイル端末の型番(例：SCV38)|
|device.mobile_marketing_name|モバイル端末の名称(例：Galaxy S9)|

user_idは下記のコードで設定することができます
会員登録などがあるアプリでは、会員のUserIDをここに設定しておくことで、ログが分かりやすくなります
また、複数端末を使っているユーザーなども判別ができるようになります。

```c#
Firebase.Analytics.FirebaseAnalytics.SetUserID("123456");
```

[ユーザー ID を設定する](https://firebase.google.com/docs/analytics/userid?hl=ja#unity)

## パラメータを抽出する
Firebaseのevent_paramsは特殊な形式になっており、抽出するのに一手間かかります
`UNNEST`を使って抽出を行います。
ここではlevelのパラメータを抽出してみます

```sql
SELECT event_timestamp,event_name,
(SELECT value.int_value FROM UNNEST(event_params) AS params WHERE params.key = 'level') AS level,
FROM `unity-analytics-a849e.analytics_295319553.events_20211202`
WHERE event_name = "levelup"
ORDER BY level
```

結果

|event_timestamp|event_name|level|
|----|----|----|
|1638422330015000|levelup|2|
|1638422330186001|levelup|3|
|1638422330637002|levelup|4|
|1638422330804000|levelup|5|
|1638422331253000|levelup|6|
|1638422331437001|levelup|7|
|1638422331687002|levelup|8|
|1638422331855003|levelup|9|
|1638422332021000|levelup|10|

## Data Portalへのデータ取り込み
Google Data Portal(Data Stuio)にアクセスし、利用を開始します
https://datastudio.google.com/u/1/

このような画面が開いたら、空のレポートを作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/d271ff76-b7c3-f307-cba9-995e57c3e101.png)

画面上部の`データの追加`をクリックし、Bigqueryを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/c35d11b9-1ce2-7074-cb13-b14841b86c35.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/9741962d-d435-f8c9-8035-7056b6ece3fe.png)

データポータルにBigQueryへのアクセス権を付与します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/0bbd00a2-5411-25a0-c020-95e0c3219e0b.png)

`カスタムクエリ`から、先ほどのBigQueryで使ったプロジェクトを指定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/8f475e89-72ac-507e-6dbd-ca2b7fbaf29d.png)

`カスタムクエリを入力`の欄にクエリを入力します
入力出来たら右下の`追加`をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/0d72fec6-f840-7ef7-11d5-77b76c1e6835.png)

するとページ内に表が自動的に挿入されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/a4097db0-cd34-cb19-d311-600d36277ec6.png)

表を選択すると右側で様々な項目を変更することができます
表示項目、グラフの種類、デザインなども変更することができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/7636f326-56ed-e7b6-0580-587baa2b63e1.png)

グラフの種類は折れ線、円、棒グラフのほかにもマップチャートなども使えますので
見やすいグラフを探してみてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105021/e9d63483-68f6-de5d-e885-fc9b9d9bcaca.png)