Hiển thị paywall được thiết kế bằng Remote Config trong Capacitor SDK
Nếu bạn đã tùy chỉnh một flow bằng Remote Config, bạn cần triển khai phần hiển thị trong code của ứng dụng di động để hiển thị nó cho người dùng. Vì Remote Config cung cấp sự linh hoạt phù hợp với nhu cầu của bạn, bạn hoàn toàn kiểm soát những gì được đưa vào và giao diện flow của bạn trông như thế nào. Chúng tôi cung cấp một phương thức để lấy cấu hình remote, giúp bạn tự do hiển thị flow tùy chỉnh đã được cấu hình qua Remote Config.
Lấy remote config của flow và hiển thị nó
Trong v4, một flow mang một mục AdaptyRemoteConfig cho mỗi ngôn ngữ được cấu hình trong mảng remoteConfigs. Chọn ngôn ngữ phù hợp với tùy chọn của người dùng, sau đó đọc các giá trị bạn cần từ data của nó.
try {
const flow = await adapty.getFlow({ placementId: 'YOUR_PLACEMENT_ID' });
const config = flow.remoteConfigs?.find((c) => c.lang === 'en')
?? flow.remoteConfigs?.[0];
const headerText = config?.data?.['header_text'];
} catch (error) {
console.error('Failed to fetch flow:', error);
}Đến đây, sau khi đã nhận được tất cả các giá trị cần thiết, bạn có thể render và kết hợp chúng thành một trang có giao diện hấp dẫn. Hãy đảm bảo thiết kế tương thích với nhiều kích thước màn hình và hướng hiển thị khác nhau trên các thiết bị di động, mang lại trải nghiệm mượt mà và thân thiện với người dùng.
Hãy đảm bảo ghi lại sự kiện xem paywall như mô tả bên dưới, để Adapty analytics có thể thu thập dữ liệu cho funnel và A/B test.
Sau khi hiển thị flow xong, hãy tiếp tục thiết lập luồng mua hàng. Khi người dùng thực hiện mua hàng, chỉ cần gọi .makePurchase() với sản phẩm từ flow của bạn. Để biết thêm chi tiết về phương thức .makePurchase(), hãy đọc Thực hiện mua hàng.
Chúng tôi khuyến nghị tạo một paywall dự phòng. Paywall dự phòng này sẽ hiển thị cho người dùng khi không có kết nối internet hoặc không có cache, đảm bảo trải nghiệm mượt mà ngay cả trong những tình huống đó.
Theo dõi sự kiện xem paywall
Adapty giúp bạn đo lường hiệu suất của các flow. Trong khi chúng tôi tự động thu thập dữ liệu về các giao dịch mua, việc ghi lại lượt xem flow cần có sự hỗ trợ từ phía bạn vì chỉ bạn mới biết khi nào người dùng thấy một flow.
Để ghi lại sự kiện xem flow, chỉ cần gọi .logShowFlow({ flow }), và nó sẽ được phản ánh trong các chỉ số paywall của bạn trong phần funnels và A/B test.
Không cần gọi .logShowFlow({ flow }) nếu bạn đang hiển thị các flow hoặc paywall được dựng bởi Flow Builder hoặc Paywall Builder. Adapty tự động theo dõi lượt xem trong những trường hợp đó.
await adapty.logShowFlow({ flow });Tham số yêu cầu:
| Tham số | Bắt buộc | Mô tả |
|---|---|---|
| flow | bắt buộc | Một đối tượng AdaptyFlow lấy được qua adapty.getFlow({ placementId }). |
Nếu bạn đã tùy chỉnh paywall bằng Remote Config, bạn cần tự triển khai phần hiển thị trong code của ứng dụng để người dùng thấy được paywall đó. Vì Remote Config cho phép linh hoạt theo nhu cầu của bạn, bạn hoàn toàn chủ động trong việc quyết định nội dung và giao diện của paywall. Chúng tôi cung cấp một phương thức để lấy cấu hình remote, giúp bạn tự do hiển thị paywall tùy chỉnh đã được thiết lập qua Remote Config.
Lấy Remote Config của paywall và hiển thị nó
Để lấy Remote Config của một paywall, truy cập thuộc tính remoteConfig và trích xuất các giá trị cần thiết.
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
params: {
fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
loadTimeoutMs: 5000 // 5 second timeout
}
});
const headerText = paywall.remoteConfig?.data?.['header_text'];
} catch (error) {
console.error('Failed to fetch paywall:', error);
}Tại thời điểm này, sau khi đã nhận được tất cả các giá trị cần thiết, đã đến lúc render và kết hợp chúng thành một trang trông hấp dẫn. Hãy đảm bảo rằng thiết kế tương thích với nhiều loại màn hình điện thoại và các hướng xoay khác nhau, mang lại trải nghiệm mượt mà và thân thiện với người dùng trên mọi thiết bị.
Đảm bảo ghi lại sự kiện xem paywall như mô tả bên dưới, để Adapty analytics có thể thu thập thông tin cho funnel và A/B test.
Sau khi hiển thị paywall xong, hãy tiếp tục thiết lập flow mua hàng. Khi người dùng thực hiện mua hàng, chỉ cần gọi .makePurchase() với sản phẩm từ paywall của bạn. Để biết thêm chi tiết về phương thức .makePurchase(), hãy đọc Thực hiện mua hàng.
Chúng tôi khuyến nghị tạo một paywall dự phòng. Paywall dự phòng này sẽ hiển thị cho người dùng khi không có kết nối internet hoặc không có cache, đảm bảo trải nghiệm mượt mà ngay cả trong những tình huống đó.
Theo dõi sự kiện hiển thị paywall
Adapty giúp bạn đo lường hiệu quả của các paywall. Trong khi dữ liệu mua hàng được thu thập tự động, việc ghi lại lượt xem paywall cần bạn thực hiện thủ công vì chỉ bạn mới biết khi nào khách hàng thấy một paywall.
Để ghi lại sự kiện xem paywall, chỉ cần gọi .logShowPaywall(paywall), và sự kiện này sẽ được phản ánh trong các chỉ số paywall của bạn trong funnels và A/B test.
Không cần gọi .logShowPaywall(paywall) nếu bạn đang hiển thị các paywall được tạo trong Paywall Builder.
try {
await adapty.logShowPaywall({ paywall });
} catch (error) {
console.error('Failed to log paywall view:', error);
}Tham số yêu cầu:
| Tham số | Bắt buộc | Mô tả |
|---|---|---|
| paywall | bắt buộc | Một đối tượng AdaptyPaywall. |