Flutter SDKでリモートコンフィグでデザインされたペイウォールを表示する

リモートコンフィグを使ってペイウォールをカスタマイズした場合、ユーザーに表示するためにモバイルアプリのコード上でレンダリングを実装する必要があります。リモートコンフィグはニーズに合わせた柔軟性を提供するため、何を含めるか、ペイウォールのビューをどのように表示するかはあなた次第です。リモートコンフィグ経由で設定されたカスタムペイウォールを表示するために、リモート設定を取得するメソッドを提供しています。

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

v4 では、フローに remoteConfigs リストが含まれています。設定されたローカライゼーションごとに 1 つのリモートコンフィグが用意されています。ユーザーのロケールに合ったエントリを選択し、必要な値を取り出してください。適切なローカライゼーションの選び方については、ローカライゼーションとロケールコードを参照してください。


try {
  final flow = await Adapty().getFlow(placementId: 'YOUR_PLACEMENT_ID');

  // one entry per configured localization; fall back to the first one
  final config = flow.remoteConfigs.firstWhereOrNull((c) => c.locale == 'en') ??
      flow.remoteConfig;

  final String? headerText = config?.dictionary?['header_text'] as String?;
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}

必要な値をすべて取得したら、それらをレンダリングして視覚的に魅力的なページに組み立てます。さまざまなスマートフォンの画面サイズや向きに対応したデザインにして、デバイスを問わずシームレスで使いやすい体験を提供してください。

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

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

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

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

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

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

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

try {
  await Adapty().logShowFlow(flow: flow);
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}

リクエストパラメータ：

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

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

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

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

try {
  final paywall = await Adapty().getPaywall(placementId: "YOUR_PLACEMENT_ID");
  final String? headerText = paywall.remoteConfig?.dictionary?['header_text'] as String?;
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

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

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

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

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

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

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

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

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

try {
  final result = await Adapty().logShowPaywall(paywall: paywall);
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

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

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