Firebase In-App Messaging のメッセージをカスタマイズする


Firebase In-App Messaging では、デフォルトのデザインでメッセージや各種構成を事前に行いますが、動作やメッセージの内容を拡張することもできます。In-App Messaging を使用して、メッセージにアクションを追加したり、メッセージのデザインをカスタマイズしたりできます。

メッセージにアクションを追加する

アクションを使用すると、アプリ内メッセージングを使用してユーザーをウェブサイトまたはアプリの特定の画面に誘導できます。

Firebase In-App Messaging はリンクハンドラを使用してアクションを処理します。SDK では多数のハンドラを使用できるため、アプリにすでにハンドラが 1 つある場合は、Firebase In-App Messaging はそれ以上の設定を行わなくてもそのハンドラを使用できます。まだハンドラを持っていない場合は、Firebase Dynamic Links を使用できます。詳しくは、iOS でダイナミック リンクを作成するをご覧ください。

Firebase コンソールを使用してメッセージにアクションを追加する

アプリにリンクハンドラが追加されたら、アクションを使用してキャンペーンを作成する準備が整いました。Firebase コンソールを開いて [メッセージング] を開き、新しいキャンペーンを開始するか、既存のキャンペーンを編集します。そのキャンペーンで、カード、ボタンテキストとボタン アクション、イメージ アクション、またはバナー アクションを実装します。アクションは関連するディープリンクとなります。

アクションの形式は、選択したメッセージのレイアウトによって異なります。モーダルによって、カスタムボタンのテキスト コンテンツ、テキストの色、および背景色を持つ操作ボタンが取得されます。一方、画像とトップバナーはインタラクティブとなり、タップすると指定されたアクションが実行されます。

メッセージのデザインを変更する

Firebase In-App Messaging を使用すると、メッセージの表示をカスタマイズして、アプリのメッセージのレイアウト、フォント スタイル、ボタンのシェイプ、その他の詳細のレンダリング方法を変更できます。メッセージの表示方法を変更するには 2 つの方法があります。一つは、デフォルトの Firebase In-App Messaging の表示を変更する方法、もう一つは独自のメッセージ表示ライブラリをゼロから作成する方法です。

注: このプロダクトは、macOS、Mac Catalyst、App Clip、watchOS の各ターゲットでは使用できません。

デフォルトの表示を変更する

メッセージをカスタマイズする最も簡単な方法は、Firebase In-App Messaging のデフォルトのメッセージ表示コードを利用する方法です。

firebase-ios-sdk リポジトリのクローンを作成する

まず、firebase-ios-sdk リポジトリの最新リリースのクローンを作成して、InAppMessaging ディレクトリを開きます。

変更するメッセージのタイプを選択する

リポジトリのクローンが作成されたら、Firebase In-App Messaging メッセージ タイプ（Card、Modal、Banner、ImageOnly）を変更します。各タイプは、Firebase In-App Messaging キャンペーン作成フローのメッセージ レイアウトに対応しています。

それぞれのタイプがアクセスできるデータセットは、Firebase コンソールのキャンペーン カスタマイズ オプションによって決まります。

タイプ titleText bodyText textColor backgroundColor imageData actionButton secondaryActionButton
Card
Modal
Banner
ImageOnly

メッセージを表示するレンダリング コードを変更する

メッセージ タイプには制限がありますが、その点を除けば、メッセージを自由に変更できます。たとえば、アプリの一番下にバナーを表示したり、モーダル内でアクション ボタンを移動したり、ユーザーのフィードにアプリ内メッセージを埋め込んだりするなど、アプリに合わせてメッセージの外観を変更できます。

メッセージの表示を変更する際には、次の 2 つの点に注意してください。

  • メッセージ タイプのディレクトリ: メッセージ タイプごとに別のディレクトリがあり、そのディレクトにタイプのロジックを決めるファイルが存在します。
  • ストーリーボード: InAppMessaging ライブラリの .storyboard ファイルを使用して、3 つのメッセージ タイプの UI を定義することもできます。

お好みのメッセージ タイプのディレクトリにあるファイルを変更し、.storyboard で対応するセクションを変更して、メッセージの表示をカスタマイズします。

変更後の InAppMessaging コードを使用するように Podfile を更新する

Firebase In-App Messaging でデフォルトの表示ではなく変更されたメッセージの表示を使用するには、カスタマイズされた InAppMessaging ライブラリを使用するように Podfile を更新します。

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessaging pod:
# pod 'Firebase/InAppMessaging'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessaging', :path => '~/Path/To/The/Cloned/Repo/'

end
これで、Pod を更新してアプリを再度ビルドすると、カスタマイズした新しい設定でメッセージが表示されます。

独自のメッセージ表示ライブラリを作成する

メッセージを表示する UI を作成する場合、InAppMessaging ライブラリを使用せずに、独自のコードをゼロから作成することもできます。

InAppMessagingDisplay プロトコルを実装するクラスをビルドする

Firebase In-App Messaging は、InAppMessaging クラスを使用して Firebase サーバーとアプリ間の通信を処理します。このクラスは、InAppMessagingDisplay プロトコルを使用して、受信したメッセージを表示します。独自の表示ライブラリをビルドするには、このプロトコルを実装するクラスを作成します。

プロトコルの定義とそれを遵守する方法が InAppMessaging ライブラリの FIRInAppMessagingDisplay.h ファイルに記述されています。

メッセージ表示ライブラリを使用するように messageDisplayComponent を設定する

InAppMessaging は messageDisplayComponent プロパティを使用して、メッセージの表示時に使用するオブジェクトを決定します。このプロパティをカスタム メッセージの表示クラスに設定すると、Firebase In-App Messaging はユーザーのライブラリを使用してメッセージを表示します。

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance