React Native SDKでリモートコンフィグによるペイウォールをレンダリングする

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

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

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

try {
  const paywall = await adapty.getPaywall({ placementId: "YOUR_PLACEMENT_ID" });
  const headerText = paywall.remoteConfig?.data?.["header_text"];
} catch (error) {
  // handle the error
}

必要な値をすべて取得したら、それらをレンダリングして見栄えの良いページに組み立てましょう。さまざまなスマートフォンの画面サイズや向きに対応したデザインにすることで、デバイスを問わずシームレスで使いやすい体験を提供できます。

AdaptyアナリティクスがファネルやみA/B テストのデータを正確に収集できるよう、以下で説明するペイウォール表示イベントの記録を必ず行ってください。

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

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

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

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

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

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

await adapty.logShowPaywall(paywall);

リクエストパラメータ:

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