Lấy flows & paywalls - React Native

Sau khi bạn đã thiết kế flow hoặc paywall bằng Paywall Builder, bạn có thể hiển thị chúng trong ứng dụng di động của mình. Bước đầu tiên là lấy flow hoặc paywall được liên kết với placement cùng cấu hình hiển thị của nó như mô tả bên dưới.

Lưu ý rằng chủ đề này đề cập đến flow và các paywall được tùy chỉnh bằng Paywall Builder. Nếu bạn đang triển khai paywall theo cách thủ công, vui lòng tham khảo chủ đề Lấy paywall và sản phẩm cho remote config paywall trong ứng dụng di động của bạn.

Muốn xem ví dụ thực tế về cách tích hợp Adapty SDK vào ứng dụng di động? Hãy xem ứng dụng mẫu của chúng tôi, nơi minh họa toàn bộ quá trình thiết lập, bao gồm hiển thị paywall, thực hiện mua hàng và các chức năng cơ bản khác.

Trước khi bắt đầu hiển thị flow và paywall trong ứng dụng mobile của bạn (nhấn để mở rộng)

Tạo sản phẩm của bạn trong Adapty Dashboard.
Tạo flow/paywall và thêm sản phẩm vào đó trong Adapty Dashboard.
Tạo placement và thêm flow/paywall vào đó trong Adapty Dashboard.
Cài đặt Adapty SDK trong ứng dụng mobile của bạn.

Lấy flow/paywall

Nếu bạn đã thiết kế một flow hoặc paywall bằng Flow Builder hoặc Paywall Builder, bạn không cần lo lắng về việc render nó trong code ứng dụng để hiển thị cho người dùng. Flow hoặc paywall đó đã bao gồm cả nội dung cần hiển thị lẫn cách hiển thị. Tuy nhiên, bạn vẫn cần lấy ID của nó thông qua placement, cấu hình view, rồi mới trình bày nó trong ứng dụng. Tải flow hoặc paywall và tạo view của nó càng sớm càng tốt — lý tưởng là trước khi hiển thị. Phương thức createFlowView tải cấu hình view và bắt đầu tải xuống, cache hình ảnh ở chế độ nền. Bạn gọi nó càng sớm thì các hình ảnh đó càng có nhiều thời gian để hoàn tất. Đến khi hiển thị flow hoặc paywall, cấu hình và hình ảnh đã được cache sẵn sàng để hiển thị.

Để lấy flow hoặc paywall, dùng phương thức getFlow:

try {
    const placementId = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlow(placementId);
  // flow/paywall đượ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 Mã định danh của Placement mong muốn. Đây là giá trị bạn đã chỉ định khi tạo placement trong Adapty Dashboard.

Tham số	Bắt buộc	Mô tả
placementId	bắt buộc	Mã định danh của Placement mong muốn. Đây là giá trị bạn đã chỉ định khi tạo placement trong Adapty Dashboard.
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 nếu thất bại. Chúng tôi khuyến nghị dùng 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 tình trạng mạng 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 thời gian tải sẽ nhanh hơn bất kể kết nối mạng của họ ra sao. Cache được cập nhật thường xuyên, nên hoàn toàn an toàn khi dùng trong phiên để 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ực hiện dọn dẹp thủ công. Adapty SDK lưu trữ paywall cục bộ theo hai lớp: cache được cập nhật thường xuyên như mô tả ở trên và paywall dự phòng. Chúng tôi cũng sử dụng CDN để tải paywall 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 paywall trong khi vẫn đảm bảo độ tin cậy ngay cả khi kết nối mạng kém.
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ị đã chỉ định trong `loadTimeout`, do thao tác có thể bao gồm nhiều yêu cầu khác nhau bên dưới. Đối với Android: Bạn có thể tạo `TimeInterval` bằng các hàm mở rộng (như `5.seconds`, trong đó `.seconds` được lấy từ `import com.adapty.utils.seconds`), hoặc `TimeInterval.seconds(5)`. Để không giới hạn thời gian chờ, hãy dùng `TimeInterval.INFINITE`.

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 nếu thất bại. Chúng tôi khuyến nghị dùng 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 tình trạng mạng 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 thời gian tải sẽ nhanh hơn bất kể kết nối mạng của họ ra sao. Cache được cập nhật thường xuyên, nên hoàn toàn an toàn khi dùng trong phiên để 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ực hiện dọn dẹp thủ công.

Adapty SDK lưu trữ paywall cục bộ theo hai lớp: cache được cập nhật thường xuyên như mô tả ở trên và paywall dự phòng. Chúng tôi cũng sử dụng CDN để tải paywall 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 paywall trong khi vẫn đảm bảo độ tin cậy ngay cả khi kết nối mạng kém.

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ị đã chỉ định trong loadTimeout, do thao tác có thể bao gồm nhiều yêu cầu khác nhau bên dưới.

Đối với Android: Bạn có thể tạo TimeInterval bằng các hàm mở rộng (như 5.seconds, trong đó .seconds được lấy từ import com.adapty.utils.seconds), hoặc TimeInterval.seconds(5). Để không giới hạn thời gian chờ, hãy dùng TimeInterval.INFINITE.

Tham số phản hồi

Tham số	Mô tả
Flow	Một đối tượng `AdaptyFlow` chứa các mã định danh của flow (`id`, `variationId`), tên, placement, các biến thể paywall (`paywalls`) và bất kỳ Remote Config nào (`remoteConfigs`).

Lấy cấu hình view

Hãy đảm bảo bật toggle Show on device trong builder. Nếu tùy chọn này chưa được bật, cấu hình view sẽ không thể lấy được.

Nếu placement được thiết kế trong Flow Builder hoặc Paywall Builder, Adapty sẽ tự động render giao diện cho bạn. Tạo view bằng createFlowView, sau đó hiển thị flow hoặc paywall. Nếu placement là một paywall tùy chỉnh không có giao diện Builder, hãy xử lý nó như một paywall Remote Config. Trong React Native SDK, hãy gọi createFlowView trực tiếp — bạn không cần fetch cấu hình view trước.

Kết quả của phương thức createFlowView chỉ có thể được 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 createFlowView từ đầu. Gọi hai lần mà không tạo lại có thể dẫn đến lỗi AdaptyUIError.viewAlreadyPresented.


try {
  const view = await createFlowView(flow);
} catch (error) {
  // handle the error
}

Tham số:

Tham số	Bắt buộc	Mô tả
flow	bắt buộc	Đối tượng `AdaptyFlow` để lấy controller cho flow/paywall mong muốn.
customTags	tùy chọn	Định nghĩa một dictionary các custom tag và giá trị tương ứng. Custom tag đóng vai trò là placeholder trong nội dung, được thay thế động bằng các chuỗi cụ thể để cá nhân hóa nội dung trong flow/paywall. Tham khảo chủ đề Custom tags in paywall builder để biết thêm chi tiết.
prefetchProducts	tùy chọn	Bật để tối ưu thời điểm hiển thị sản phẩm trên màn hình. Khi đặt là `true`, AdaptyUI sẽ tự động tải các sản phẩm cần thiết. Mặc định: `false`.
android.enableSafeArea	tùy chọn	Chỉ dành cho Android (bỏ qua trên iOS). Truyền dưới dạng đối tượng lồng nhau: `android: { enableSafeArea: true }`. Khi đặt là `true`, flow view sẽ áp dụng padding safe-area. Mặc định là `true` cho kiểu trình bày modal (`createFlowView` + `present()`) và `false` cho component `AdaptyFlowView` nhúng. Giá trị mặc định phù hợp với hầu hết các trường hợp.

Nếu bạn đang sử dụng nhiều ngôn ngữ, hãy tìm hiểu cách thêm bản địa hóa flow và cách sử dụng mã ngôn ngữ đúng cách tại đây.

Sau khi có view, hãy hiển thị flow/paywall.

Lấy flow hoặc paywall cho đối tượng mặc định để tải nhanh hơn

Thông thường, flow và paywall đượ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ăng tốc quá trình này. Tuy nhiên, trong trường hợp bạn có nhiều đối tượng và placement, và người dùng có kết nối internet yếu, việc tải flow hoặc paywall 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ị flow hoặc paywall 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 getFlowForDefaultAudience, phương thức này sẽ lấy flow hoặc paywall 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 flow hoặc paywall bằng phương thức getFlow, như đã mô tả chi tiết trong phần Lấy flow/paywall ở trên.

Lý do chúng tôi khuyến nghị sử dụng getFlow

Phương thức getFlowForDefaultAudience có một số hạn chế đáng kể:

Các vấn đề tương thích ngược tiềm ẩn: Nếu bạn cần hiển thị các paywall khác nhau cho các phiên bản ứng dụng khác nhau (hiện tại và tương lai), bạn có thể gặp khó khăn. Bạn sẽ phải thiết kế các paywall hỗ trợ phiên bản hiện tại (cũ) hoặc chấp nhận rằng người dùng với phiên bản hiện tại (cũ) có thể gặp sự cố với các paywall không được hiển thị.
Mất khả năng nhắm mục tiêu: Tất cả người dùng sẽ thấy cùng một paywall được thiết kế cho đối tượng All Users, nghĩa là bạn mất khả năng nhắm mục tiêu cá nhân hóa (bao gồm theo quốc gia, attribution marketing hoặc các thuộc tính tùy chỉnh của bạn). Nếu bạn sẵn sàng chấp nhận những hạn chế này để đổi lấy tốc độ tải flow hoặc paywall nhanh hơn, hãy sử dụng phương thức getFlowForDefaultAudience như sau. Nếu không, hãy tiếp tục dùng getFlow như đã mô tả ở trên.

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlowForDefaultAudience(id);
  // the requested flow/paywall
} catch (error) {
    // handle the error
}

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

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

Tham số	Bắt buộc	Mô tả
placementId	bắt buộc	Mã định danh của Placement. Đây là giá trị bạn đã chỉ định khi tạo placement trong Adapty Dashboard.
fetchPolicy	mặc định: `.reloadRevalidatingCacheData`	Theo mặc định, SDK sẽ cố tải dữ liệu từ server và trả về dữ liệu đã cache nếu thất bại. Chúng tôi khuyến nghị dùng 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 xuyên gặp mạng 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 thời gian tải sẽ nhanh hơn, bất kể kết nối mạng có chập chờn đến đâu. Cache được cập nhật thường xuyên nên hoàn toàn an toàn khi 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òn 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.

fetchPolicy

mặc định: .reloadRevalidatingCacheData

Theo mặc định, SDK sẽ cố tải dữ liệu từ server và trả về dữ liệu đã cache nếu thất bại. Chúng tôi khuyến nghị dùng 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 xuyên gặp mạng 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 thời gian tải sẽ nhanh hơn, bất kể kết nối mạng có chập chờn đến đâu. Cache được cập nhật thường xuyên nên hoàn toàn an toàn khi 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òn 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.

Tùy chỉnh assets

Để tùy chỉnh hình ảnh và video trong flow/paywall của bạn, hãy triển khai custom assets.

Hero image và video có ID được định sẵn: hero_image và hero_video. Trong một custom asset bundle, bạn nhắm đến các phần tử này theo ID của chúng và tùy chỉnh hành vi của chúng.

Đối với các hình ảnh và video khác, bạn cần đặt ID tùy chỉnh trong Adapty dashboard.

Ví dụ, bạn có thể:

Hiển thị hình ảnh hoặc video khác nhau cho một số người dùng.
Hiển thị hình ảnh preview cục bộ trong khi hình ảnh chính từ xa đang tải.
Hiển thị hình ảnh preview trước khi phát video.

Để sử dụng tính năng này, hãy cập nhật Adapty React Native SDK lên phiên bản 3.8.0 trở lên.

Dưới đây là ví dụ về cách cung cấp custom assets thông qua một dictionary đơn giản:

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createFlowView(flow, { customAssets })

Nếu không tìm thấy asset, flow/paywall sẽ quay về giao diện mặc định của nó.

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

Paywall Builder mới hoạt động với React Native SDK phiên bản 3.0 trở lên.

Vui lòng lưu ý rằng chủ đề này đề cập đến các paywall được tùy chỉnh bằng Paywall Builder. Nếu bạn đang triển khai paywall theo cách thủ công, hãy tham khảo chủ đề Lấy paywall và sản phẩm cho Remote Config paywall trong ứng dụng mobile của bạn.

Trước khi bắt đầu hiển thị paywall trong ứng dụng mobile của bạn (nhấn để mở rộng)

Tạo sản phẩm của bạn trong Adapty Dashboard.
Tạo paywall và thêm sản phẩm vào đó trong Adapty Dashboard.
Tạo placement và thêm paywall vào đó trong Adapty Dashboard.
Cài đặt Adapty SDK vào ứng dụng di động của bạn.

Lấy paywall được thiết kế bằng Paywall Builder

Nếu bạn đã thiết kế paywall bằng Paywall Builder, bạn không cần lo lắng về việc render nó trong code ứng dụng để hiển thị cho người dùng. Loại paywall này chứa đầy đủ cả nội dung hiển thị lẫn cách hiển thị. Tuy nhiên, bạn vẫn cần lấy ID của nó thông qua placement, cấu hình view, rồi mới hiển thị nó trong ứng dụng. Để đảm bảo hiệu suất tối ưu, điều quan trọng là phải lấy paywall và cấu hình view của nó càng sớm càng tốt, nhằm dành đủ thời gian để tải ảnh trước khi hiển thị cho người dùng.

Để lấy paywall, sử dụng phương thức getPaywall:

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

    const paywall = await adapty.getPaywall(placementId, locale);
  // paywall đượ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 paywall. Tham số này phải là mã ngôn ngữ gồm một hoặc hai subtag được phân tách bằng ký tự gạch ngang (-). Subtag đầu tiên là ngôn ngữ, subtag 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ừ server và trả về dữ liệu đã cache nếu thất bại. Chúng tôi khuyến nghị dùng 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 xuyên gặp tình trạng 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 thời gian tải sẽ nhanh hơn bất kể kết nối internet có kém đến đâu. Cache được cập nhật thường xuyên, nên hoàn toàn an toàn khi sử 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 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ữ paywall cục bộ theo hai lớp: cache được cập nhật thường xuyên như mô tả ở trên và paywall dự phòng. Chúng tôi cũng sử dụng CDN để tải paywall nhanh hơn và một server 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 paywall, đồng thời đảm bảo độ tin cậy ngay cả khi kết nối internet không ổn định.
loadTimeoutMs	mặc định: 5 giây	Giá trị này giới hạn thời gian timeout cho phương thức này. Nếu đạt đến giới hạn timeout, 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ể timeout muộn hơn một chút so với giá trị đã chỉ định trong `loadTimeout`, do thao tác có thể bao gồm nhiều yêu cầu khác nhau bên dưới. Đối với Android: Bạn có thể tạo `TimeInterval` bằng các extension function (như `5.seconds`, trong đó `.seconds` đến từ `import com.adapty.utils.seconds`), hoặc `TimeInterval.seconds(5)`. Để không giới hạn, hãy dùng `TimeInterval.INFINITE`.

Tham số phản hồi

Tham số	Mô tả
Paywall	Đối tượng `AdaptyPaywall` chứa danh sách ID sản phẩm, mã định danh paywall, Remote Config và một số thuộc tính khác.

Lấy cấu hình hiển thị của paywall được thiết kế bằng Paywall Builder

Hãy đảm bảo bật toggle Show on device trong Paywall Builder. Nếu tùy chọn này chưa được bật, cấu hình hiển thị sẽ không thể lấy được.

Sau khi lấy paywall, hãy kiểm tra xem nó có chứa ViewConfiguration hay không — đây là dấu hiệu cho biết paywall được tạo bằng Paywall Builder. Điều này sẽ giúp bạn xác định cách hiển thị paywall. Nếu có ViewConfiguration, hãy xử lý nó như một Paywall Builder paywall; nếu không, xử lý nó như một Remote Config paywall.

Trong React Native SDK, hãy gọi trực tiếp phương thức createPaywallView mà không cần tự lấy view configuration trước.

Kết quả của phương thức createPaywallView chỉ có thể được sử dụng một lần. Nếu bạn cần sử dụng lại, hãy gọi lại phương thức createPaywallView từ đầu. Việc 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 {createPaywallView} from 'react-native-adapty/dist/ui';

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

Tham số:

Tham số	Bắt buộc	Mô tả
paywall	bắt buộc	Đối tượng `AdaptyPaywall` để lấy controller cho paywall mong muốn.
customTags	tùy chọn	Định nghĩa một dictionary gồm các custom tag và giá trị tương ứng. Custom tag đóng vai trò là placeholder trong nội dung paywall, được thay thế động bằng các chuỗi cụ thể để cá nhân hóa nội dung trong paywall. Xem thêm trong phần Custom tags in paywall builder để biết thêm chi tiết.
prefetchProducts	tùy chọn	Bật tùy chọn này để tối ưu hóa thời điểm hiển thị sản phẩm trên màn hình. Khi đặt là `true`, AdaptyUI sẽ tự động tải các sản phẩm cần thiết. Mặc định: `false`.

Nếu bạn đang sử dụng nhiều ngôn ngữ, hãy tìm hiểu cách thêm bản địa hóa Paywall Builder và cách sử dụng mã locale đúng cách tại đây.

Sau khi có view, hãy hiển thị paywall.

Lấy paywall cho đối tượng mặc định để tải nhanh hơn

Thông thường, paywall đượ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 độ. Tuy nhiên, trong trường hợp bạn có nhiều đối tượng và paywall, và người dùng của bạn có kết nối internet yếu, việc tải paywall có thể mất nhiều thời gian hơn mong đợi. Trong những tình huống như vậy, bạn có thể muốn hiển thị paywall mặc định để đảm bảo trải nghiệm người dùng mượt mà thay vì không hiển thị paywall nào cả. Để giải quyết vấn đề này, bạn có thể dùng phương thức getPaywallForDefaultAudience, phương thức này lấy paywall của placement đã 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ị vẫn là lấy paywall bằng phương thức getPaywall, như đã trình bày chi tiết trong phần Lấy thông tin Paywall ở trên.

Lý do chúng tôi khuyến nghị dùng getPaywall

Phương thức getPaywallForDefaultAudience có một số hạn chế đáng kể:

Các vấn đề về khả năng tương thích ngược: Nếu bạn cần hiển thị các paywall khác nhau cho các phiên bản ứng dụng khác nhau (hiện tại và tương lai), bạn có thể gặp khó khăn. Bạn sẽ phải thiết kế các paywall hỗ trợ phiên bản hiện tại (cũ) hoặc chấp nhận rằng người dùng đang dùng phiên bản hiện tại (cũ) có thể gặp sự cố với các paywall không hiển thị được.
Mất khả năng nhắm mục tiêu: Tất cả người dùng sẽ thấy cùng một paywall được thiết kế cho đối tượng All Users, nghĩa là bạn mất đi khả năng cá nhân hóa (bao gồm theo quốc gia, attribution marketing hoặc các thuộc tính tùy chỉnh của riêng bạn). Nếu bạn chấp nhận những hạn chế đó để đổi lấy tốc độ tải paywall nhanh hơn, hãy sử dụng phương thức getPaywallForDefaultAudience như sau. Nếu không, hãy tiếp tục dùng getPaywall được mô tả ở trên.

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

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

Phương thức getPaywallForDefaultAudience khả dụng từ React Native SDK phiên bản 2.11.2 trở lên.

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

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

Tham số	Bắt buộc	Mô tả
placementId	bắt buộc	Mã định danh của Placement. Đây là giá trị bạn đã chỉ định khi tạo placement trong Adapty Dashboard.
locale	tùy chọn mặc định: `en`	Mã định danh của bản địa hóa paywall. Tham số này phải là mã ngôn ngữ gồm một hoặc nhiều thẻ phụ được phân tách bằng dấu trừ (-). Thẻ phụ đầu tiên là ngôn ngữ, thẻ 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ã ngôn ngữ để biết thêm thông tin về mã ngôn ngữ 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 đã lưu trong cache nếu 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 xuyên gặp tình trạng kết nối 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 thời gian tải sẽ nhanh hơn dù kết nối mạng không ổn định. Cache được cập nhật thường xuyên nên hoàn toàn an toàn khi dùng trong phiên làm việc để tránh các yêu cầu mạng không cần thiết. Lưu ý rằng cache vẫn được giữ nguyên sau 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.

locale

tùy chọn

mặc định: en

Mã định danh của bản địa hóa paywall. Tham số này phải là mã ngôn ngữ gồm một hoặc nhiều thẻ phụ được phân tách bằng dấu trừ (-). Thẻ phụ đầu tiên là ngôn ngữ, thẻ 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ã ngôn ngữ để biết thêm thông tin về mã ngôn ngữ 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 đã lưu trong cache nếu 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 xuyên gặp tình trạng kết nối 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 thời gian tải sẽ nhanh hơn dù kết nối mạng không ổn định. Cache được cập nhật thường xuyên nên hoàn toàn an toàn khi dùng trong phiên làm việc để tránh các yêu cầu mạng không cần thiết.

Lưu ý rằng cache vẫn được giữ nguyên sau 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.

Tùy chỉnh assets

Để tùy chỉnh hình ảnh và video trong paywall của bạn, hãy triển khai custom assets.

Hình ảnh và video hero có ID được định sẵn: hero_image và hero_video. Trong một custom asset bundle, bạn nhắm đến các phần tử này bằng ID của chúng và tùy chỉnh hành vi của chúng.

Đối với các hình ảnh và video khác, bạn cần đặt custom ID trong Adapty dashboard.

Ví dụ, bạn có thể:

Hiển thị hình ảnh hoặc video khác cho một số người dùng.
Hiển thị hình ảnh xem trước cục bộ trong khi hình ảnh chính từ remote đang tải.
Hiển thị hình ảnh xem trước trước khi chạy video.

Để sử dụng tính năng này, hãy cập nhật Adapty React Native SDK lên phiên bản 3.8.0 trở lên.

Dưới đây là ví dụ về cách cung cấp custom assets thông qua một dictionary đơn giản:

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createPaywallView(paywall, { customAssets })

Nếu không tìm thấy asset, paywall sẽ trở về giao diện mặc định của nó.