React Native SDKでフローのデータを処理する

ユーザーがフロー内の入力フィールドに入力したり、クイズに回答したり、トグルを切り替えたりすると、SDKはその値をアナリティクスコールバックを通じてアプリに渡します。

アプリでこのデータを活用する主な用途は次のとおりです。

• バックエンドでユーザーを登録する: オンボーディングフローでユーザーが入力したメールアドレスと名前を取得し、フローが閉じたときにアカウントを作成します。
• 回答や設定を保存する: ユーザーが選択した内容を記録しておき、アプリが後で活用できるようにします。たとえば、カスタム属性としてAdapty プロファイルに書き込むことができます。
• 将来のフローをカスタマイズする: クイズの回答をカスタム属性として保存し、後のプレースメントでターゲティングすることで、各セグメントに異なるフローや、その中の異なるペイウォールを表示できます。
• サードパーティの分析プラットフォームに連携する: 回答を Amplitude、Mixpanel、または利用中のプロダクトアナリティクスに転送します。

インプットとセレクタブルグループは、その値を自動的にレポートします。コード内でインプットを区別するために、ビルダーで各インプットに意味のある Element ID を、各セレクタブルグループに Group ID を設定してください。

始める前に

以下が必要です：

• Adapty SDK v4以降: フローのコールバックは以前のバージョンには存在しません。
• フロー＆ペイウォールビルダーで作成されたフロー: コールバックを通じて入力値を報告するのはフローのみです。
• 最近公開されたフローのバージョン: フローがこの機能が利用可能になった後に公開された場合にのみ、入力値を報告します。アプリに何も届かない場合は、フローの新しいバージョンを公開して再試行してください。

入力値を受け取る

入力値は、フローからの他のすべてのアナリティクスイベントと同じハンドラーに、イベント名 flow_user_input として届きます。他のフローイベントハンドラーと並べて onAnalytics を登録してください。

const unsubscribe = view.setEventHandlers({
  onAnalytics(name, params) {
    handleFlowInput(name, params);
    return false; // keep the flow open
  },
});

onAnalytics コールバックは、画面表示を含む、フローからのすべての分析イベントを配信します。

• name パラメーターにはイベント名が格納されています。ユーザー入力イベントをフィルタリングするには、name を flow_user_input と比較してください。
• element_type パラメーターは要素のカテゴリーを示します。
• 入力値は要素タイプによって異なるパラメーターに格納されます：
  • テキストフィールド、ピッカー、トグルはユーザーの入力を value に格納します
  • 選択グループはアクティブなオプションを item_ids と item_titles で報告します

function handleFlowInput(name, params) {
  if (name !== 'flow_user_input') return;

  // The screen the input sits on. Pair it with element_id to tell apart
  // two fields that share an Element ID on different screens.
  const screenId = params.instanceId;

  switch (params.element_type) {
    case 'text_input':
    case 'email_input':
    case 'number_input':
    case 'phone_input': {
      const text = params.value;
      break;
    }
    case 'date_picker':
    case 'time_picker':
    case 'date_time_picker': {
      // Unix time in milliseconds.
      const date = new Date(params.value);
      break;
    }
    case 'single_choice': {
      const optionId = params.item_ids[0];
      break;
    }
    case 'multi_choice': {
      const optionIds = params.item_ids;
      break;
    }
    case 'toggle': {
      const isOn = params.value;
      break;
    }
  }
}

コールバックが実行されることを確認するには、自分のアプリのテストビルドで入力を操作してください。コールバックハンドラーがイベントを受信しない場合は、前提条件を確認してください。この機能が利用可能になった後にフローが公開されていることを確認してください。

アプリがインプットを受け取るタイミング

以下の要素がこのイベントをトリガーします：

• テキスト、メール、数値、電話フィールド
• 日付、時刻、日時ピッカー
• 単一選択・複数選択のセレクタブルグループ、トグル

以下の要素はトリガーしません：

