在 Capacitor SDK 中处理用户引导数据

当用户回答测验问题或在输入框中输入数据时，onStateUpdatedAction 方法将被调用。您可以在代码中保存或处理该字段类型。

例如：

view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Process data
  },
});

请在此处查看 action 格式。

// Example of a saved select action
{
    "elementId": "preference_selector",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "preferences_screen",
        "screenIndex": 1,
        "screensTotal": 3
    },
    "params": {
        "type": "select",
        "value": {
            "id": "option_1",
            "value": "premium",
            "label": "Premium Plan"
        }
    }
}

// Example of a saved multi-select action
{
    "elementId": "interests_selector",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "interests_screen",
        "screenIndex": 2,
        "screensTotal": 3
    },
    "params": {
        "type": "multiSelect",
        "value": [
            {
                "id": "interest_1",
                "value": "sports",
                "label": "Sports"
            },
            {
                "id": "interest_2",
                "value": "music",
                "label": "Music"
            }
        ]
    }
}

// Example of a saved input action
{
    "elementId": "name_input",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "screensTotal": 3
    },
    "params": {
        "type": "input",
        "value": {
            "type": "text",
            "value": "John Doe"
        }
    }
}

// Example of a saved date picker action
{
    "elementId": "birthday_picker",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "screensTotal": 3
    },
"params": {
    "type": "datePicker",
    "value": {
        "day": 15,
        "month": 6,
        "year": 1990
        }
    }
}

使用场景

用数据丰富用户画像

如果您希望立即将输入数据与用户画像关联，避免重复询问相同信息，则需要在处理 action 时使用输入数据更新用户画像。

例如，您要求用户在 ID 为 name 的文本框中输入姓名，并希望将该字段的值设置为用户的名字；同时，您要求用户在 email 字段中输入电子邮件。在您的应用代码中，实现如下：

view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Store user preferences or responses
    if (action.elementType === 'input') {
      const profileParams: any = {};
      
      // Map elementId to appropriate profile field
      switch (action.elementId) {
        case 'name':
          if (action.value.type === 'text') {
            profileParams.firstName = action.value.value;
          }
          break;
        case 'email':
          if (action.value.type === 'email') {
            profileParams.email = action.value.value;
          }
          break;
      }
      
      // Update profile if we have data to update
      if (Object.keys(profileParams).length > 0) {
        adapty.updateProfile({ params: profileParams }).catch((error) => {
          // handle the error
        });
      }
    }
  },
});

根据答案自定义付费墙

在用户引导中使用测验，您还可以根据用户完成用户引导后的答案来自定义向其展示的付费墙。

例如，您可以询问用户的运动经验，并向不同用户群体展示不同的行动引导语和产品。

1. 在用户引导编辑工具中添加测验，并为选项分配有意义的 ID。

2. 根据测验响应的 ID 进行处理，并为用户设置自定义属性。

view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Handle quiz responses and set custom attributes
    if (action.elementType === 'select') {
      const profileParams: any = {};
      
      // Map quiz responses to custom attributes
      switch (action.elementId) {
        case 'experience':
          // Set custom attribute 'experience' with the selected value (beginner, amateur, pro)
          profileParams.codableCustomAttributes = {
            experience: action.value.value
          };
          break;
      }
      
      // Update profile if we have data to update
      if (Object.keys(profileParams).length > 0) {
        adapty.updateProfile({ params: profileParams }).catch((error) => {
          // handle the error
        });
      }
    }
  },
});

3. 为每个自定义属性值创建市场细分。
4. 创建一个版位，并为您创建的每个市场细分添加目标受众。
5. 在您的应用代码中为该版位展示付费墙。如果您的用户引导中有一个用于打开付费墙的按钮，请将付费墙代码实现为对该按钮 action 的响应。