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

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

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

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);
}

必要な値をすべて取得したら、それらをまとめて見栄えのよいページとしてレンダリングします。さまざまな画面サイズや向きに対応したデザインにすることで、どのデバイスでも快適に使えるユーザー体験を提供しましょう。

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

インターネット接続がない場合やキャッシュが利用できない場合でもスムーズな体験を提供できるよう、フォールバックペイウォールの作成をおすすめします。

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

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

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

try {
  await adapty.logShowPaywall({ paywall });
} catch (error) {
  console.error('Failed to log paywall view:', error);
}

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

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