Guides

アプリ内メッセージを表示する

Suggest Edits

アプリケーション内にメッセージ（ダイアログ等）を表示したい場合は、アプリ内メッセージ機能を利用することで実現可能です。

アクションは、SDKから送信したイベントをトリガーに配信され、その後SDKにより自動的にアプリケーション上に表示されます。

導入手順

共通

npm または yarn を利用してパッケージをインストールしてください。

npm install --save @react-native-karte/in-app-messaging

yarn add @react-native-karte/in-app-messaging

パッケージのインストールが完了したら、対応するプラットフォーム毎の導入手順に従い設定を進めてください。

iOS

Pod をインストールしてください。

npx pod-install ios

Android

導入にあたり必要な手順はありません。

動作確認

  1. イベントを送信処理を実装
    接客サービスの配信トリガーとして機能するイベントを実装します。
    イベントの送信については、 イベントを送信する をご覧ください。
  2. 接客サービスを作成
    管理画面上で接客サービスを作成します。
    接客サービスの作成方法については、接客サービス作成の流れ をご覧ください。
  3. アプリケーションで確認
    アプリケーションを起動し、1. で実装したイベントの送信が行われる操作を行い、2. で設定した接客サービスが配信・表示されることを確認します。

アクション表示の仕組み

アクションの表示にはWebViewを利用しています。
このため管理画面上で、HTML / CSS / JavaScript をカスタマイズすることでアプリケーションのコードを変更することなく、アクションの見た目を変更することが可能となっています。

WebViewは、SDKが初期化されるタイミングで生成されメモリ上に保持されます。
アクションの表示が必要となった場合、SDKはWebViewを含むWindowを生成し、アプリケーション上に配置します。
WebView上のアクションが非表示になると、Windowは破棄され、WebViewは再びメモリ上で保持されます。

アクションのリンクの制御について

ユーザーがアクション内のリンク（aタグ）をクリックすると、SDKはリンクに指定されているURLを自動的に開きます。

なお独自に制御したい場合は、ネイティブコードで delegate を実装することで対応可能です。
詳細については、以下をご覧ください。

アクションの表示制御機能について

アクションを非表示にする

通常アクションの非表示はユーザーの操作によって行われることが一般的ですが、プログラムから非表示にすることも可能です。

プログラムから非表示にする場合は、InAppMessaging クラスの dismiss() メソッドを呼び出すことで非表示にすることが可能です。
また同クラスの isPresenting プロパティを呼び出すことで、アクションが表示中であるか確認することが可能です。

if (InAppMessaging.isPresenting) {
  InAppMessaging.dismiss()
}

アクションを表示を抑制する

特定画面群では接客を表示したくないの場合、プログラムからアクションの表示を抑制することが可能です。

InAppMessaging クラスの suppress() メソッドを呼び出すことで表示抑制モードとなり、抑制が有効となります。

InAppMessaging.suppress()

また同クラスの unsuppress() メソッドを呼び出すことで表示抑制モードを解除できます。

InAppMessaging.unsuppress()

アクションを表示する画面を限定する

特定画面のコンテキストに合わせたアクションを配信する場合に、ユーザーの操作などで特定画面外に遷移した後にアクションが表示されてしまう場合があります。
これを抑制するために、接客サービスのオプションとしてネイティブアプリにおける接客表示制御から「表示を制限する」を用意しています。

特定の画面に限定して表示したい接客サービスの場合は、このオプションをONにしてください。

本機能は、SDKが画面の境界を正しく認識できる場合にのみ機能します。
なお画面の境界を認識するパターンは、以下の通りです。

  • Viewイベントの送信

アクションを常駐させる

通常の画面遷移またはviewイベント発生時に接客がリセットされます。トリガーとするイベントによってはイベント発生後にviewイベントが発生してしまい、接客が表示されないことがあります。それを避けるために接客サービスのオプションとして、ネイティブアプリにおける接客表示制御から「常に表示する」を用意しています。
また、画面を跨いで常駐させたい場合にも本オプションは有効です。

オプションを有効にした接客を非表示にする方法は以下の通りです。

  • InAppMessaging.dismiss() または InAppMessaging.suppress() を呼び出し明示的に非表示にする
  • 接客のアクション側で接客を非表示にする実装をする

アクションの状態変化を検知する

ネイティブコードで InAppMessagingDelegate プロトコルを実装することにより、アクションの表示状態の変化などを検知することが可能です。

現在のところ、以下の状態変化を検知することが可能です。

  • Windowの表示/非表示状態の変化
  • アクションの表示/非表示状態の変化
  • リンククリックの検知

詳細についてはリファレンスをご覧ください。

Updated 12 months ago