Lấy thông tin paywalls và sản phẩm cho remote config paywalls trong React Native SDK
Trước khi hiển thị remote config và custom paywalls, bạn cần lấy thông tin về chúng. Lưu ý rằng chủ đề này liên quan đến remote config và custom paywalls. Để biết cách lấy paywalls cho các paywall được tùy chỉnh bằng Paywall Builder, hãy xem Lấy paywalls Paywall Builder và cấu hình của chúng.
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 lấy paywalls và sản phẩm trong ứng dụng di động của bạn (nhấn để mở rộng)
-
Tạo sản phẩm trong Adapty Dashboard.
-
Tạo paywall và thêm sản phẩm vào paywall trong Adapty Dashboard.
-
Tạo placement và thêm paywall vào placement trong Adapty Dashboard.
-
Cài đặt Adapty SDK trong ứng dụng di động của bạn.
Lấy thông tin paywall
Trong Adapty, một sản phẩm là sự kết hợp của các sản phẩm từ cả App Store lẫn Google Play. Các sản phẩm đa nền tảng này được tích hợp vào paywalls, cho phép bạn hiển thị chúng trong các placement cụ thể của ứng dụng di động.
Để hiển thị sản phẩm, bạn cần lấy một Paywall từ một trong các placement của mình bằng phương thức getPaywall.
Đừng hardcode product ID. ID duy nhất bạn nên hardcode là placement ID. Paywalls được cấu hình từ xa, nên số lượng sản phẩm và ưu đãi có thể thay đổi bất cứ lúc nào. Ứng dụng của bạn phải xử lý những thay đổi này một cách linh hoạt — nếu hôm nay paywall trả về hai sản phẩm và ngày mai trả về ba, hãy hiển thị tất cả mà không cần thay đổi code.
try {
const id = 'YOUR_PLACEMENT_ID';
const locale = 'en';
const paywall = await adapty.getPaywall(id, locale);
// the requested paywall
} catch (error) {
// handle the error
}| Tham số | Bắt buộc | Mô tả |
|---|---|---|
| placementId | bắt buộc | Đị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: | Định danh của bản địa hóa paywall. Tham số này là một 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ẻ đầu tiên là ngôn ngữ, thẻ thứ hai là vùng. Ví dụ: Xem Localizations and locale codes để 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 đã 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 kết nối internet không ổn định, hãy cân nhắc sử dụ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 gỡ cài đặt ứng dụng hoặc xóa thủ công. Adapty SDK lưu trữ paywalls 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 để lấy paywalls 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 paywall mới nhất trong khi vẫn đảm bảo độ tin cậy ngay cả khi kết nối internet yếu. |
| 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 |
Đừng hardcode product ID! Vì paywalls được cấu hình từ xa, các sản phẩm có sẵn, số lượng sản phẩm và ưu đãi đặc biệt (như dùng thử miễn phí) có thể thay đổi theo thời gian. Hãy đảm bảo code của bạn xử lý được các tình huống này.
Ví dụ: nếu ban đầu bạn nhận được 2 sản phẩm, ứng dụng của bạn nên hiển thị 2 sản phẩm đó. Nhưng nếu sau này bạn nhận được 3 sản phẩm, ứng dụng của bạn nên hiển thị cả 3 mà không cần thay đổi code. Điều duy nhất bạn phải hardcode là placement ID.
Tham số trả về:
| Tham số | Mô tả |
|---|---|
| Paywall | Một đối tượng AdaptyPaywall với: danh sách product ID, định danh paywall, Remote Config và một số thuộc tính khác. |
Lấy sản phẩm
Sau khi có paywall, bạn có thể truy vấn mảng sản phẩm tương ứng với nó:
try {
// ...paywall
const products = await adapty.getPaywallProducts(paywall);
// the requested products list
} catch (error) {
// handle the error
}Tham số trả về:
| Tham số | Mô tả |
|---|---|
| Products | Danh sách các đối tượng AdaptyPaywallProduct với: định danh sản phẩm, tên sản phẩm, giá, đơn vị tiền tệ, thời hạn gói đăng ký và một số thuộc tính khác. |
Khi tự thiết kế paywall, bạn sẽ cần truy cập các thuộc tính này từ đối tượng AdaptyPaywallProduct. Dưới đây là các thuộc tính được sử dụng phổ biến nhất, nhưng hãy tham khảo tài liệu được liên kết để xem đầy đủ tất cả các thuộc tính có sẵn.
| Thuộc tính | Mô tả |
|---|---|
| Title | Để hiển thị tiêu đề sản phẩm, sử dụng product.localizedTitle. Lưu ý rằng việc bản địa hóa dựa trên quốc gia cửa hàng mà người dùng đã chọn, không phải ngôn ngữ của thiết bị. |
| Price | Để hiển thị giá đã được bản địa hóa, sử dụng product.price?.localizedString. Việc bản địa hóa này dựa trên thông tin locale của thiết bị. Bạn cũng có thể truy cập giá dưới dạng số bằng product.price?.amount. Giá trị sẽ được cung cấp theo đơn vị tiền tệ địa phương. Để lấy ký hiệu tiền tệ liên quan, sử dụng product.price?.currencySymbol. |
| Subscription Period | Để hiển thị chu kỳ (ví dụ: tuần, tháng, năm, v.v.), sử dụng product.subscription?.localizedSubscriptionPeriod. Việc bản địa hóa này dựa trên locale của thiết bị. Để lấy chu kỳ gói đăng ký theo cách lập trình, sử dụng product.subscription?.subscriptionPeriod. Từ đó bạn có thể truy cập thuộc tính unit để lấy độ dài (tức là ‘day’, ‘week’, ‘month’, ‘year’, hoặc ‘unknown’). Giá trị numberOfUnits sẽ cho bạn biết số đơn vị chu kỳ. Ví dụ: với gói đăng ký theo quý, bạn sẽ thấy 'month' trong thuộc tính unit và 3 trong thuộc tính numberOfUnits. |
| Introductory Offer | Để hiển thị huy hiệu hoặc chỉ báo khác cho biết gói đăng ký có ưu đãi giới thiệu, hãy kiểm tra thuộc tính product.subscription?.offer?.phases. Đây là danh sách có thể chứa tối đa hai giai đoạn giảm giá: giai đoạn dùng thử miễn phí và giai đoạn giá ưu đãi giới thiệu. Trong mỗi đối tượng giai đoạn có các thuộc tính hữu ích sau:• paymentMode: một chuỗi với các giá trị 'free_trial', 'pay_as_you_go', 'pay_up_front' và 'unknown'. Dùng thử miễn phí sẽ có loại 'free_trial'.• price: Giá giảm dưới dạng số. Với dùng thử miễn phí, tìm giá trị 0 ở đây.• localizedNumberOfPeriods: một chuỗi được bản địa hóa theo locale của thiết bị mô tả độ dài của ưu đãi. Ví dụ: ưu đãi dùng thử ba ngày hiển thị '3 days' trong trường này.• subscriptionPeriod: Ngoài ra, bạn có thể lấy thông tin chi tiết của chu kỳ ưu đãi bằng thuộc tính này. Nó hoạt động tương tự như mô tả trong phần trước dành cho ưu đãi.• localizedSubscriptionPeriod: Chu kỳ gói đăng ký đã được định dạng theo locale của người dùng cho phần giảm giá. |
Tăng tốc độ lấy paywall với paywall đối tượng mặc định
Thông thường, paywalls được lấy gần như ngay lập tức, vì vậy 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à paywalls, và người dùng của bạn có kết nối internet yếu, việc lấy 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ị 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 điều này, bạn có thể sử dụng phương thức getPaywallForDefaultAudience, phương thức này lấy 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 paywall bằng phương thức getPaywall, như được mô tả chi tiết trong phần Lấy thông tin paywall ở trên.
Lý do chúng tôi khuyến nghị sử dụng getPaywall
Phương thức getPaywallForDefaultAudience có một số hạn chế đáng kể:
- 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ế paywalls hỗ trợ phiên bản hiện tại (cũ) hoặc chấp nhận rằng người dùng có phiên bản hiện tại (cũ) có thể gặp sự cố với các paywalls 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 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 để được hưởng lợi từ tốc độ lấy 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 sử 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 có sẵn 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 | Đị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: | Định danh của bản địa hóa paywall. Tham số này là một 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ẻ đầu tiên là ngôn ngữ, thẻ thứ hai là vùng. Ví dụ: Xem Localizations and locale codes để 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 đã 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 kết nối internet không ổn định, hãy cân nhắc sử dụ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 gỡ cài đặt ứng dụng hoặc xóa thủ công. |