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

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

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

v4 では、フローは設定された言語ごとに1つの AdaptyRemoteConfig エントリを remoteConfigs 配列に持ちます。ユーザーの言語設定に合ったものを選び、その data から必要な値を読み取ってください。

try {
  const flow = await adapty.getFlow("YOUR_PLACEMENT_ID");
  const config = flow.remoteConfigs?.find((c) => c.lang === "en")
    ?? flow.remoteConfigs?.[0];
  const headerText = config?.data?.["header_text"];
} catch (error) {
  // handle the error
}

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

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

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

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

フローの表示イベントをトラッキングする

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

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

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

await adapty.logShowFlow(flow);

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

パラメーター	必須/任意	説明
flow	必須	`adapty.getFlow(placementId)` で取得した `AdaptyFlow` オブジェクト。

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

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

ペイウォールのリモートコンフィグを取得するには、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` オブジェクト。