Lấy 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 animation 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.

Sau khi bạn đã thiết kế phần giao diện cho onboarding của mình bằng builder trong Adapty Dashboard, bạn có thể hiển thị nó trong ứng dụng React Native của mình. Bước đầu tiên trong quá trình này là lấy onboarding được liên kết với placement và cấu hình view của nó như mô tả bên dưới.

Trước khi bắt đầu, hãy đảm bảo rằng:

Bạn đã cài đặt Adapty React Native SDK phiên bản 3.8.0 trở lên.
Bạn đã tạo một onboarding.
Bạn đã thêm onboarding vào một placement.

Tải onboarding

Khi bạn tạo một onboarding bằng công cụ xây dựng không cần code của chúng tôi, nó được lưu trữ dưới dạng một container chứa cấu hình mà ứng dụng của bạn cần tải về và hiển thị. Container này quản lý toàn bộ trải nghiệm — nội dung hiển thị, cách trình bày, và cách xử lý các tương tác của người dùng (như câu trả lời quiz hoặc dữ liệu nhập form). Container cũng tự động theo dõi các sự kiện analytics, vì vậy bạn không cần phải tự tích hợp tính năng theo dõi lượt xem riêng.

Để đạt hiệu suất tốt nhất, hãy tải cấu hình onboarding sớm để hình ảnh có đủ thời gian tải xuống trước khi hiển thị cho người dùng. Để lấy onboarding, hãy sử dụng phương thức getOnboarding:

try {
    const placementId = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const onboarding = await adapty.getOnboarding(placementId, locale);
    // the requested onboarding
} catch (error) {
    // handle the error
}

Sau đó, gọi phương thức createOnboardingView để tạo một instance view.

Kết quả của phương thức createOnboardingView chỉ có thể sử dụng một lần. Nếu cần dùng lại, hãy gọi lại phương thức createOnboardingView từ đầu. Gọi hai lần mà không tạo lại có thể dẫn đến lỗi AdaptyUIError.viewAlreadyPresented.

// for the Adapty SDK < 3.14 – import {createOnboardingView} from 'react-native-adapty/dist/ui';

if (onboarding.hasViewConfiguration) {
    try {
        const view = await createOnboardingView(onboarding);
    } catch (error) {
        // handle the error
    }
} else {
    //use your custom logic
}

Tham số:

Tham số	Bắt buộc	Mô tả
placementId	bắt buộc	Định danh của Placement mong muốn. Đây là giá trị bạn đã chỉ định khi tạo placement trong Adapty Dashboard.
locale	tùy chọn mặc định: `en`	Định danh bản địa hóa của onboarding. Tham số này là mã ngôn ngữ gồm một hoặc hai thẻ con được ngăn cách bởi ký tự dấu trừ (-). Thẻ con đầu tiên là ngôn ngữ, thẻ con thứ hai là vùng. Ví dụ: `en` là tiếng Anh, `pt-br` là tiếng Bồ Đào Nha (Brazil). Xem Bản địa hóa và mã locale để biết thêm thông tin về mã locale và cách chúng tôi khuyến nghị sử dụng chúng.
fetchPolicy	mặc định: `.reloadRevalidatingCacheData`	Theo mặc định, SDK sẽ cố tải dữ liệu từ máy chủ và trả về dữ liệu đã cache trong trường hợp thất bại. Chúng tôi khuyến nghị tùy chọn này vì nó đảm bảo người dùng luôn nhận được dữ liệu mới nhất. Tuy nhiên, nếu bạn cho rằng người dùng thường gặp kết nối internet không ổn định, hãy cân nhắc dùng `.returnCacheDataElseLoad` để trả về dữ liệu đã cache nếu có. Trong trường hợp này, người dùng có thể không nhận được dữ liệu mới nhất tuyệt đối, nhưng sẽ tải nhanh hơn dù kết nối internet có kém đến đâu. Cache được cập nhật thường xuyên nên có thể dùng trong suốt phiên làm việc để tránh các yêu cầu mạng. Lưu ý rằng cache vẫn được giữ nguyên khi khởi động lại ứng dụng và chỉ bị xóa khi gỡ cài đặt ứng dụng hoặc xóa thủ công. Adapty SDK lưu trữ onboarding cục bộ theo hai lớp: cache được cập nhật thường xuyên như đã mô tả ở trên và các onboarding dự phòng. Chúng tôi cũng dùng CDN để tải onboarding nhanh hơn và một máy chủ dự phòng độc lập trong trường hợp CDN không thể truy cập. Hệ thống này được thiết kế để đảm bảo bạn luôn nhận được phiên bản mới nhất của onboarding, đồng thời đảm bảo độ tin cậy ngay cả khi kết nối internet hạn chế.
loadTimeoutMs	mặc định: 5 giây	Giá trị này giới hạn thời gian chờ cho phương thức này. Nếu hết thời gian chờ, dữ liệu đã cache hoặc fallback cục bộ sẽ được trả về. Lưu ý rằng trong một số trường hợp hiếm gặp, phương thức này có thể hết thời gian chờ muộn hơn một chút so với giá trị được chỉ định trong `loadTimeout`, vì thao tác có thể bao gồm nhiều yêu cầu khác nhau bên trong.
Tham số phản hồi:

