LoginSignup
12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Day 17

Unity Advent Calendar 2021

@broken55

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

Last updated at Posted at 2021-12-16

概要

この記事はUnity Advent Calendar 2021 その2 17日目の記事です

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

イメージ
image.png

UnityアプリへのFirebase Analyticsの導入

Firebaseの下準備

https://console.firebase.google.com/u/1/
にアクセスし、新規プロジェクトを作成します

image.png

プロジェクトの名前は何でも大丈夫です
image.png

今回はAnalyticsを使いたいのでGoogleアナリティクスを有効にしておきます
image.png

アナリティクスを紐づけします
image.png

プロジェクトが作られたら、次にアプリケーションをFirebase上で作成します
iOSまたはAndroidのアイコンをクリックします
image.png

パッケージ名を指定します
image.png

Androidの場合はjson、iOSの場合はplistがダウンロードできるようになるのでダウンロードしておきます
image.png

あとは「次へ」で進めていけば登録完了です
image.png

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

image.png

エクスポートが毎日行われるように設定します
image.png

Unity側の準備

今回はAndroidアプリの場合で説明していきます

まず、Unityプロジェクトの任意の場所に先ほどダウンロードした
google-services.jsonまたはGoogleService-Info.plist、あるいはその両方を配置しておきます
image.png

Firebase SDKを下記からダウンロードします
https://firebase.google.com/download/unity?hl=ja
image.png

ZIPを展開したら使用するdotnetのバージョンのフォルダに入っているFirebaseAnalytics.unitypackageをインポートします
(ほとんどの方はdotnet4だと思われます)
image.png

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

また、パッケージ名は先ほどWEB上で指定したものと同じである必要があります
image.png

アプリから任意のイベントを発行する

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

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

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

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

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

イベントが来ているかテストする

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

イベントのデバッグ:Firebase公式ドキュメント

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

adb shell setprop debug.firebase.analytics.app package_name

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

-FIRDebugEnabled

FirebaseのWebコンソールからDebugViewを開きます
image.png

アプリ上でイベントが発行される行動をすると、Web上でもイベントが発行されていることが確認できます
image.png

また、各イベントの詳細を開いて、来ているパラメータを確認することもできます
image.png

Data Portalを用いた可視化

Big Query上で確認する

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

image.png
image.png

Big Queryのテーブルは1日のデータが1テーブルに分かれて保存されています
image.png

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

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

このように1つのレコードに様々なデータが入っています
image.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をここに設定しておくことで、ログが分かりやすくなります
また、複数端末を使っているユーザーなども判別ができるようになります。

Firebase.Analytics.FirebaseAnalytics.SetUserID("123456");

ユーザー ID を設定する

パラメータを抽出する

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

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

画面上部のデータの追加をクリックし、Bigqueryを選択します
image.png
image.png

データポータルにBigQueryへのアクセス権を付与します
image.png

カスタムクエリから、先ほどのBigQueryで使ったプロジェクトを指定します
image.png

カスタムクエリを入力の欄にクエリを入力します
入力出来たら右下の追加をクリックします
image.png

するとページ内に表が自動的に挿入されます
image.png

表を選択すると右側で様々な項目を変更することができます
表示項目、グラフの種類、デザインなども変更することができます
image.png

グラフの種類は折れ線、円、棒グラフのほかにもマップチャートなども使えますので
見やすいグラフを探してみてください
image.png

12
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?