React Native SDKでリモートコンフィグペイウォールのペイウォールとプロダクトを取得する

リモートコンフィグやカスタムペイウォールを表示する前に、それらの情報を取得する必要があります。このトピックはリモートコンフィグとカスタムペイウォールに関するものです。Flow & Paywall Builder または old Paywall Builder でカスタマイズされたフローやペイウォールの取得については、フローとペイウォールおよびその設定の取得を参照してください。

Tip

Adapty SDK がモバイルアプリにどのように組み込まれているか、実際の例を見たいですか?ペイウォールの表示、購入処理、その他の基本的な機能を含むフルセットアップを示したサンプルアプリをご覧ください。

モバイルアプリでフローとプロダクトの取得を始める前に(クリックして展開)
  1. Adapty ダッシュボードでプロダクトを作成する。

  2. フローまたはペイウォールを作成し、プロダクトを組み込む(Adapty ダッシュボード)。

  3. プレースメントを作成し、フローまたはペイウォールをプレースメントに組み込む(Adapty ダッシュボード)。

  4. Adapty SDK をインストールする(モバイルアプリ)。

フローの情報を取得する

Adapty では、プロダクトは App Store と Google Play の両方のプロダクトを組み合わせたものです。これらのクロスプラットフォームのプロダクトはフローやペイウォールに組み込まれており、モバイルアプリの特定のプレースメント内で表示できます。

プロダクトを表示するには、getFlow メソッドを使ってプレースメントのいずれかから AdaptyFlow を取得する必要があります。

Important

プロダクト ID をハードコードしないでください。 ハードコードしてよい ID はプレースメント ID のみです。フローはリモートで設定されるため、プロダクトの数や利用可能なオファーはいつでも変わる可能性があります。アプリはこれらの変更を動的に処理する必要があります。たとえば、今日のフローがプロダクトを 2 つ返し、明日 3 つ返しても、コードを変更せずにすべて表示できるようにしてください。

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlow(id);
    // the requested flow
} catch (error) {
    // handle the error
}
パラメータ必須/任意説明
placementId必須プレースメントの識別子です。Adapty ダッシュボードでプレースメントを作成した際に指定した値です。
fetchPolicyデフォルト: 'reload_revalidating_cache_data'

fetchPolicy は、SDKがキャッシュを使用するかどうかではなく、どのレイヤーを最初に読み取るかを設定します。デフォルトでは、SDKはまずサーバーにアクセスし、リクエストが失敗した場合にキャッシュデータを返します。ユーザーが常に最新のデータを取得できるため、このバリアントを推奨します。

ただし、ユーザーが不安定なインターネット環境を使用していると考える場合は、'return_cache_data_else_load' の使用を検討してください。この設定では順序が逆になり、まずキャッシュを読み取り、キャッシュに何もない場合のみサーバーにアクセスします。ユーザーは最新のデータを取得できない場合がありますが、インターネット接続が不安定な状況でも高速なロード時間を体験できます。キャッシュは定期的に更新されるため、ネットワークリクエストを避けるためにセッション中に使用しても安全です。

3つ目のポリシーである 'return_cache_data_if_not_expired_else_load' は、この2つの中間に位置します。キャッシュのコピーが一緒に渡す maxAgeSeconds より新しい間はまずキャッシュを読み取り、古くなった場合はサーバーにアクセスします。

キャッシュはアプリの再起動後も保持され、アプリの再インストール時またはマニュアルクリーンアップによってのみクリアされます。

Adapty SDK はフローとペイウォールを2つのレイヤーに保存します。上記の定期的に更新されるキャッシュと、フォールバックペイウォールです。また、フローとペイウォールをより速く取得するためにCDNを使用し、CDNが利用できない場合に備えてスタンドアロンのフォールバックサーバーも使用しています。このシステムは、インターネット接続が不安定な場合でも信頼性を確保しながら、常にフローの最新バージョンを取得できるよう設計されています。

