LoginSignup
5

More than 5 years have passed since last update.

Firebase In-AppMessagingで爆速Popup実装

Last updated at Posted at 2018-09-26

始めに

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

そのため、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の強み


Server側の実装を必要とせずDirectorとClientエンジニアで実装する事が可能

割とコストが高いと感じているのは

ClientとServerエンジニア間の実装面での連携

理由

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

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

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

スタイルと内容

スクリーンショット_2018-09-26_10_26_35(2).png

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

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

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

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

  1. ランタイム コマンド引数 -FIRDebugEnabledを設定
    EditScheme > RunのArguments内のArguments Passed OnLaunchに-FIRDebugEnabledを追加
    FIR.png

  2. アプリを実行してアプリのインスタンスIDを特定
    XcodeConsoleのログに表示されるので検索で見つけてください
    [Firebase/InAppMessaging][I-IAM180017] Starting InAppMessaging runtime with Instance ID YOUR_APP_ID
    スクリーンショット 2018-09-24 23.47.55.png

  3. 2で得たインスタンスIDを追加
    スクリーンショット 2018-09-26 10.04.56(2).png

  4. インスタンスID横にあるチェックボックスにチェックを入れテストボタンを押す
    スクリーンショット_2018-09-26_10_08_29(2).png

5.アプリを実行してPopupの確認を行う
(ボタンテキストの色を黒#000000にしてるのに白。。。)
スクリーンショット 2018-09-24 23.50.07.png

宛先

スクリーンショット_2018-09-26_10_33_25(2).png

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

スケジュール

スクリーンショット_2018-09-26_10_41_06(2).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は指定した数字)に1回までしか表示しないという頻度を調整する事ができます。

コンバージョンイベント

スクリーンショット 2018-09-26 10.53.08(2).png

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

できたら良いなと思う事

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

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

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

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

最後に

プロジェクトを用意してみました

プロジェクト
行なっていただきたいことは以下二点になります。

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

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
5