ÿÿ Onboarding | React Native SDK | Tài liệu Adapty
English 中文TürkçeРуÑÑкийEspañol日本語Tiếng Việt

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

Onboarding đã 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Æ° onboarding chạy bên trong WebView, flows render trá»±c tiếp trên thiết bị — mang lại hiệu ứng chuyển Ä‘á»™ng 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 ô input, phÆ°Æ¡ng thức onStateUpdatedAction sẽ được gá»i. Bạn có thể lÆ°u hoặc xá»­ lý loại trÆ°á»ng dữ liệu đó trong code của mình.

Ví dụ:

// Full-screen presentation
const unsubscribe = view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Process data 
  },
});

// Embedded widget
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Process data 
    },
  }}
/>

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

Ví dụ dữ liệu đã lưu (định dạng có thể khác nhau tùy cách triển khai của bạn)
// Example of a saved select action
{
    "elementId": "preference_selector",
    "elementType": "select",
    "value": {
        "id": "option_1",
        "value": "premium",
        "label": "Premium Plan"
    },
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "preferences_screen",
        "screenIndex": 1,
        "totalScreens": 3
    }
}

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

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

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

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 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 vào trÆ°á»ng văn bản có ID là 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 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
const unsubscribe = view.setÿÿEventHandlers({
  onStateUpdated(action, meta) {
    // Store user preferences or responses
    if (action.elementType === 'input') {
      const profileParams = {};
      
      // 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(profileParams).catch(error => {
          // handle the error
        });
      }
    }
  },
});

// Embedded widget
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Store user preferences or responses
      if (action.elementType === 'input') {
        const profileParams = {};
        
        // 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(profileParams).catch(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 các 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 thể thao của há» và hiển thị các CTA cÅ©ng nhÆ° sản phẩm khác nhau cho từng nhóm ngÆ°á»i dùng.

  1. Thêm quiz trong trình xây dá»±ng onboarding và gán ID có ý nghÄ©a cho các lá»±a chá»n.
experience.webp
  1. Xá»­ lý các phản hồi quiz dá»±a trên ID của chúng và đặt thuá»™c tính tùy chỉnh cho ngÆ°á»i dùng.
// Full-screen presentation
const unsubscribe = view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Handle quiz responses and set custom attributes
    if (action.elementType === 'select') {
      const profileParams = {};
      
      // 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(profileParams).catch(error => {
          // handle the error
        });
      }
    }
  },
});

// Embedded widget
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Handle quiz responses and set custom attributes
      if (action.elementType === 'select') {
        const profileParams = {};
        
        // 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(profileParams).catch(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 ứng dụng của bạn. 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.
ÿÿÿÿ