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

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

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

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


try {
  const flow = await adapty.getFlow({ placementId: 'YOUR_PLACEMENT_ID' });
  const config = flow.remoteConfigs?.find((c) => c.lang === 'en')
    ?? flow.remoteConfigs?.[0];
  const headerText = config?.data?.['header_text'];
} catch (error) {
  console.error('Failed to fetch flow:', error);
}

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

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

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

インターネット接続がない場合やキャッシュが利用できない場合にも円滑なエクスペリエンスを提供するため、フォールバックペイウォールと呼ばれるバックアップペイウォールの作成をおすすめします。

フローの表示イベントを記録する

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

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

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


await adapty.logShowFlow({ flow });

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

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

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

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

ペイウォールのリモートコンフィグを取得するには、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);
}

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

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

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

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

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

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

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

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


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

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

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