Kotlin Multiplatform - 新しいペイウォールビルダーのペイウォールを表示する

ペイウォールビルダーを使ってペイウォールをカスタマイズした場合、モバイルアプリのコードでレンダリングをゼロから実装する必要はありません。ペイウォールには「何を表示するか」と「どのように表示するか」の情報が含まれています。

このガイドは新しいペイウォールビルダーのペイウォール専用です。リモートコンフィグで設計されたペイウォールや Observer モードでは、ペイウォールの表示方法が異なります。

リモートコンフィグのペイウォールを表示する方法については、リモートコンフィグで設計されたペイウォールをレンダリングするをご覧ください。

Adapty Kotlin Multiplatform SDK では、ペイウォールを表示する方法が 2 つあります。

Compose Multiplatform を使用する
Compose Multiplatform を使用しない

Compose Multiplatform を使用する

ペイウォールを表示するには、createPaywallView メソッドで作成した view に対して view.present() メソッドを呼び出します。各 view は一度しか使用できません。ペイウォールを再度表示する必要がある場合は、createPaywallView を再度呼び出して新しい view インスタンスを作成してください。

view を再作成せずに使い回すとエラーが発生する場合があります。


viewModelScope.launch {
    AdaptyUI.createPaywallView(paywall = paywall).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

ダイアログを表示する

Android でペイウォールビューが表示されている場合は、ネイティブのアラートダイアログの代わりにこのメソッドを使用してください。Android では通常のアラートがペイウォールビューの背後に表示されてしまい、ユーザーから見えなくなります。このメソッドを使うことで、すべてのプラットフォームでペイウォールの上にダイアログが正しく表示されます。


viewModelScope.launch {
    view.showDialog(
        title = "Close paywall?",
        content = "You will lose access to exclusive offers.",
        primaryActionTitle = "Stay",
        secondaryActionTitle = "Close"
    ).onSuccess { action ->
        if (action == AdaptyUIDialogActionType.SECONDARY) {
            // User confirmed - close the paywall
            view.dismiss()
        }
        // If primary - do nothing, user stays
    }.onError { error ->
        // handle the error
    }
}

iOS の表示スタイルを設定する

present() メソッドに iosPresentationStyle パラメータを渡すことで、iOS でのペイウォールの表示スタイルを設定できます。このパラメータには AdaptyUIIOSPresentationStyle.FULLSCREEN（デフォルト）または AdaptyUIIOSPresentationStyle.PAGESHEET を指定できます。


viewModelScope.launch {
    val view = AdaptyUI.createPaywallView(paywall = paywall).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}

Compose Multiplatform を使用しない

createNativePaywallView はコアモジュール io.adapty:adapty-kmp に含まれています。プロジェクトで Compose Multiplatform を使用していない場合、io.adapty:adapty-kmp-ui への依存は不要です。

Compose Multiplatform を使用せずにペイウォールを埋め込むには、createNativePaywallView を呼び出します。このメソッドはレイアウトに追加できる AdaptyNativePaywallView を返します。


val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)

KMP インターフェースのデフォルトメソッドは Swift では @required になるため、Swift から直接 AdaptyUIPaywallsEventsObserver を実装することはできません。まず iosMain にオープンな基底クラスを宣言してください。

open class BasePaywallObserver : AdaptyUIPaywallsEventsObserver

次に Swift でサブクラスを作成し、必要なメソッドのみオーバーライドします。

class MyPaywallObserver: BasePaywallObserver {
    override func paywallViewDidPerformAction(view: AdaptyUIPaywallView, action: any AdaptyUIAction) {
        if action is AdaptyUIActionCloseAction {
            // remove nativeView from your view hierarchy
        }
    }
}

let nativeView = AdaptyUI.shared.createNativePaywallView(
    paywall: paywall,
    observer: MyPaywallObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.

ビューを破棄する

レイアウトからビューを削除する際は dispose() を呼び出してください。これによりイベントリスナーの登録が解除され、内部リソースが解放されます。

nativeView.dispose()

カスタムタグ

カスタムタグを使うと、シナリオごとに別々のペイウォールを作らずに済みます。ユーザーデータに応じて動的に変化するペイウォールを 1 つ用意するイメージです。たとえば、“Hello!” という汎用的な文言の代わりに、“Hello, John!” や “Hello, Ann!” のようにユーザーに合わせた挨拶を表示できます。

カスタムタグの活用例を以下に示します。

ペイウォールにユーザーの名前やメールアドレスを表示する。
売上促進のために現在の曜日を表示する（例：「Happy Thursday」）。
販売中のプロダクトに関するパーソナライズされた情報（フィットネスプログラムの名称や VoIP アプリの電話番号など）を追加する。

カスタムタグを使うと、様々な状況に柔軟に対応できるペイウォールを作成でき、アプリのインターフェースをよりパーソナライズして魅力的にできます。

AdaptyUI SDK の古いバージョンを使用しているユーザーを対象とするケースなど、カスタムタグの置換先が不明な場合があります。そのため、未知のカスタムタグを含む行を置き換えるフォールバックテキストを必ず設定してください。設定しないと、タグがコード（<USERNAME/>）としてそのまま表示されてしまいます。

ペイウォールでカスタムタグを使用するには、ペイウォールビューを作成する際に渡します。


viewModelScope.launch {
    val customTags = mapOf(
        "USERNAME" to "John",
        "DAY_OF_WEEK" to "Thursday"
    )

    AdaptyUI.createPaywallView(
        paywall = paywall,
        customTags = customTags
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
    customTags = customTags,
)


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativePaywallView(
    paywall = paywall,
    observer = myPaywallObserver,
    customTags = customTags,
)

カスタムタイマー

ペイウォールのタイマーは、期間限定の特別オファーや季節限定オファーを訴求する優れたツールです。ただし、このタイマーはオファーの有効期間やキャンペーンの期間とは連動していません。設定した値からゼロに向かってカウントダウンするだけのスタンドアロンのタイマーです。タイマーがゼロになっても何も起こりません。ゼロのまま停止するだけです。

タイマーの前後にテキストをカスタマイズして、「残り時間：10:00 秒」のようなメッセージを作成できます。

ペイウォールでカスタムタイマーを使用するには、ペイウォールビューを作成する際に渡します。


viewModelScope.launch {
    val customTimers = mapOf(
        "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
        "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
    )

    AdaptyUI.createPaywallView(
        paywall = paywall,
        customTimers = customTimers
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
    customTimers = customTimers,
)


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativePaywallView(
    paywall = paywall,
    observer = myPaywallObserver,
    customTimers = customTimers,
)