Capacitor SDKでリモートコンフィグペイウォールのペイウォールとプロダクトを取得する
リモートコンフィグやカスタムペイウォールを表示する前に、それらの情報を取得する必要があります。このトピックはリモートコンフィグとカスタムペイウォールに関するものです。Flow Builder や Paywall Builder でカスタマイズされたフローやペイウォールの取得方法については、Flow Builder のフローと Paywall Builder のペイウォールおよびその設定を取得するを参照してください。
Adapty SDK がモバイルアプリにどのように統合されているか、実際の例を見てみませんか?ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを実演しているサンプルアプリをご覧ください。
モバイルアプリでフローとプロダクトの取得を開始する前に(クリックして展開)
-
Adapty ダッシュボードでプロダクトを作成する。
-
Adapty ダッシュボードでフローまたはペイウォールを作成し、プロダクトを組み込む。
-
Adapty ダッシュボードでプレースメントを作成し、フローまたはペイウォールをプレースメントに組み込む。
-
モバイルアプリにAdapty SDK をインストールする。
フローの情報を取得する
Adapty では、プロダクトはApp StoreとGoogle Play両方のプロダクトを組み合わせたものです。これらのクロスプラットフォームのプロダクトはフローやペイウォールに統合されており、モバイルアプリ内の特定のプレースメントで表示できます。
プロダクトを表示するには、getFlow メソッドを使って、いずれかのプレースメントから AdaptyFlow を取得する必要があります。
プロダクト ID をハードコードしないでください。 ハードコードすべき ID はプレースメント ID のみです。フローはリモートで設定されるため、プロダクトの数や利用可能なオファーはいつでも変更される可能性があります。アプリはこれらの変更を動的に処理する必要があります。フローが今日は 2 つのプロダクトを返し、明日は 3 つを返す場合でも、コードを変更せずにすべてを表示できるようにしてください。
try {
const flow = await adapty.getFlow({
placementId: 'YOUR_PLACEMENT_ID',
params: {
fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
loadTimeoutMs: 5000 // 5 second timeout
}
});
// the requested flow
} catch (error) {
console.error('Failed to fetch flow:', error);
}
| パラメータ | 必須/任意 | 説明 |
|---|---|---|
| placementId | 必須 | プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。 |
| params.fetchPolicy | 任意 デフォルト: | デフォルトでは、SDK はサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。ユーザーが常に最新のデータを取得できるため、この設定を推奨します。 ただし、ユーザーのインターネット環境が不安定な場合は、 キャッシュはアプリを再起動しても保持され、アプリの再インストール時または手動でクリアした場合にのみ削除されます。 Adapty SDK はフローとペイウォールを2つの層で保存しています。1つは上述の定期更新されるキャッシュ、もう1つはフォールバックペイウォールです。また、フローとペイウォールをより速く取得するために CDN を使用し、CDN に到達できない場合に備えてスタンドアローンのフォールバックサーバーも用意しています。このシステムは、インターネット接続が不安定な場合でも信頼性を確保しながら、常に最新のフローを取得できるよう設計されています。 |
| params.loadTimeoutMs | 任意 デフォルト: 5000 ms | このメソッドのタイムアウト(ミリ秒)を制限する値です。タイムアウトに達した場合、キャッシュされたデータまたはローカルのフォールバックが返されます。 このメソッドは内部で複数のリクエストを行う場合があるため、まれに |
v4 では、getFlow は locale パラメータを受け取らなくなりました。カスタムペイウォールの場合、利用可能なすべてのロケールはフローのリモートコンフィグ(flow.remoteConfigs)で返されます。ユーザーのデバイスまたはアプリの設定に合うものを選択してください。
プロダクト ID をハードコードしないでください!フローはリモートで設定されるため、利用可能なプロダクト、プロダクトの数、特別オファー(無料トライアルなど)は随時変更される可能性があります。コードがこれらのシナリオに対応できるようにしてください。
たとえば、最初に 2 つのプロダクトを取得した場合、アプリはその 2 つを表示する必要があります。その後 3 つのプロダクトを取得した場合は、コードを変更することなく 3 つすべてを表示できるようにしてください。ハードコードする必要があるのはプレースメント ID だけです。
レスポンスパラメーター:
| パラメーター | 説明 |
|---|---|
| Flow | プレースメント、識別子(id、variationId)、名前、ペイウォールのバリアント(paywalls)、および設定済みロケールごとに1エントリの remoteConfigs 配列を含む AdaptyFlow オブジェクト。フローのプロダクトを取得するには、getPaywallProducts({ flow }) を呼び出してください。 |
プロダクトの取得
フローを取得したら、それに対応するプロダクトの配列を取得できます。
try {
const products = await adapty.getPaywallProducts({ flow });
// the requested products list
} catch (error) {
console.error('Failed to fetch products:', error);
}レスポンスパラメーター:
| パラメータ | 説明 |
|---|---|
| Products | AdaptyPaywallProduct オブジェクトのリストで、プロダクト識別子、プロダクト名、価格、通貨、サブスクリプション期間、その他のプロパティが含まれます。 |
独自のペイウォールデザインを実装する際には、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 メソッドでフローを取得することである点を十分に理解してください。詳細は上記のフロー情報の取得セクションを参照してください。
getFlow を推奨する理由
getFlowForDefaultAudience メソッドにはいくつかの重大な欠点があります。
- 後方互換性の問題: 現在のバージョンと将来のバージョンで異なるフローを表示する必要がある場合、課題が生じる可能性があります。現在(レガシー)バージョンに対応したフローを設計するか、現在(レガシー)バージョンのユーザーがフローを正しく表示できないリスクを受け入れるかのいずれかになります。
- ターゲティングの喪失: すべてのユーザーが All Users オーディエンス向けに設計された同じフローを見ることになるため、パーソナライズされたターゲティング(国、マーケティングアトリビューション、独自のカスタム属性に基づくものを含む)が失われます。
これらのデメリットを受け入れてでも高速なフロー取得のメリットを活用したい場合は、以下のように
getFlowForDefaultAudienceメソッドを使用してください。そうでない場合は、上記で説明したgetFlowを使用してください。
try {
const flow = await adapty.getFlowForDefaultAudience({
placementId: 'YOUR_PLACEMENT_ID',
params: {
fetchPolicy: 'reload_revalidating_cache_data' // Load from server, fallback to cache
}
});
// the requested flow
} catch (error) {
console.error('Failed to fetch default audience flow:', error);
}
| パラメータ | 必須/任意 | 説明 |
|---|---|---|
| placementId | 必須 | プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。 |
| params.fetchPolicy | 任意 デフォルト: | デフォルトでは、SDK はサーバーからデータの読み込みを試み、失敗した場合はキャッシュされたデータを返します。この方式を推奨するのは、ユーザーが常に最新のデータを取得できるためです。 ただし、ユーザーのインターネット接続が不安定だと想定される場合は、 なお、キャッシュはアプリを再起動しても保持され、アプリの再インストールまたは手動でクリアした場合にのみ消去されます。 |
リモートコンフィグやカスタムペイウォールを表示する前に、それらの情報を取得する必要があります。このトピックはリモートコンフィグとカスタムペイウォールに関するものです。ペイウォールビルダーでカスタマイズされたペイウォールの取得方法については、ペイウォールビルダーのペイウォールとその設定を取得するをご参照ください。
Adapty SDK がモバイルアプリにどのように統合されているか、実際の例を見てみませんか?ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを実演しているサンプルアプリをご覧ください。
モバイルアプリでペイウォールとプロダクトの取得を始める前に(クリックして展開)
-
Adapty ダッシュボードでプロダクトを作成する。
-
ペイウォールを作成し、プロダクトをペイウォールに組み込む(Adapty ダッシュボード内)。
-
プレースメントを作成し、ペイウォールをプレースメントに組み込む(Adapty ダッシュボード内)。
-
Adapty SDK をインストールする(モバイルアプリ内)。
ペイウォール情報の取得
Adapty では、プロダクトはApp StoreとGoogle Playの両方のプロダクトを組み合わせたものです。これらのクロスプラットフォームのプロダクトはペイウォールに統合されており、モバイルアプリの特定のプレースメント内で表示できます。
プロダクトを表示するには、getPaywall メソッドを使ってプレースメントのいずれかからペイウォールを取得する必要があります。
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
locale: 'en',
params: {
fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
loadTimeoutMs: 5000 // 5 second timeout
}
});
// the requested paywall
} catch (error) {
console.error('Failed to fetch paywall:', error);
}
| パラメーター | 必須/任意 | 説明 |
|---|---|---|
| placementId | 必須 | プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。 |
| locale | 任意 デフォルト: | ペイウォールのローカライゼーションの識別子。このパラメーターは、マイナス(-)文字で区切られた1つ以上のサブタグで構成される言語コードを指定します。最初のサブタグは言語、2番目は地域を表します。 例: ロケールコードおよび推奨される使用方法については、ローカライゼーションとロケールコードを参照してください。 |
| params.fetchPolicy | 任意 デフォルト: | デフォルトでは、SDKはサーバーからデータを読み込もうとし、失敗した場合はキャッシュされたデータを返します。この方法はユーザーが常に最新のデータを取得できるため、推奨しています。 ただし、ユーザーが不安定なインターネット環境を使用していると考えられる場合は、 キャッシュはアプリを再起動しても保持され、アプリのアンインストールまたは手動でのクリーンアップ時にのみクリアされます。 |
| params.loadTimeoutMs | 任意 デフォルト: 5000 ms | このメソッドのタイムアウト(ミリ秒)を制限する値です。タイムアウトに達した場合、キャッシュされたデータまたはローカルフォールバックが返されます。 このメソッドは内部で複数のリクエストを行う場合があるため、 |
| プロダクトIDをハードコードしないでください。 ハードコードすべきIDはプレースメントIDのみです。ペイウォールはリモートで設定されるため、プロダクトの数や利用可能なオファーはいつでも変わる可能性があります。アプリはこれらの変更を動的に処理する必要があります。たとえば、今日のペイウォールが2つのプロダクトを返し、明日3つを返す場合でも、コードを変更せずにすべて表示できるようにしてください。 |
レスポンスパラメーター:
| パラメータ | 説明 |
|---|---|
| Paywall | プロダクトIDのリスト、ペイウォールの識別子、リモートコンフィグ、その他いくつかのプロパティを含む AdaptyPaywall オブジェクト。 |
プロダクトを取得する
ペイウォールを取得したら、それに対応するプロダクトの配列を取得できます:
try {
const products = await adapty.getPaywallProducts({ paywall });
// the requested products list
} catch (error) {
console.error('Failed to fetch products:', error);
}レスポンスパラメーター:
| パラメータ | 説明 |
|---|---|
| Products | AdaptyPaywallProduct オブジェクトのリスト。プロダクト識別子、プロダクト名、価格、通貨、サブスクリプション期間、その他いくつかのプロパティを含みます。 |
独自のペイウォールデザインを実装する場合、AdaptyPaywallProduct オブジェクトの以下のプロパティが必要になります。よく使われるプロパティを以下に示しますが、利用可能なすべてのプロパティの詳細については、リンク先のドキュメントを参照してください。 | |
| プロパティ | 説明 |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| タイトル | プロダクトのタイトルを表示するには、product.localizedTitle を使用します。ローカライズはデバイスのロケールではなく、ユーザーが選択したストアの国に基づいて行われます。 |
| 価格 | ローカライズされた価格を表示するには、product.price?.localizedString を使用します。このローカライズはデバイスのロケール情報に基づいています。product.price?.amount を使って数値としての価格にアクセスすることもできます。値はローカル通貨で提供されます。関連する通貨記号を取得するには、product.price?.currencySymbol を使用します。 |
| サブスクリプション期間 | 期間(週、月、年など)を表示するには、product.subscription?.localizedSubscriptionPeriod を使用します。このローカライズはデバイスのロケールに基づいています。プログラムでサブスクリプション期間を取得するには、product.subscription?.subscriptionPeriod を使用します。ここから unit プロパティにアクセスして長さ('day'、'week'、'month'、'year'、'unknown' のいずれか)を取得できます。numberOfUnits の値で期間の単位数を取得できます。たとえば、四半期ごとのサブスクリプションの場合、unit プロパティには 'month'、numberOfUnits プロパティには 3 が表示されます。 |
| 初回オファー | サブスクリプションに初回オファーが含まれていることを示すバッジやインジケーターを表示するには、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 メソッドでペイウォールを取得することである点を理解することが重要です。
getPaywall を推奨する理由
getPaywallForDefaultAudience メソッドにはいくつかの重大な欠点があります:
- 後方互換性の問題: 異なるアプリバージョン(現在と将来)に対して異なるペイウォールを表示する必要がある場合、課題が生じる可能性があります。現在の(レガシー)バージョンをサポートするペイウォールを設計するか、現在の(レガシー)バージョンのユーザーがレンダリングされないペイウォールの問題に遭遇することを許容するかのどちらかになります。
- ターゲティングの喪失: すべてのユーザーが All Users オーディエンス向けに設計された同じペイウォールを見ることになるため、パーソナライズされたターゲティング(国、マーケティングアトリビューション、独自のカスタム属性に基づくものを含む)が失われます。
デフォルトオーディエンス向けの高速なペイウォール取得というメリットを受け入れられる場合は、以下のように
getPaywallForDefaultAudienceメソッドを使用してください。そうでない場合は、上記で説明したgetPaywallを使用してください。
try {
const paywall = await adapty.getPaywallForDefaultAudience({
placementId: 'YOUR_PLACEMENT_ID',
locale: 'en',
params: {
fetchPolicy: 'reload_revalidating_cache_data' // Load from server, fallback to cache
}
});
// the requested paywall
} catch (error) {
console.error('Failed to fetch default audience paywall:', error);
}
| パラメータ | 必須/任意 | 説明 |
|---|---|---|
| placementId | 必須 | プレースメントの識別子。Adapty ダッシュボードでプレースメントを作成する際に指定した値です。 |
| locale | 任意 デフォルト: | ペイウォールのローカライズの識別子。このパラメータは、マイナス(-)文字で区切られた1つ以上のサブタグで構成される言語コードを指定します。最初のサブタグは言語、2番目は地域を表します。 例: ロケールコードおよび推奨される使用方法については、ローカライズとロケールコードを参照してください。 |
| params.fetchPolicy | 任意 デフォルト: | デフォルトでは、SDK はサーバーからデータの読み込みを試み、失敗した場合はキャッシュされたデータを返します。ユーザーが常に最新のデータを受け取れるようになるため、この設定を推奨します。 ただし、ユーザーが不安定なインターネット環境を利用していると想定される場合は、 キャッシュはアプリの再起動後も保持され、アプリの再インストール時または手動でクリアした場合にのみ削除されます。 |