• パスワードフィールド、プロダクト選択、タブ切り替え
• 複数画面で共有される Header 要素内のインプット
• 重複または欠落したオプションの Element ID を持つセレクタブルグループ、あるいは別の画面で Group ID が再利用されているグループ。このようなグループは、部分的な回答ではなく、何も送信しません。

イベントがトリガーされるタイミング：

• フィールドがフォーカスを失ったとき。クリアされたフィールドは空文字列を報告し、ユーザーが一度も編集しなかったフィールドは何も報告しません。プレースホルダーは値ではありません。ユーザーがフィールドに戻って編集し、再びフォーカスを外した場合、2回目のイベントが発生します。
• ユーザーが新しい値を選択した後にピッカーを閉じたとき。値を変えずに閉じた場合は何も報告されません。
• ユーザーがオプションまたはトグルをタップしたとき。複数選択イベントはすべての選択済みオプションを列挙するため、最後の1つを選択解除すると2つの空の配列が送信されます。

イベントがトリガーされないタイミング：

• ユーザーが入力中のとき。キーストリームは存在せず、フォーカスが外れた時点でフィールドが保持している値のみが送信されます。
• ユーザーがフローを送信または閉じたとき。その時点で編集中の値は失われる可能性があります。配信の制限事項 セクションでは、最後の画面をこれに合わせて設計する方法を説明しています。
• ユーザーの操作なしに値が設定されたとき。Set as default とマークされたオプションは画面が開いたときに事前選択されており、Set Variable アクションにより別の操作からオプションを選択したり入力フィールドを埋めたりできます。どちらもイベントを送信しません。事前入力済みの入力は、ユーザーが編集した時点で初めて報告されます。

受け取る内容

コールバックは2つのイベントを配信します。name でフィルタリングして flow_user_input イベントのみを表示してください。レスポンスのJSONペイロードは次のようになります。

{
  "name": "flow_user_input",
  "instanceId": "scr_registration",
  "isBackendEvent": false,
  "isCustomerEvent": true,
  "element_id": "email",
  "element_type": "email_input",
  "value": "jane@example.com"
}

各要素が報告する内容：

回答で分岐する場合は、item_titles ではなく item_ids で比較してください。タイトルは派生値です。設定されていればオプションの Element Title、なければデフォルトロケールのテキスト、それもなければElement IDが使用されます。別の言語でフローを閲覧したユーザーには異なるテキストが表示されます。

イベントの例

これらの例は、各イベントで利用可能なプロパティを、コメント内の参考値とともに示しています。

onAnalytics(name, params) {
    name;                      // 'flow_user_input'
    params.name;               // 'flow_user_input'
    params.instanceId;         // 'scr_J260KU5q'
    params.isCustomerEvent;    // true
    params.isBackendEvent;     // false
    params.element_id;         // 'email'
    params.element_type;       // 'email_input'
    params.value;              // 'jane@example.com'   (string)
}

onAnalytics(name, params) {
    params.element_id;         // 'birthday'
    params.element_type;       // 'date_picker'
    params.value;              // 645408000000   (Unix milliseconds — 1990-06-15, local midnight)
}

onAnalytics(name, params) {
    params.element_id;         // 'experience'
    params.element_type;       // 'single_choice'
    params.item_ids;           // ['pro']
    params.item_titles;        // ['I train professionally']
}

onAnalytics(name, params) {
    params.element_id;         // 'interests'
    params.element_type;       // 'multi_choice'
    params.item_ids;           // ['sports', 'music']
    params.item_titles;        // ['Sports', 'Music']
}

onAnalytics(name, params) {
    params.element_id;         // 'reminders'
    params.element_type;       // 'toggle'
    params.value;              // true   (boolean)
}

配信と制限事項

• 最後の値が優先されます: フィールドごとに1つのイベントが届き、キーストロークのストリームではなくユーザーが最終的に入力した値が含まれます。フィールドを編集した場合、最後のバージョンのみが届きます。
• 送信の保証はありません: ユーザーがフローを進むにつれて値が届きますが、ユーザーはどの時点でも離脱できます。一連の回答が完成したと判断する前に、フローが閉じるのを待ってください。
• ベストエフォート方式での配信: フィールドがフォーカスされているときやピッカーが開いているときにユーザーがフローを閉じたりアプリをバックグラウンドに移動したりすると、その値が失われる場合があります。

