Firebase In-AppMessagingで爆速Popup実装

# 始めに
9/26日に行なった勉強会の登壇資料の補助となるような記事となります。
Firebase In-AppMessagingを使用してPopupを表示するまでの"スタイルや内容"といった計4セクションの中で重要だと思う箇所を絞って書いてみました。
**<font color="Salmon">前提としてiOS向けになります！</font>**

そのため、Firebaseプロジェクト作成からといった一から話す内容ではございませんのでご了承くださいmm

# Firebase In-AppMessaging
Firebaseの数ある機能のうちの一つ
一言で言うとPopupの実装が爆速で行える代物

# Firebase In-AppMessagingでできること
**ざっと以下の事がサクッと実現できます**

- Popupのデザインと内容をFirebase In-AppMessagingの条件下で設定可能
- 配信前のテスト
- Popupの管理(キャンペーン名など)
- 配信開始と終了の設定
- Popup表示を行うトリガー設定(Firebase Analytics Event)
- 端末あたりのPopup表示の頻度設定
- コンバージョンイベント設定(Firebase Analytics Conversions)
- 配信開始から終了までのPopupのインプレッション数とクリック数計測

# 他のFirebase機能との連携
Firebase In-AppMessagingは他のFirebaseとの連携も可能です。
むしろ連携する事でより高い効果を発揮すると言えると思います。
以下が連携できるFirebaseの機能と役割になります。

- Storage <- Popupの画像
- Analytics Event <- Popupを表示するトリガー設定
- Analytics Conversion <- Popupのコンバージョン指標
- Dynamic Links <- Popupのボタンを押した時のアクション先

# Firebase In-AppMessagingの強み
 <font color="Salmon">
**Server側の実装を必要とせずDirectorとClientエンジニアで実装する事が可能**
</font>


割とコストが高いと感じているのは
<font color="Salmon">
ClientとServerエンジニア間の実装面での連携
</font>

理由

- ClientとServerの実装速度の違い(どっちかが実装先に終わって待ち状態とか)
- Client,Server間コミュニケーションコスト高(あれどうだっけ？パラメータ追加してください等)
- エラーが出た時Client,Serverどっちが起因のエラーなのか調査


Firebase In-AppMessagingではServer側が行う実装内容のことをFirebaseの管理画面を通して行う事が可能でありClientエンジニアがPopup表示に関して行うことは大して多くないので上記で上げたコストが高いと思う事が発生しないと思います。

# 実際にFirebase In-AppMessagingを触ってみる

