ÿÿ Onboardings | Flutter SDK | Tài liệu Adapty

Xử lý dữ liệu từ onboarding trong Flutter SDK

Onboardings đã bị deprecated trong SDK v4 và sẽ bị xóa trong phiên bản tương lai. Chúng không còn nhận được các bản sá»­a lá»—i hay cải tiến nữa. Hãy sá»­ dụng flows thay thế: không giống như onboardings chạy trong WebView, flows render trá»±c tiếp trên thiết bị — mang lại hoạt ảnh mượt mà hÆ¡n, giao diện native nhất quán, thá»i gian tải nhanh hÆ¡n và không phụ thuá»™c vào WebView runtime. Xem Lấy flows & paywalls và Hiển thị flows & paywalls để bắt đầu.

Khi ngưá»i dùng trả lá»i câu há»i trong quiz hoặc nhập dữ liệu vào trưá»ng input, phương thức onStateUpdatedAction sẽ được gá»i. Bạn có thể lưu hoặc xá»­ lý loại trưá»ng đó trong code cá»§a mình.

Ví dụ:

// Full-screen presentation
void onboardingViewOnStateUpdatedAction(
  AdaptyUIOnboardingView view,
  AdaptyUIOnboardingMeta meta,
  String elementId,
  AdaptyOnboardingsStateUpdatedParams params,
) {
  // Process data 
}

// Embedded widget
onStateUpdatedAction: (meta, elementId, params) {
  // Process data 
}

Xem định dạng action tại đây.

Hình dạng thuộc tính cho từng kiểu params (nhấn để mở rộng)
void onboardingViewOnStateUpdatedAction(
  AdaptyUIOnboardingView view,
  AdaptyUIOnboardingMeta meta,
  String elementId,
  AdaptyOnboardingsStateUpdatedParams params,
) {
  // elementId là một String:
  elementId; // 'preference_selector'

  // meta — AdaptyUIOnboardingMeta:
  meta.onboardingId;   // 'onboarding_123'
  meta.screenClientId; // 'preferences_screen'
  meta.screenIndex;    // 1
  meta.screensTotal;   // 3

  // params là một trong các lớp con của AdaptyOnboardingsStateUpdatedParams:
  switch (params) {
    case AdaptyOnboardingsSelectParams(:final id, :final value, :final label):
      // má»™t tùy chá»n được chá»n
      id;    // 'option_1'
      value; // 'premium'
      label; // 'Premium Plan'
      break;
    case AdaptyOnboardingsMultiSelectParams(:final params):
      // danh sách các tùy chá»n được chá»n, má»—i tùy chá»n là AdaptyOnboardingsSelectParams
      params; // [(id: 'interest_1', value: 'sports', label: 'Sports'), (id: 'interest_2', value: 'music', label: 'Music')]
      break;
    case AdaptyOnboardingsInputParams(:final input):
      switch (input) {
        case AdaptyOnboardingsTextInput(:final value):
          value; // 'John Doe'
          break;
        case AdaptyOnboardingsEmailInput(:final value):
          value; // 'user@example.com'
          break;
        case AdaptyOnboardingsNumberInput(:final value):
          value; // 25.0 (a double)
          break;
      }
      break;
    case AdaptyOnboardingsDatePickerParams(:final day, :final month, :final year):
      day;   // 15
      month; // 6
      year;  // 1990
      break;
  }
}

Các trưá»ng hợp sá»­ dụng

Làm phong phú hồ sÆ¡ ngưá»i dùng vá»›i dữ liệu

Nếu bạn muốn liên kết ngay dữ liệu đầu vào vá»›i hồ sÆ¡ ngưá»i dùng và tránh há»i há» hai lần vá» cùng má»™t thông tin, bạn cần cập nhật hồ sÆ¡ ngưá»i dùng vá»›i dữ liệu đầu vào khi xá»­ lý action.

Ví dụ: bạn yêu cầu ngưá»i dùng nhập tên cá»§a há» vào trưá»ng văn bản có ID name, và bạn muốn đặt giá trị cá»§a trưá»ng này làm tên cá»§a ngưá»i dùng. Ngoài ra, bạn cÅ©ng yêu cầu há» nhập email vào trưá»ng email. Trong code cá»§a ứng dụng, nó có thể trông như thế này:

// Full-screen presentation
void onboardingViewOnStateUpdatedAction(
  AdaptyUIOnboardingView view,
  AdaptyUIOnboardingMeta meta,
  String elementId,
  AdaptyOnboardingsStateUpdatedParams params,
) {
  // Store user preferences or responses
  if (params is AdaptyOnboardingsInputParams) {
    final builder = AdaptyProfileParametersBuilder();
    
    // Map elementId to appropriate profile field
    switch (elementId) {
      case 'name':
        if (params.input is AdaptyOnboardingsTextInput) {
          builder.setFirstName((params.input as AdaptyOnboardingsTextInput).value);
        }
        break;
      case 'email':
        if (params.input is AdaptyOnboardingsEmailInput) {
          builder.setEmail((params.input as AdaptyOnboardingsEmailInput).value);
        }
        break;
    }
    
    // Update profile
    Adapty().updateProfile(builder.build()).catchError((error) {
      // handle the error
    });
  }
}

// Embedded widÿÿget
onStateUpdatedAction: (meta, elementId, params) {
  // Store user preferences or responses
  if (params is AdaptyOnboardingsInputParams) {
    final builder = AdaptyProfileParametersBuilder();
    
    // Map elementId to appropriate profile field
    switch (elementId) {
      case 'name':
        if (params.input is AdaptyOnboardingsTextInput) {
          builder.setFirstName((params.input as AdaptyOnboardingsTextInput).value);
        }
        break;
      case 'email':
        if (params.input is AdaptyOnboardingsEmailInput) {
          builder.setEmail((params.input as AdaptyOnboardingsEmailInput).value);
        }
        break;
    }
    
    // Update profile
    Adapty().updateProfile(builder.build()).catchError((error) {
      // handle the error
    });
  }
}

Tùy chỉnh paywall dá»±a trên câu trả lá»i

Sá»­ dụng quiz trong onboarding, bạn có thể tùy chỉnh paywall hiển thị cho ngưá»i dùng sau khi há» hoàn thành onboarding.

Ví dụ, bạn có thể há»i ngưá»i dùng vá» kinh nghiệm tập thể thao cá»§a há» và hiển thị các CTA và sản phẩm khác nhau cho từng nhóm ngưá»i dùng.

  1. Thêm quiz trong trình tạo onboarding và gán ID có ý nghÄ©a cho các lá»±a chá»n cá»§a nó.
experience.webp
  1. Xá»­ lý các phản hồi quiz dá»±a trên ID cá»§a chúng và thiết lập thuá»™c tính tùy chỉnh cho ngưá»i dùng.
// Full-screen presentation
void onboardingViewOnStateUpdatedAction(
  AdaptyUIOnboardingView view,
  AdaptyUIOnboardingMeta meta,
  String elementId,
  AdaptyOnboardingsStateUpdatedParams params,
) {
  // Handle quiz responses and set custom attributes
  if (params is AdaptyOnboardingsSelectParams) {
    final builder = AdaptyProfileParametersBuilder();
    
    // Map quiz responses to custom attributes
    switch (elementId) {
      case 'experience':
        // Set custom attribute 'experience' with the selected value (beginner, amateur, pro)
        builder.setCustomStringAttribute(params.value, 'experience');
        break;
    }
    
    // Update profile
    Adapty().updateProfile(builder.build()).catchError((error) {
      // handle the error
    });
  }
}

// Embedded widget
onStateUpdatedAction: (meta, elementId, params) {
  // Handle quiz responses and set custom attributes
  if (params is AdaptyOnboardingsSelectParams) {
    final builder = AdaptyProfileParametersBuilder();
    
    // Map quiz responses to custom attributes
    switch (elementId) {
      case 'experience':
        // Set custom attribute 'experience' with the selected value (beginner, amateur, pro)
        builder.setCustomStringAttribute(params.value, 'experience');
        break;
    }
    
    // Update profile
    Adapty().updateProfile(builder.build()).catchError((error) {
      // handle the error
    });
  }
}
  1. Tạo phân khúc cho từng giá trị thuộc tính tùy chỉnh.
  2. Tạo một placement và thêm đối tượng cho từng phân khúc bạn đã tạo.
  3. Hiển thị paywall cho placement trong code của ứng dụng. Nếu onboarding của bạn có nút mở paywall, hãy triển khai code paywall như một phản hồi cho hành động của nút này.
ÿÿÿÿ