最後のフィールドの値を確実に受け取るには、入力フィールドもピッカーもない画面でフローを終了し、その画面が表示されたときに自動的に閉じるのではなく、明示的なユーザー操作によってフローを閉じてください。最後の画面に移動すると前のフィールドからフォーカスが外れ、それが値の送信をトリガーします。

ハンドラーが受け取った入力値をそれぞれ保存しておき、フローが閉じられたときにまとめて送信してください。そのタイミングを捉えるには、onAnalytics と合わせて onDisappeared ハンドラーを登録します。このハンドラーは、ユーザーがフローを最後まで完了した場合でも途中で閉じた場合でも、フロービューが閉じられると実行されます。

ユースケース

バックエンドにユーザーを登録する

値が届いたら収集しておき、フローが閉じたタイミングでまとめてリクエストを送信してください。これにより、1回のリクエストで完全な回答セットを送れます。

フローは、ユーザーが最後まで完了した場合でも、途中で離脱した場合でも消えます。バックエンドを呼び出す前に、必要なフィールドが揃っているか確認してください。

フローはバックエンドからのエラーを表示できません。ハンドラーの戻り値はフロービューを閉じるだけであり、SDKには実行中のフローにデータを送り込むメソッドがありません。たとえばメールアドレスがすでに使用中である場合など、登録に失敗したときは、フローが閉じた後に独自のUIでエラーを表示してください。

const flowAnswers = {};

const unsubscribe = view.setEventHandlers({
  onAnalytics(name, params) {
    if (name === 'flow_user_input' && typeof params.value === 'string') {
      flowAnswers[params.element_id] = params.value;
    }
    return false;
  },
  onDisappeared() {
    if (flowAnswers.email) {
      // Send flowAnswers to your backend here to create the account.
    }
    return false;
  },
});

ユーザープロファイルにデータを追加する

ユーザーが入力した情報をプロファイルに紐づけ、同じ内容を二度尋ねないようにするには、値が入力されるたびにユーザープロファイルを更新してください。

たとえば、フローにElement ID nameのテキスト入力とElement ID emailのメール入力がある場合：

function handleFlowInput(name, params) {
  if (name !== 'flow_user_input') return;
  if (typeof params.value !== 'string') return;

  const profileParams = {};

  switch (params.element_id) {
    case 'name':
      profileParams.firstName = params.value;
      break;
    case 'email':
      profileParams.email = params.value;
      break;
    default:
      return;
  }

  adapty.updateProfile(profileParams).catch(error => {
    // handle the error
  });
}

後で表示されるフローをカスタマイズする

クイズの回答によって、ユーザーが後で別のプレースメントで目にするコンテンツ（別のフロー、またはその中の別のペイウォール）を決定することもできます。

たとえば、オンボーディングフローでスポーツ経験についてユーザーに質問し、グループごとに異なるプロダクトとコピーを持つ独自のフローを表示することができます。

1. フローにクイズを追加します。選択可能グループにグループID experience を設定し、各オプションに意味のある要素IDを付けます。
2. 回答を処理し、ユーザーにカスタム属性を設定します。

function handleFlowInput(name, params) {
  if (name !== 'flow_user_input') return;
  if (params.element_id !== 'experience') return;

  adapty
    .updateProfile({
      // Set the custom attribute 'experience' to the option the user selected
      // (beginner, amateur, or pro).
      codableCustomAttributes: { experience: params.item_ids[0] },
    })
    .catch(error => {
      // handle the error
    });
}

3. 各カスタム属性値に対してセグメントを作成します。
4. プレースメントを作成し、各セグメントに対してオーディエンスを追加します。
5. アプリ内でそのプレースメントのフローを表示します。