loadTimeoutMsデフォルト: 5秒

この値はこのメソッドのタイムアウトを制限します。タイムアウトに達した場合、キャッシュデータまたはローカルフォールバックが返されます。

まれに、このメソッドは loadTimeout で指定した時間よりわずかに遅くタイムアウトする場合があります。これは、内部で異なるリクエストで構成される操作が含まれる場合があるためです。

Note

v4 では、getFlow は locale パラメータを受け取らなくなりました。カスタムペイウォールの場合、利用可能なすべてのロケールはフローのリモートコンフィグ(flow.remoteConfigs)で返されます。ユーザーのデバイスまたはアプリ設定に合ったものを選択してください。

プロダクトIDをハードコードしないでください!フローはリモートで設定されるため、利用可能なプロダクト、プロダクトの数、特別オファー(無料トライアルなど)は随時変更される可能性があります。これらのシナリオに対応できるようコードを設計してください。

たとえば、最初に2つのプロダクトを取得した場合、アプリはその2つを表示します。しかし後で3つのプロダクトを取得した場合は、コードを変更することなく3つすべてを表示できる必要があります。ハードコードが必要なのはプレースメントIDだけです。

レスポンスのパラメーター:

パラメータ説明
Flowプレースメント、識別子(id、variationId)、バリアント名(variationName、省略可能、SDK 4.2+)、名前、ペイウォールバリアント(paywalls)、および設定済みロケールごとのエントリを持つ remoteConfigs 配列を含む AdaptyFlow オブジェクトです。フローのプロダクトを取得するには、getPaywallProducts(flow) を呼び出してください。

プロダクトの取得

フローを取得したら、そのフローに対応するプロダクトの配列を取得できます。

try {
    // ...flow
    const products = await adapty.getPaywallProducts(flow);
  // the requested products list
} catch (error) {
    // handle the error
}

レスポンスパラメーター:

パラメーター説明
ProductsAdaptyPaywallProduct オブジェクトのリスト。プロダクト識別子、プロダクト名、価格、通貨、サブスクリプション期間、その他いくつかのプロパティが含まれます。

独自のペイウォールデザインを実装する際には、AdaptyPaywallProduct オブジェクトから以下のプロパティにアクセスする必要があります。以下によく使われるプロパティを示しますが、利用可能なすべてのプロパティの詳細はリンク先のドキュメントを参照してください。

プロパティ説明
Titleプロダクトのタイトルを表示するには、product.localizedTitle を使用します。ローカライズはデバイスのロケールではなく、ユーザーが選択したストアの国に基づいて行われます。
Priceローカライズされた価格を表示するには、product.price?.localizedString を使用します。このローカライズはデバイスのロケール情報に基づいています。product.price?.amount を使用して価格を数値として取得することもできます。値はローカル通貨で提供されます。関連する通貨記号を取得するには、product.price?.currencySymbol を使用します。
Subscription Period期間(週、月、年など)を表示するには、product.subscription?.localizedSubscriptionPeriod を使用します。このローカライズはデバイスのロケールに基づいています。プログラムでサブスクリプション期間を取得するには、product.subscription?.subscriptionPeriod を使用します。そこから unit プロパティにアクセスして期間の長さ('day'、'week'、'month'、'year'、または 'unknown')を取得できます。numberOfUnits の値で期間の単位数を取得できます。たとえば、四半期ごとのサブスクリプションの場合、unit プロパティには 'month'、numberOfUnits プロパティには 3 が表示されます。
Introductory Offerサブスクリプションに初回オファーが含まれているかどうかを示すバッジやその他のインジケーターを表示するには、product.subscription?.offer?.phases プロパティを確認します。このリストには、無料トライアルフェーズと初回価格フェーズの最大2つの割引フェーズを含めることができます。各フェーズオブジェクトには次の便利なプロパティがあります:
• paymentMode:'free_trial'、'pay_as_you_go'、'pay_up_front'、'unknown' の値を持つ文字列。無料トライアルは 'free_trial' タイプになります。
• price:割引価格(数値)。無料トライアルの場合は 0 を確認します。
• localizedNumberOfPeriods:オファーの期間をデバイスのロケールでローカライズした文字列。たとえば、3日間のトライアルオファーの場合、このフィールドには '3 days' と表示されます。
• subscriptionPeriod:オファー期間の個別の詳細はこのプロパティで取得することもできます。前のセクションで説明したのと同様の方法でオファーにも使用できます。
• localizedSubscriptionPeriod:ユーザーのロケールに合わせてフォーマットされた割引のサブスクリプション期間。

デフォルトオーディエンスフローでフローの取得を高速化する

通常、フローはほぼ瞬時に取得されるため、この処理を高速化することを気にする必要はありません。ただし、オーディエンスやプレースメントが多数あり、ユーザーのインターネット接続が遅い場合は、フローの取得に予想以上の時間がかかることがあります。このような状況では、何も表示しないよりも、デフォルトのフローを表示してスムーズなユーザー体験を提供したい場合があるでしょう。

これに対処するために、getFlowForDefaultAudience メソッドを使用できます。このメソッドは、指定したプレースメントの All Users オーディエンスのフローを取得します。ただし、推奨される方法は、上記のフロー情報の取得セクションで説明されている getFlow メソッドを使用してフローを取得することである点を理解しておくことが重要です。

Warning

getFlow を推奨する理由

getFlowForDefaultAudience メソッドにはいくつかの重大な欠点があります:

  • 後方互換性の問題: 異なるアプリバージョン(現在のバージョンと将来のバージョン)で異なるフローを表示する必要がある場合、課題が生じる可能性があります。現在の(レガシー)バージョンに対応したフローを設計するか、現在の(レガシー)バージョンのユーザーがフローが正常に表示されない問題に直面することを受け入れるかのどちらかを選ぶことになります。
  • ターゲティングの喪失: すべてのユーザーが All Users オーディエンス向けに設計された同一のフローを見ることになり、国、マーケティングのアトリビューション、独自のカスタム属性に基づくパーソナライズされたターゲティングができなくなります。

これらのデメリットを受け入れてでも高速なフロー取得のメリットを活かしたい場合は、以下のように getFlowForDefaultAudience メソッドを使用してください。そうでない場合は、上記で説明した getFlow を引き続き使用してください。

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlowForDefaultAudience(id);
  // the requested flow
} catch (error) {
    // handle the error
}
パラメータ必須/任意説明
placementId必須プレースメントの識別子です。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
fetchPolicyデフォルト: 'reload_revalidating_cache_data'

fetchPolicy は、SDK がどのレイヤーを最初に読み取るかを設定するものであり、キャッシュを使用できるかどうかを制御するものではありません。デフォルトでは SDK はまずサーバーにアクセスし、そのリクエストが失敗した場合にキャッシュデータを返します。ユーザーが常に最新のデータを受け取れるため、このバリアントを推奨します。

ただし、ユーザーが不安定なインターネット環境にいる可能性がある場合は、'return_cache_data_else_load' を検討してください。これは順序を逆にして、まずキャッシュを読み取り、キャッシュが存在しない場合のみサーバーにアクセスします。最新のデータが取得できない場合がありますが、インターネット接続が不安定な状況でも高速な読み込みを実現できます。キャッシュは定期的に更新されるため、セッション中にネットワークリクエストを避ける目的で使用しても安全です。

3番目のポリシー 'return_cache_data_if_not_expired_else_load' は両者の中間に位置します。キャッシュのコピーが一緒に渡した maxAgeSeconds より新しい間はキャッシュを先に読み取り、古くなるとサーバーにアクセスします。

キャッシュはアプリの再起動後も保持され、アプリの再インストール時または手動でクリアした場合のみ削除されます。

リモートコンフィグとカスタムペイウォールを表示する前に、それらの情報を取得する必要があります。このトピックはリモートコンフィグとカスタムペイウォールに関するものです。ペイウォールビルダーでカスタマイズしたペイウォールの取得方法については、ペイウォールビルダーのペイウォールとその設定を取得するを参照してください。

Tip

Adapty SDK がモバイルアプリにどのように組み込まれているか、実際の例を見たいですか?ペイウォールの表示、購入処理、その他の基本的な機能を含むフルセットアップを示したサンプルアプリをご覧ください。

モバイルアプリでペイウォールとプロダクトの取得を始める前に(クリックして展開)
  1. Adapty ダッシュボードでプロダクトを作成する。

  2. ペイウォールを作成し、プロダクトをペイウォールに追加する(Adapty ダッシュボード)

  3. プレースメントを作成し、ペイウォールをプレースメントに追加する(Adapty ダッシュボード)

  4. Adapty SDK をインストールする(モバイルアプリ)

ペイウォール情報を取得する

Adapty では、プロダクトは App Store と Google Play の両方からのプロダクトを組み合わせたものです。これらのクロスプラットフォームのプロダクトはペイウォールに統合されており、モバイルアプリの特定のプレースメント内に表示することができます。

プロダクトを表示するには、getPaywall メソッドを使ってプレースメントのいずれかからペイウォールを取得する必要があります。

Important

プロダクト ID をハードコードしないでください。 ハードコードすべき ID はプレースメント ID だけです。ペイウォールはリモートで設定されるため、プロダクトの数や利用可能なオファーはいつでも変わる可能性があります。アプリはこれらの変更を動的に処理する必要があります。今日ペイウォールが 2 つのプロダクトを返し、明日 3 つを返すようになっても、コードを変更せずにすべてを表示できるようにしてください。

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(id, locale);
    // the requested paywall
} catch (error) {
    // handle the error
}
パラメーター必須/任意説明
placementId必須プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
locale

任意

デフォルト: en

ペイウォールのローカライズの識別子。このパラメーターは、マイナス(-)で区切られた1つ以上のサブタグで構成された言語コードである必要があります。最初のサブタグは言語、2番目は地域を表します。

例: en は英語、pt-br はブラジルポルトガル語を表します。

ロケールコードの詳細や推奨される使用方法については、ローカライズとロケールコードを参照してください。

fetchPolicyデフォルト: 'reload_revalidating_cache_data'

fetchPolicy は、SDK がキャッシュを使用できるかどうかではなく、どのレイヤーを最初に読み込むかを設定します。デフォルトでは、SDK はまずサーバーにアクセスし、リクエストが失敗した場合にキャッシュデータを返します。ユーザーが常に最新のデータを受け取れるため、この設定を推奨します。

ただし、ユーザーが不安定なインターネット環境に置かれていると考える場合は、'return_cache_data_else_load' を検討してください。この設定では順序が逆になり、まずキャッシュを読み込み、キャッシュが存在しない場合のみサーバーにアクセスします。ユーザーは最新のデータを取得できない場合がありますが、インターネット接続が不安定でも高速な読み込みを実現できます。キャッシュは定期的に更新されるため、セッション中にネットワークリクエストを避けるために使用しても安全です。

3番目のポリシーである 'return_cache_data_if_not_expired_else_load' は、両者の中間に位置します。キャッシュのコピーが一緒に渡す maxAgeSeconds より新しい間はキャッシュを先に読み込み、古くなったらサーバーにアクセスします。

キャッシュはアプリを再起動しても保持され、アプリの再インストール時またはクリーンアップ操作の際にのみクリアされます。

Adapty SDK はペイウォールを2つのレイヤーに保存します。上記の定期更新されるキャッシュとフォールバックペイウォールです。また、ペイウォールをより高速に取得するための CDN と、CDN に到達できない場合に備えた独立したフォールバックサーバーも使用しています。このシステムは、インターネット接続が不安定な状況でも信頼性を確保しながら、常に最新バージョンのペイウォールを取得できるよう設計されています。

