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


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

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

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

Firebase In-App Messaging はリンクハンドラを使用してアクションを処理します。SDK 複数のハンドラを使用できるため、アプリにすでにハンドラがある場合は、Firebase In-App Messaging 特別な設定は必要ありませんまだ ハンドラがある場合は、Firebase Dynamic Links を使用できます。詳しくは、 iOS で Dynamic Links を作成する。

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

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

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

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

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。各タイプはそれぞれの Pod の 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