Firebase In-App Messaging では、デフォルトのデザインでメッセージや各種構成を事前に行いますが、動作やメッセージの内容を拡張することもできます。In-App Messaging を使用して、メッセージにアクションを追加したり、メッセージのデザインをカスタマイズしたりできます。
メッセージにアクションを追加する
アクションを使用すると、アプリ内メッセージングを使用してユーザーをウェブサイトまたはアプリの特定の画面に誘導できます。
ディープリンク ハンドラを実装する
Firebase In-App Messaging はリンクハンドラを使用してアクションを処理します。SDK 複数のハンドラを使用できるため、アプリにすでにハンドラがある場合は、Firebase In-App Messaging 特別な設定は必要ありませんまだハンドラを持っていない場合は、Firebase Dynamic Links を使用できます。詳しくは、 iOS で Dynamic Links を作成する。
Firebase コンソールを使用してメッセージにアクションを追加する
アプリにリンクハンドラが追加されたら、アクションを使用してキャンペーンを作成する準備が整いました。Firebase コンソールを開いて [Messaging] を開き、新しいキャンペーンを開始するか既存のキャンペーンを編集します。そのキャンペーンで カード、ボタンテキストとボタン アクション、画像アクション、またはバナー action: アクションは関連するディープリンクです。
アクションの形式は、選択したメッセージのレイアウトによって異なります。モーダルによって、カスタムボタンのテキスト コンテンツ、テキストの色、および背景色を持つ操作ボタンが取得されます。一方、画像とトップバナーはインタラクティブとなり、タップすると指定されたアクションが実行されます。
メッセージのデザインを変更する
Firebase In-App Messaging を使用すると、メッセージのレイアウト、フォント スタイル、ボタンの形などを変更して、アプリでのメッセージの表示方法をカスタマイズできます。2 つのモデル メッセージの表示を変更する方法: デフォルトの Firebase In-App Messaging を変更する 独自のメッセージ表示ライブラリをゼロから作成することもできます。
デフォルトの表示を変更する
メッセージをカスタマイズする最も簡単な方法は、Firebase In-App Messaging のデフォルトのメッセージ表示コードを利用する方法です。
firebase-ios-sdk
リポジトリのクローンを作成する
まず、firebase-ios-sdk
リポジトリの最新リリースのクローンを作成して、InAppMessaging ディレクトリを開きます。
変更するメッセージのタイプを選択する
リポジトリのクローンが作成されたら、Firebase In-App Messaging メッセージ タイプ(Card
、Modal
、Banner
、ImageOnly
)を変更します。各タイプは UDM イベントと
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
独自のメッセージ表示ライブラリを作成する
メッセージを表示する UI を作成する場合、InAppMessaging
ライブラリを使用せずに、独自のコードをゼロから作成することもできます。
InAppMessagingDisplay
プロトコルを実装するクラスをビルドする
Firebase In-App Messaging は、InAppMessaging
クラスを使用して Firebase サーバーとアプリ間の通信を処理します。このクラスは、InAppMessagingDisplay
プロトコルを使用して、受信したメッセージを表示します。独自の表示ライブラリをビルドするには、このプロトコルを実装するクラスを作成します。
プロトコルの定義とそれを遵守する方法が InAppMessaging
ライブラリの FIRInAppMessagingDisplay.h
ファイルに記述されています。
メッセージ表示ライブラリを使用するように messageDisplayComponent
を設定する
InAppMessaging
は messageDisplayComponent
プロパティを使用して、メッセージの表示時に使用するオブジェクトを決定します。このプロパティをカスタム メッセージの表示クラスに設定すると、Firebase In-App Messaging はユーザーのライブラリを使用してメッセージを表示します。
InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance