Lấy flows & paywalls - Android

Sau khi bạn đã thiết kế flow của mình, bạn có thể hiển thị nó trong ứng dụng di động. 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 view của nó như mô tả bên dưới.

Trước khi bắt đầu

Bạn cần có:

• Sản phẩm trên Adapty Dashboard: Tạo sản phẩm của bạn.
• Một flow có sản phẩm: Xây dựng trong Flow & Paywall Builder và gán sản phẩm vào đó.
• Một placement: Tạo một placement và gán flow của bạn vào đó.
• SDK đã được cài đặt: Xem hướng dẫn cài đặt SDK cho Android.

Lấy flow/paywall

Nếu bạn đã thiết kế một flow hoặc paywall trong builder, bạn không cần lo lắng về việc render nó trong code ứng dụng di động để hiển thị cho người dùng. Flow hoặc paywall như vậy đã bao gồm 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 trình bày nó trong ứng dụng di động.

Để đảm bảo hiệu suất tối ưu, điều quan trọng là phải lấy flow hoặc paywall và cấu hình view của nó càng sớm càng tốt, để có đủ thời gian tải hình ảnh trước khi hiển thị cho người dùng.

Để lấy một flow hoặc paywall, sử dụng phương thức getFlow:

...

Adapty.getFlow("YOUR_PLACEMENT_ID", loadTimeout = 10.seconds) { result ->
    when (result) {
        is AdaptyResult.Success -> {
            val flow = result.value
            // the requested flow/paywall
        }
        is AdaptyResult.Error -> {
            val error = result.error
            // handle the error
        }
    }
}

...

Adapty.getFlow("YOUR_PLACEMENT_ID", AdaptyPlacementFetchPolicy.Default, TimeInterval.seconds(10), result -> {
    if (result instanceof AdaptyResult.Success) {
        AdaptyFlow flow = ((AdaptyResult.Success<AdaptyFlow>) result).getValue();
        // the requested flow/paywall

    } else if (result instanceof AdaptyResult.Error) {
        AdaptyError error = ((AdaptyResult.Error) result).getError();
        // handle the error

    }
});

The input is empty — there is no content to translate.

Tham số phản hồi:

Lấy cấu hình giao diện

Sau khi tải flow hoặc paywall, hãy kiểm tra xem nó có chứa cấu hình giao diện hay không thông qua flow.hasViewConfiguration. Cờ này cho biết placement được thiết kế theo cách nào trong Adapty Dashboard:

• true — placement được thiết kế trong Flow & Paywall Builder (một flow) hoặc old Paywall Builder (một paywall). Adapty tự render giao diện cho bạn. Tiếp tục với các bước bên dưới để lấy cấu hình view và hiển thị flow hoặc paywall.
• false — placement là một paywall tùy chỉnh không có Builder UI. Xử lý như một Remote Config paywall.

if (!flow.hasViewConfiguration) {
    // use your custom logic
    return
}

AdaptyUI.getFlowConfiguration(flow, loadTimeout = 10.seconds) { result ->
    when(result) {
        is AdaptyResult.Success -> {
            val flowConfiguration = result.value
            // use loaded configuration
        }
        is AdaptyResult.Error -> {
            val error = result.error
            // handle the error
        }
    }
}

if (!flow.hasViewConfiguration()) {
    // use your custom logic
    return;
}

AdaptyUI.getFlowConfiguration(flow, null, TimeInterval.seconds(10), result -> {
    if (result instanceof AdaptyResult.Success) {
        AdaptyUI.FlowConfiguration flowConfiguration =
          ((AdaptyResult.Success<AdaptyUI.FlowConfiguration>) result).getValue();
        // use loaded configuration
    } else if (result instanceof AdaptyResult.Error) {
        AdaptyError error = ((AdaptyResult.Error) result).getError();
        // handle the error
    }
});

Sau khi tải xong, hiển thị flow hoặc 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, 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 những 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 tình huống đó, 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ể dùng phương thức getFlowForDefaultAudience, phương thức này 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ư đã trình bày trong phần Lấy flow/paywall ở trên.

Adapty.getFlowForDefaultAudience("YOUR_PLACEMENT_ID") { result ->
    when (result) {
        is AdaptyResult.Success -> {
            val flow = result.value
            // the requested flow
        }
        is AdaptyResult.Error -> {
            val error = result.error
            // handle the error
        }
    }
}

Adapty.getFlowForDefaultAudience("YOUR_PLACEMENT_ID", result -> {
    if (result instanceof AdaptyResult.Success) {
        AdaptyFlow flow = ((AdaptyResult.Success<AdaptyFlow>) result).getValue();
        // the requested flow

    } else if (result instanceof AdaptyResult.Error) {
        AdaptyError error = ((AdaptyResult.Error) result).getError();
        // handle the error

    }
});

Tùy chỉnh tài nguyên

Để tùy chỉnh hình ảnh và video trong flow hoặc 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 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 nhau cho từng nhóm người dùng.
• Hiển thị ảnh xem trước cục bộ trong khi ảnh chính từ xa đang tải.
• Hiển thị ảnh xem trước trước khi phát video.
• Hiển thị media được đóng gói sẵn trong ứng dụng để màn hình đầu tiên hiển thị mà không cần tải xuống. Xem Hiển thị media màn hình đầu từ app bundle.

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

val customAssets = AdaptyCustomAssets.of(
    "hero_image" to
            AdaptyCustomImageAsset.remote(
                url = "https://example.com/image.jpg",
                preview = AdaptyCustomImageAsset.file(
                    FileLocation.fromAsset("images/hero_image_preview.png"),
                )
            ),
    "hero_video" to
            AdaptyCustomVideoAsset.file(
                FileLocation.fromResId(requireContext(), R.raw.custom_video),
                preview = AdaptyCustomImageAsset.file(
                    FileLocation.fromResId(requireContext(), R.drawable.video_preview),
                ),
            ),
)

val flowView = AdaptyUI.getFlowView(
    activity,
    flowConfiguration,
    products,
    eventListener,
    insets,
    customAssets,
)

Đối với video, bạn có thể tùy chọn truyền resolution để giữ chỗ layout và đặt tỷ lệ khung hình (width / height) trước khi video tải:

AdaptyCustomVideoAsset.file(
    FileLocation.fromResId(requireContext(), R.raw.custom_video),
    preview = AdaptyCustomImageAsset.file(
        FileLocation.fromResId(requireContext(), R.drawable.video_preview),
    ),
    resolution = AdaptyCustomVideoAsset.Resolution(width = 1080, height = 1920),
)

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

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 di động.

Tải 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 về việc render nó trong code ứng dụng để hiển thị cho người dùng. Paywall như vậy đã bao gồm 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 của nó, rồi mới hiển thị trong ứng dụng.

Để đảm bảo hiệu suất tối ưu, bạn nên lấy paywall và cấu hình view của nó càng sớm càng tốt, để ảnh có đủ thời gian tải xuống trước khi hiển thị cho người dùng.

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

...

Adapty.getPaywall("YOUR_PLACEMENT_ID", locale = "en", loadTimeout = 10.seconds) { result ->
    when (result) {
        is AdaptyResult.Success -> {
            val paywall = result.value
            // the requested paywall
        }
        is AdaptyResult.Error -> {
            val error = result.error
            // handle the error
        }
    }
}

...

Adapty.getPaywall("YOUR_PLACEMENT_ID", "en", TimeInterval.seconds(10), result -> {
    if (result instanceof AdaptyResult.Success) {
        AdaptyPaywall paywall = ((AdaptyResult.Success<AdaptyPaywall>) result).getValue();
        // the requested paywall
      
    } else if (result instanceof AdaptyResult.Error) {
        AdaptyError error = ((AdaptyResult.Error) result).getError();
        // handle the error
      
    }
});

Tham số:

Tham số phản hồi:

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

Sau khi fetch paywall, hãy kiểm tra xem nó có chứa ViewConfiguration hay không — đây là dấu hiệu cho thấy paywall được tạo bằng Paywall Builder. Thông tin 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 Paywall Builder; nếu không, xử lý nó như một paywall Remote Config.

if (!paywall.hasViewConfiguration) {
    // use your custom logic
    return
}

AdaptyUI.getViewConfiguration(paywall, loadTimeout = 10.seconds) { result ->
    when(result) {
        is AdaptyResult.Success -> {
            val viewConfiguration = result.value
            // use loaded configuration
        }
        is AdaptyResult.Error -> {
            val error = result.error
            // handle the error
        }
    }
}

if (!paywall.hasViewConfiguration()) {
    // use your custom logic
    return;
}

AdaptyUI.getViewConfiguration(paywall, TimeInterval.seconds(10), result -> {
    if (result instanceof AdaptyResult.Success) {
        AdaptyUI.LocalizedViewConfiguration viewConfiguration =
          ((AdaptyResult.Success<AdaptyUI.LocalizedViewConfiguration>) result).getValue();
        // use loaded configuration
    } else if (result instanceof AdaptyResult.Error) {
        AdaptyError error = ((AdaptyResult.Error) result).getError();
        // handle the error
    }
});

Sau khi tải xong, 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 về việc tối ưu tốc độ. Tuy nhiên, nếu bạn có nhiều đối tượng và paywall, hoặc người dùng đang kết nối internet yếu, việc tải paywall có thể mất nhiều thời gian hơn mong muốn. Trong trường hợp đó, bạn có thể muốn hiển thị một paywall mặc định để đảm bảo trải nghiệm mượt mà cho người dùng 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 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ư đã trình bày chi tiết trong phần Lấy thông tin Paywall ở trên.

Adapty.getPaywallForDefaultAudience("YOUR_PLACEMENT_ID", locale = "en") { result ->
    when (result) {
        is AdaptyResult.Success -> {
            val paywall = result.value
            // the requested paywall
        }
        is AdaptyResult.Error -> {
            val error = result.error
            // handle the error
        }
    }
}

Adapty.getPaywallForDefaultAudience("YOUR_PLACEMENT_ID", "en", result -> {
    if (result instanceof AdaptyResult.Success) {
        AdaptyPaywall paywall = ((AdaptyResult.Success<AdaptyPaywall>) result).getValue();
        // the requested paywall

    } else if (result instanceof AdaptyResult.Error) {
        AdaptyError error = ((AdaptyResult.Error) result).getError();
        // handle the error
      
    }
});

Tùy chỉnh assets

Để tùy chỉnh hình ảnh và video trong paywall, 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 custom ID 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ị ảnh xem trước cục bộ trong khi hình ảnh chính từ xa đang tải.
• Hiển thị ảnh xem trước trước khi phát video.

Đây là ví dụ về cách bạn có thể cung cấp các tài nguyên tùy chỉnh thông qua một dictionary đơn giản:

val customAssets = AdaptyCustomAssets.of(
    "hero_image" to
            AdaptyCustomImageAsset.remote(
                url = "https://example.com/image.jpg",
                preview = AdaptyCustomImageAsset.file(
                    FileLocation.fromAsset("images/hero_image_preview.png"),
                )
            ),
    "hero_video" to
            AdaptyCustomVideoAsset.file(
                FileLocation.fromResId(requireContext(), R.raw.custom_video),
                preview = AdaptyCustomImageAsset.file(
                    FileLocation.fromResId(requireContext(), R.drawable.video_preview),
                ),
            ),
)

val paywallView = AdaptyUI.getPaywallView(
    activity,
    viewConfiguration,
    products,
    eventListener,
    insets,
    customAssets,
)