loadTimeoutMsデフォルト: 5秒

このメソッドのタイムアウトを制限する値です。タイムアウトに達した場合、キャッシュデータまたはローカルフォールバックが返されます。

内部的に複数のリクエストで構成される場合があるため、まれに loadTimeout で指定した時間よりわずかに遅れてタイムアウトすることがあります。

プロダクトIDをハードコードしないでください!ペイウォールはリモートで設定されるため、利用可能なプロダクト、プロダクトの数、特典(無料トライアルなど)は随時変更される場合があります。こうしたシナリオに対応できるコードを記述してください。

たとえば、最初に2つのプロダクトを取得した場合、アプリはそれら2つを表示する必要があります。後で3つのプロダクトを取得した場合は、コードを変更することなく3つすべてを表示できなければなりません。ハードコードする必要があるのはプレースメントIDのみです。

レスポンスのパラメーター:

パラメータ説明
PaywallAdaptyPaywall オブジェクト。プロダクトIDのリスト、ペイウォールの識別子、リモートコンフィグ、およびその他のいくつかのプロパティを含みます。

プロダクトの取得

ペイウォールを取得したら、それに対応するプロダクトの配列を取得できます。

try {
    // ...paywall
    const products = await adapty.getPaywallProducts(paywall);
  // the requested products list
} catch (error) {
    // handle the error
}

レスポンスパラメーター:

パラメータ説明
ProductsAdaptyPaywallProduct オブジェクトのリスト。プロダクト識別子、プロダクト名、価格、通貨、サブスクリプション期間、その他のプロパティが含まれます。

独自のペイウォールデザインを実装する場合、AdaptyPaywallProduct オブジェクトから以下のプロパティにアクセスする必要があります。よく使われるプロパティを以下に示しますが、利用可能なすべてのプロパティの詳細については、リンク先のドキュメントを参照してください。

プロパティ説明
Titleプロダクトのタイトルを表示するには、product.localizedTitle を使用します。ローカライズはデバイスのロケールではなく、ユーザーが選択したストアの国に基づきます。
Priceローカライズされた価格を表示するには、product.price?.localizedString を使用します。このローカライズはデバイスのロケール情報に基づきます。product.price?.amount を使用すると、価格を数値として取得することもできます。値はローカル通貨で提供されます。対応する通貨記号を取得するには、product.price?.currencySymbol を使用します。
Subscription Period期間(週、月、年など)を表示するには、product.subscription?.localizedSubscriptionPeriod を使用します。このローカライズはデバイスのロケールに基づきます。プログラムでサブスクリプション期間を取得するには、product.subscription?.subscriptionPeriod を使用します。そこから unit プロパティにアクセスして、長さ('day'、'week'、'month'、'year'、または 'unknown')を取得できます。numberOfUnits の値で期間の単位数を取得できます。たとえば、四半期ごとのサブスクリプションの場合、unit プロパティには 'month'、numberOfUnits には 3 が設定されます。
Introductory Offerサブスクリプションに初回オファーが含まれていることを示すバッジやインジケーターを表示するには、product.subscription?.offer?.phases プロパティを確認してください。これは最大2つの割引フェーズ(無料トライアルフェーズと初回価格フェーズ)を含むリストです。各フェーズオブジェクトには以下の便利なプロパティがあります:
• paymentMode:'free_trial'、'pay_as_you_go'、'pay_up_front'、'unknown' の値を持つ文字列。無料トライアルは 'free_trial' タイプになります。
• price:割引価格(数値)。無料トライアルの場合は 0 を確認してください。
• localizedNumberOfPeriods:デバイスのロケールを使用してローカライズされた、オファーの長さを説明する文字列。たとえば、3日間のトライアルオファーの場合、このフィールドには '3 days' が表示されます。
• subscriptionPeriod:このプロパティを使用して、オファー期間の個別の詳細を取得することもできます。オファーに対しても、前のセクションで説明したものと同じ方法で機能します。
• localizedSubscriptionPeriod:ユーザーのロケールに合わせてフォーマットされた、割引のサブスクリプション期間。