Tham số	Mô tả
Onboarding	Một đối tượng `AdaptyOnboarding` bao gồm: định danh và cấu hình của onboarding, Remote Config, và một số thuộc tính khác.

Tăng tốc độ tải onboarding với onboarding mặc định cho đối tượng

Thông thường, onboarding được tải gần như ngay lập tức, nên bạn không cần lo lắng về việc tối ưu tốc độ này. Tuy nhiên, trong trường hợp bạn có nhiều đối tượng và onboarding, và người dùng của bạn có kết nối internet yếu, việc tải onboarding có thể mất nhiều thời gian hơn mong muốn. Trong những tình huống như vậy, bạn có thể muốn hiển thị một onboarding mặc định để đảm bảo trải nghiệm người dùng mượt mà thay vì không hiển thị gì cả. Để giải quyết vấn đề này, bạn có thể sử dụng phương thức getOnboardingForDefaultAudience, phương thức này sẽ lấy onboarding của placement được chỉ định cho đối tượng All Users. Tuy nhiên, điều quan trọng cần hiểu là cách tiếp cận được khuyến nghị là lấy onboarding bằng phương thức getOnboarding, như đã trình bày chi tiết trong phần Lấy Onboarding ở trên.

Hãy cân nhắc sử dụng getOnboarding thay vì getOnboardingForDefaultAudience, vì phương thức sau có những hạn chế quan trọng:

Vấn đề tương thích: Có thể gây ra sự cố khi hỗ trợ nhiều phiên bản ứng dụng, đòi hỏi phải thiết kế tương thích ngược hoặc chấp nhận rằng các phiên bản cũ hơn có thể hiển thị không chính xác.
Không có cá nhân hóa: Chỉ hiển thị nội dung cho đối tượng “All Users”, loại bỏ khả năng nhắm mục tiêu theo quốc gia, attribution, hoặc thuộc tính tùy chỉnh.

Nếu tốc độ tải nhanh hơn quan trọng hơn những hạn chế này trong trường hợp sử dụng của bạn, hãy dùng getOnboardingForDefaultAudience như hướng dẫn bên dưới. Nếu không, hãy dùng getOnboarding như đã mô tả ở trên.

try {
    const placementId = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const onboarding = await adapty.getOnboardingForDefaultAudience(placementId, locale);
    // onboarding được yêu cầu
} catch (error) {
    // xử lý lỗi
}

Tham số:

Tham số Bắt buộc Mô tả

placementId bắt buộc Định danh của Placement mong muốn. Đây là giá trị bạn đã chỉ định khi tạo placement trong Adapty Dashboard.

locale

tùy chọn

mặc định: en

Định danh của bản địa hóa onboarding. Tham số này cần là mã ngôn ngữ gồm một hoặc hai thẻ con phân tách bằng ký tự dấu trừ (-). Thẻ con đầu tiên là ngôn ngữ, thẻ con thứ hai là khu vực.

Ví dụ: en là tiếng Anh, pt-br là tiếng Bồ Đào Nha (Brazil).

Xem Bản địa hóa và mã locale để biết thêm thông tin về mã locale và cách chúng tôi khuyến nghị sử dụng chúng.

fetchPolicy

mặc định: .reloadRevalidatingCacheData

Theo mặc định, SDK sẽ cố tải dữ liệu từ máy chủ và trả về dữ liệu đã cache trong trường hợp thất bại. Chúng tôi khuyến nghị tùy chọn này vì nó đảm bảo người dùng luôn nhận được dữ liệu mới nhất.

Tuy nhiên, nếu bạn cho rằng người dùng của mình thường gặp tình trạng internet không ổn định, hãy cân nhắc dùng .returnCacheDataElseLoad để trả về dữ liệu đã cache nếu có. Trong trường hợp này, người dùng có thể không nhận được dữ liệu mới nhất tuyệt đối, nhưng sẽ có tốc độ tải nhanh hơn dù kết nối internet không ổn định. Cache được cập nhật thường xuyên nên an toàn khi dùng trong phiên làm việc để tránh các yêu cầu mạng.

Lưu ý rằng cache vẫn còn nguyên sau khi khởi động lại ứng dụng và chỉ bị xóa khi cài đặt lại ứng dụng hoặc thông qua việc dọn dẹp thủ công.

Adapty SDK lưu trữ onboarding cục bộ theo hai lớp: cache được cập nhật thường xuyên như mô tả ở trên và onboarding dự phòng. Chúng tôi cũng sử dụng CDN để tải onboarding nhanh hơn và một máy chủ dự phòng độc lập trong trường hợp CDN không khả dụng. Hệ thống này được thiết kế để đảm bảo bạn luôn nhận được phiên bản mới nhất của onboarding trong khi vẫn đảm bảo độ tin cậy ngay cả khi kết nối internet hạn chế.