在 React Native SDK 中处理流程数据

当用户在流程中的输入框中输入内容、回答测验或拨动开关时，SDK 会通过其分析回调将对应的值传递给你的应用。

应用最常将这些数据用于：

• 在自有后端注册用户：获取用户在引导流程中填写的邮箱和姓名，在流程关闭时为其创建账户。
• 保存答案与偏好设置：记录用户的选择，供应用后续使用——例如，将其作为自定义属性写入用户的 Adapty 用户画像。
• 自定义后续流程：将问卷答案保存为自定义属性，再针对后续版位进行定向，让不同市场细分的用户看到不同的流程，或流程中不同的付费墙。
• 接入第三方分析平台：将答案转发至 Amplitude、Mixpanel 或你所使用的其他产品分析工具。

输入框和可选组会自动上报其值。为了在代码中区分各个输入框，请在编辑工具中为每个输入框指定一个有意义的 Element ID，为每个可选组指定一个 Group ID。

开始之前

您需要：

• Adapty SDK v4 或更高版本：流程回调在旧版本中不存在。
• 在 Flow & Paywall Builder 中构建的流程：只有流程才会通过此回调上报输入值。
• 最近发布的流程版本：流程仅在您发布此功能上线后的新版本时才会上报输入值。如果您的应用没有收到任何内容，请重新发布一个新版本的流程后再试。

接收输入值

输入值与流程中其他所有分析事件一样，通过同一个处理器传递，事件名称为 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 在另一个屏幕上被复用的可选组。此类选项组不会发送任何内容，而非发送部分答案。

以下情况会触发此事件：

• 输入框失去焦点时。已清空的输入框报告空字符串；用户从未编辑过的输入框不报告任何内容。占位符不是值。如果用户返回输入框、编辑后再次离开，则会触发第二次事件。
• 用户在选择新值后关闭选择器时。未做修改直接关闭不会报告任何内容。
• 用户点击某个选项或开关时。多选事件会列出所有已选选项，因此取消选中最后一个选项时会发送两个空数组。

以下情况不会触发此事件：

• 用户正在输入时。不存在按键流，只有输入框失去焦点时所持有的值。
• 用户提交或关闭流程时。此时仍处于编辑状态的值可能会丢失；投递限制一节介绍了如何针对最后一屏进行相应的设计。
• 在无用户交互的情况下设置值时。标记为 Set as default 的选项在屏幕打开时即为预选状态，Set Variable 操作可以根据其他交互来选中选项或填充输入框。两者均不会发送事件；预填充的输入框只有在用户编辑后才会报告。

您将收到的内容

回调会传递两个事件。通过 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_ids，而非 item_titles。标题是派生值：优先使用选项的 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)
}

发送与限制条件

• 后值覆盖前值：每个字段只触发一个事件，携带的是用户最终确认的值，而非逐键输入的流。如果用户编辑了某个字段，只有最后一个版本会传递给你。
• 无提交保证：值会在用户浏览流程时传递给你，用户可以在任意时刻离开。在将一组答案视为完整之前，请等待流程关闭。
• 尽力传递：如果用户在某个字段仍处于焦点状态或选择器仍处于打开状态时关闭流程或将应用切换到后台，该值可能会丢失。

为确保最后一个字段的值可靠传递，请以一个没有输入框和选择器的屏幕结束流程，并通过用户的明确操作（而非该屏幕出现时自动）关闭流程。跳转到最终屏幕会使前一个字段失去焦点，从而触发其值的发送。

将每个输入值在收到时即时存储，待流程关闭时一并发送完整数据。要捕获这一时刻，请在注册 onAnalytics 的同时注册 onDisappeared 处理器。无论用户是完成了整个流程还是中途关闭，该处理器都会在流程视图消失时触发。

使用场景

在后端注册用户

等所有答案收集完毕后再统一发送，确保一次请求携带完整数据。

无论用户是正常完成流程还是中途退出，流程都会关闭。在调用后端接口前，请先校验所需字段是否已填写。

流程无法展示来自后端的错误信息。处理函数的返回值仅用于关闭流程视图，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. 在流程中添加测验。将可选组的 Group ID 设为 experience，并为每个选项设置有意义的 Element 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. 在你的应用中展示该版位的流程。