デフォルトオーディエンスのペイウォールでペイウォール取得を高速化する

通常、ペイウォールはほぼ瞬時に取得されるため、この処理を高速化することを気にする必要はありません。ただし、オーディエンスやペイウォールの数が多く、ユーザーのインターネット接続が不安定な場合、ペイウォールの取得に想定以上の時間がかかることがあります。そのような状況では、ペイウォールをまったく表示しないよりも、デフォルトのペイウォールを表示してスムーズなユーザー体験を提供したいと思うでしょう。

これを解決するには、getPaywallForDefaultAudience メソッドを使用します。このメソッドは、All Users オーディエンスに対して指定されたプレースメントのペイウォールを取得します。ただし、推奨されるアプローチは、上記の ペイウォール情報の取得 セクションで説明されている getPaywall メソッドでペイウォールを取得することです。

Warning

getPaywall を推奨する理由

getPaywallForDefaultAudience メソッドにはいくつかの重大な欠点があります:

  • 後方互換性の問題: 現在のバージョンと将来のバージョンで異なるペイウォールを表示する必要がある場合、問題が生じる可能性があります。現在(レガシー)バージョンに対応したペイウォールを設計するか、現在(レガシー)バージョンのユーザーがペイウォールを表示できない問題を許容するかのどちらかになります。
  • ターゲティングの喪失: すべてのユーザーが All Users オーディエンス向けに設計された同一のペイウォールを見ることになり、国、マーケティングのアトリビューション、独自のカスタム属性などに基づいたパーソナライズされたターゲティングができなくなります。

これらのデメリットを受け入れてでもペイウォールの高速取得を利用したい場合は、以下のように getPaywallForDefaultAudience メソッドを使用してください。そうでなければ、上記で説明した getPaywall を使い続けることをおすすめします。

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}
Note

getPaywallForDefaultAudience メソッドは、React Native SDK バージョン 2.11.2 以降で利用できます。

パラメータ必須/任意説明
placementId必須プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。
locale

任意

デフォルト: en

ペイウォールのローカライズの識別子。このパラメータは、ハイフン(-)で区切られた1つ以上のサブタグで構成された言語コードを指定します。最初のサブタグは言語、2番目は地域を表します。

例: en は英語、pt-br はブラジルポルトガル語を表します。

ロケールコードの詳細および推奨される使用方法については、ローカライズとロケールコードを参照してください。

fetchPolicyデフォルト: 'reload_revalidating_cache_data'

fetchPolicy は、SDK がキャッシュを使用できるかどうかではなく、どのレイヤーを最初に読み取るかを設定します。デフォルトでは SDK はまずサーバーにアクセスし、リクエストが失敗した場合にキャッシュデータを返します。ユーザーが常に最新のデータを取得できるため、この設定を推奨します。

ただし、ユーザーのインターネット接続が不安定な場合は、'return_cache_data_else_load' の使用を検討してください。この設定では順序が逆になり、まずキャッシュを読み取り、キャッシュが存在しない場合にのみサーバーにアクセスします。ユーザーが必ずしも最新のデータを取得できるわけではありませんが、インターネット接続が不安定な状況でも高速なロードを実現できます。キャッシュは定期的に更新されるため、ネットワークリクエストを減らす目的でセッション中に使用しても安全です。

3つ目のポリシー 'return_cache_data_if_not_expired_else_load' は、両者の中間に位置します。キャッシュのコピーが指定した maxAgeSeconds より新しい場合はキャッシュを先に読み取り、古くなった場合はサーバーにアクセスします。

キャッシュはアプリを再起動しても保持され、アプリの再インストール時または手動でクリアした場合にのみ消去されます。