Kotlin Multiplatform SDKでリモートコンフィグで設計されたペイウォールをレンダリングする

リモートコンフィグを使ってペイウォールをカスタマイズした場合は、ユーザーに表示するためのレンダリングをアプリのコードで実装する必要があります。リモートコンフィグはニーズに合わせた柔軟な設計が可能なため、ペイウォールに何を含めるか、どのような見た目にするかはすべて自由に決められます。Adapty はリモートコンフィグを取得するメソッドを提供しており、カスタムペイウォールの表示方法をご自身でコントロールできます。

フローのリモートコンフィグを取得して表示する

v4 では、フローは remoteConfigs リストに設定済みロケールごとに 1 つの AdaptyRemoteConfig エントリを持ちます。ユーザーの言語設定に合ったロケールを選択し、必要な値を読み取ります。


Adapty.getFlow("YOUR_PLACEMENT_ID")
    .onSuccess { flow ->
        val config = flow.remoteConfigs.firstOrNull { it.locale == "en" }
            ?: flow.remoteConfigs.firstOrNull()
        val headerText = config?.dataMap?.get("header_text") as? String
        // use the remote config values
    }
    .onError { error ->
        // handle the error
    }

ここまでで必要な値がすべて揃ったので、次はそれらをレンダリングして視覚的に魅力的なページに組み上げます。さまざまなスマートフォンの画面サイズや向きに対応したデザインを心がけ、デバイスを問わず快適に使えるユーザー体験を提供してください。

以下の説明に従ってペイウォール表示イベントを記録してください。これにより、Adapty アナリティクスがファネルおよび A/B テスト用のデータを収集できるようになります。

ペイウォールの表示が完了したら、次は購入フローの設定に進みます。ユーザーが購入を行う際は、フローのプロダクトを使って .makePurchase() を呼び出すだけです。.makePurchase() メソッドの詳細については、購入の実装をご覧ください。

フォールバックペイウォールと呼ばれるバックアップペイウォールの作成をおすすめします。このバックアップは、インターネット接続やキャッシュが利用できない場合にユーザーへ表示され、そのような状況でもスムーズなエクスペリエンスを提供します。

ペイウォールの表示イベントを記録する

Adapty はフローやペイウォールのパフォーマンス測定をサポートしています。購入データは自動的に収集されますが、表示イベントの記録はお客様自身で行う必要があります。ユーザーがフローを見たタイミングを把握できるのはお客様だけだからです。

表示イベントを記録するには、.logShowFlow(flow) を呼び出すだけです。呼び出すと、ファネルや A/B テストの指標に反映されます。

フローBuilder やペイウォールビルダーでレンダリングされたフローやペイウォールを表示する場合、.logShowFlow(flow) を呼び出す必要はありません。これらの場合、Adapty が自動的にビューを追跡します。

Adapty.logShowFlow(flow)
    .onSuccess {
        // flow view logged successfully
    }
    .onError { error ->
        // handle the error
    }

リクエストパラメーター：

パラメータ	必須	説明
flow	必須	`Adapty.getFlow` で取得した `AdaptyFlow` オブジェクト。

リモートコンフィグを使用してペイウォールをカスタマイズした場合、ユーザーに表示するためのレンダリング処理をアプリのコードに実装する必要があります。リモートコンフィグはニーズに合わせた柔軟性を提供するため、ペイウォールに含める内容や表示方法はすべて自由に設定できます。リモートコンフィグを通じて設定したカスタムペイウォールを表示するために、リモートコンフィグを取得するメソッドを提供しています。

ペイウォールのリモートコンフィグを取得して表示する

ペイウォールのリモートコンフィグを取得するには、remoteConfig プロパティにアクセスして必要な値を取り出します。


Adapty.getPaywall(
    placementId = "YOUR_PLACEMENT_ID",
    locale = "en",
    fetchPolicy = AdaptyPaywallFetchPolicy.Default,
    loadTimeout = 5.seconds
).onSuccess { paywall ->
    val headerText = paywall.remoteConfig?.dataMap?.get("header_text") as? String
    // use the remote config values
}.onError { error ->
    // handle the error
}

必要な値をすべて取得したら、それらをレンダリングして視覚的に魅力的なページに組み立てます。さまざまなモバイル端末の画面サイズや向きに対応したデザインにすることで、あらゆるデバイスでシームレスかつ使いやすい体験を提供できます。

以下で説明する手順に従い、必ずペイウォール表示イベントを記録してください。これにより、Adapty アナリティクスがファネルおよび A/B テスト用のデータを収集できるようになります。

ペイウォールの表示が完了したら、購入フローの設定に進みましょう。ユーザーが購入を行う際は、ペイウォールのプロダクトを使って .makePurchase() を呼び出すだけです。.makePurchase() メソッドの詳細については、購入処理をご覧ください。

フォールバックペイウォールと呼ばれるバックアップペイウォールの作成をおすすめします。このバックアップは、インターネット接続がない場合やキャッシュが利用できない場合にユーザーへ表示され、そのような状況でもスムーズな体験を提供します。

ペイウォールの表示イベントを記録する

Adapty はペイウォールのパフォーマンス測定をサポートしています。購入データは自動的に収集されますが、ペイウォールの表示ログはユーザーがペイウォールを見るタイミングを把握しているのがあなた自身であるため、手動での記録が必要です。

ペイウォールの表示イベントを記録するには、.logShowPaywall(paywall) を呼び出すだけです。これにより、ファネルや A/B テストのペイウォール指標に反映されます。

ペイウォールビルダーで作成したペイウォールを表示している場合は、.logShowPaywall(paywall) を呼び出す必要はありません。

Adapty.logShowPaywall(paywall = paywall)
    .onSuccess {
        // paywall view logged successfully
    }
    .onError { error ->
        // handle the error
    }

リクエストパラメータ:

パラメーター	必須/任意	説明
paywall	必須	`AdaptyPaywall` オブジェクト。