## スタイルと内容
![スクリーンショット_2018-09-26_10_26_35（2）.png](https://qiita-image-store.s3.amazonaws.com/0/75593/e006b09e-fd8f-fdf7-8444-d66aef1f2e73.png)


ここでは重要だと思う3点、画像,ボタンのアクション,端末でテストについて書いてみます。

**画像**
ここで画像として指定できるものにはルールがあります。
それは、**<font color="Salmon">有効なHTTPSURLであること</font>**
この点は、FirebaseのStorageにPopup用の階層を設けてイベントごとの画像を管理して置くと良さそうです。

**ボタンのアクション**
ボタンを押した時の動作をここで設定できます。
webへ飛ばすのでしたらURLをそのまま設定,アプリ内の特定のViewへ遷移させたいのでしたらDeppLinkを使用するのが良さそうです。

**端末でテスト**
デザインとボタンのアクションが設定できた後に動作確認を行うための機能です。
以下テストを行うための準備です。

1. ランタイム コマンド引数 -FIRDebugEnabledを設定
EditScheme > RunのArguments内のArguments Passed OnLaunchに**-FIRDebugEnabled**を追加
<img width="895" alt="FIR.png" src="https://qiita-image-store.s3.amazonaws.com/0/75593/f2b663eb-0c57-6113-23d8-3b6523b40b89.png">

2. アプリを実行してアプリのインスタンスIDを特定
XcodeConsoleのログに表示されるので検索で見つけてください
`[Firebase/InAppMessaging][I-IAM180017] Starting InAppMessaging runtime with Instance ID YOUR_APP_ID`
<img width="455" alt="スクリーンショット 2018-09-24 23.47.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/75593/8acb13ee-0e86-15a0-4c19-f49e10abbe69.png">

3. 2で得たインスタンスIDを追加
![スクリーンショット 2018-09-26 10.04.56（2）.png](https://qiita-image-store.s3.amazonaws.com/0/75593/8cb02812-3b93-cbaa-38cf-b366f3996e95.png)

4. インスタンスID横にあるチェックボックスにチェックを入れテストボタンを押す
![スクリーンショット_2018-09-26_10_08_29（2）.png](https://qiita-image-store.s3.amazonaws.com/0/75593/b083ff3b-7339-d427-8dba-f6bc54e59356.png)

5.アプリを実行してPopupの確認を行う
(ボタンテキストの色を黒#000000にしてるのに白。。。)
<img width="331" alt="スクリーンショット 2018-09-24 23.50.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/75593/4f372a8d-f0c7-efa1-7725-76d28a139ea2.png">


## 宛先
![スクリーンショット_2018-09-26_10_33_25（2）.png](https://qiita-image-store.s3.amazonaws.com/0/75593/adba94b4-5ff4-d672-60d6-d5a7cecfc000.png)

ここでは、Popupを表示するユーザの範囲を設定できターゲットを絞ってPopupを表示することができます。

## スケジュール

![スクリーンショット_2018-09-26_10_41_06（2）.png](https://qiita-image-store.s3.amazonaws.com/0/75593/7e155816-19c3-8a5e-743a-39caf94b5e42.png)

ここでは、Popupの配信スケジュールを設定できます。
配信スケジュール以外にもPopupを表示するトリガー,端末あたりのPopup表示の頻度設定も設定できるので少し詳しく書いてみます。

**Popup表示のトリガー設定**
AnalyticsEventをトリガーとして設定できます。
first_openやon_foregroundなどあらかじめFirebase側が用意しているEventもありますが、
Popupのタイミングを開発側で制御したい場合は、Popupを表示したい箇所に以下のCodeを追加してAnalyticsEventに追加しておきましょう。

`Analytics.logEvent("EventName", parameters: nil)`

**端末あたりのPopup表示の頻度設定**
設定できるのは、キャンペーンに対して端末あたり1回とカスタムの2つです。
カスタムについてはX日毎(Xは指定した数字)に１回までしか表示しないという頻度を調整する事ができます。

## コンバージョンイベント
![スクリーンショット 2018-09-26 10.53.08（2）.png](https://qiita-image-store.s3.amazonaws.com/0/75593/cb1b079e-44df-4b6d-0ed9-45454cf2ab79.png)

ここではPopupのコンバージョンイベントを設定できます。
Popup内のボタンが押されて専用のViewに遷移するような仕組みであれば
専用のViewのViewDidLoadとかにコンバージョン用のイベントを仕掛けて置くと良さそうです。

# できたら良いなと思う事

**デザインのカスタマイズを柔軟に対応できること**

Popupのデザイン面でのデザインの制約が厳しいなと感じてます。
背景に画像が入れられないとか文字フォントやサイズが指定できないなど

これに関して話をした事がありPopupのA/Bテストを行なった結果最適化されたデザインとの事らしいが何か僕が他の人に同じことを聞かれた際に根拠ある理由が言える内容が欲しいところ。

まだβ版なので今後の進展に期待を込めチェックしていきたいですね！

# 最後に

## プロジェクトを用意してみました
[プロジェクト](https://github.com/yotsu12/In-AppMessaging)
行なっていただきたいことは以下二点になります。

- GoogleService-Info.plistをプロジェクトに入れる
- ボタンのアクションに`view://second`を指定