Webペイウォール

Adaptyを使えば、ユーザーをブラウザへリダイレクトして決済を行うボタンを備えたペイウォールやフローを作成できます。購入が完了してアプリに戻ると、サブスクリプションが有効になります。 これにより、ストアの手数料を回避しながらユーザーの支払いを追跡できます。

仕組み

Webペイウォールは、アプリ内ペイウォールごとに生成される固有のURLです。決済のためにブラウザで開き、Stripe、Paddleなどさまざまな決済プロバイダーに対応しています。Apple Payボタンのみのシンプルなページから、追加オファーを含む複雑なフローまでサポートします。

ウェブペイウォールは以下の手順で動作します。

1. ウェブペイウォールページの外観と動作を設定する — ウェブペイウォールエディターで行います。
2. ウェブペイウォールをリンクする — ペイウォールの設定で行います。
3. アプリのペイウォールに、ユーザーをブラウザへリダイレクトするボタンを追加する。
4. ユーザーがボタンをタップすると、Adapty SDK がユーザーの Adapty プロファイル ID を含む一意の URL を生成する。
5. ユーザーがウェブペイウォールページにアクセスし、外部決済方法を使ってサブスクリプションを購入する。
6. アプリに戻ると、Adapty SDK がサブスクリプションの有効化を確認するためにプロファイルの更新をポーリングする。
7. Adapty が購入を記録し、更新やキャンセルなどのステータス変更についてサブスクリプションを監視する。

プロファイル IDはURL内に含まれており、Web上での購入とアプリユーザーを紐付けます。購入はアプリがすでに使用しているプロファイルに反映されるため、Web購入者に対して Adapty.identify() を呼び出す必要はありません。

ステップ1：Webペイウォールを作成する

1. 操作対象のペイウォールを用意します。
   • 既存のペイウォールに外部決済を追加する場合は、複製してください。これにより、ターゲットセグメントにウェブペイウォールを表示し、それ以外のユーザーには元のペイウォールを表示できます。
   • 最初から作成する場合は、新しいペイウォールを作成してください。
2. ペイウォールページで Web paywall タブに切り替え、Create web paywall をクリックします。新しいページにリダイレクトされます。

3. ウェブペイウォールを設定し、支払い方法を接続します。

4. Web paywall ページに戻り、ペイウォールのリンクを貼り付けます。

5. Save をクリックします。

ステップ2. ペイウォールをトリガーする

Webペイウォールを使用するには、それをトリガーする必要があります。方法はセットアップ内容によって異なります。

• Flow & ペイウォールビルダーを使用している場合は、新しいボタンを追加するだけです。このボタンが指定したリンクを使用して購入を追跡し、データをAdaptyに送り返します。
• SDKを使用している場合は、Webペイウォールを処理するためにopenWebPaywallメソッドを設定する必要があります。

ステップ 2a. ウェブ購入ボタンを追加する

フロー & ペイウォールビルダーを使用している場合は、ウェブペイウォールボタンを追加する必要があります。このボタンは、購入を追跡してデータを Adapty に送り返すために指定したリンクを使用します。

1. フローを開き、ボタンを追加します。

   テンプレートまたは既存のペイウォールを使用している場合は、既存の購入ボタンの隣にウェブペイウォールボタンを追加してください。同じ方法で設定できます。

2. 右側の Interactions パネルで Add trigger をクリックし、このトリガーに Purchase アクションを割り当てます。

   

3. アクション設定で Web payment タブに切り替えます。そこで、Web購入ボタンに関連付けるプロダクトと（任意で）オファーを選択します。

4. Web paywall URL フィールドにWebペイウォールリンクを貼り付けます。

5. デフォルトでは、Webペイウォールはアプリ内ブラウザで開くため、ユーザーがアプリを離れる必要がありません。外部ブラウザで開きたい場合は、Open in external browser を選択してください。

ステップ2b：SDKメソッドを呼び出す

自分で開発したペイウォールを使用している場合は、SDKメソッドを使ってWebペイウォールを処理する必要があります。各フレームワークのガイドを参照してください：

• iOS
• Android
• React Native
• Flutter
• Unity
• Kotlin Multiplatform
• Capacitor

ステップ3：プレースメントを設定する

App Storeは米国と日本のみで外部決済オプションを許可しているため、これらの市場のiOSユーザー向けに別のユーザーセグメントを作成し、異なるセグメントに異なるペイウォールをターゲットするプレースメントを設定します。Androidユーザーには地理的制限がないため、国フィルターなしで別のAndroidセグメントを作成してください。

1. 以下の属性を持つ新しいセグメントを作成します：
   • Country from store account: United States、Japan
   • Platform: iOS and iPadOS
   • App version: Adapty SDKを使用している最新バージョン

2. プレースメントを作成するか、既存のものを編集します。ウェブペイウォールと作成したセグメントを使って新しいオーディエンスを追加します。

キャンセルファネルを追加する

キャンセルファネルとは、サブスクリプションをキャンセルしようとしているユーザーが開くウェブページです。キャンセルが完了する前に、一時停止・割引プラン・無料期間などを提案することができます。ウェブペイウォールと同じエディタで作成し、アプリからURLで開く仕組みです。ファネルが決済プロバイダーとのサブスクリプションのキャンセル処理を担うため、アプリ側でキャンセル用のAPI呼び出しを行う必要はありません。

キャンセルファネルを作成するには、ウェブペイウォールエディタで Cancellation タブを開きます。リテンションアクションはキャンセルファネルでのみ利用可能なため、ウェブペイウォールを提供するファネルには追加できません。ファネル自体については、FunnelFox のキャンセルファネルガイドを参照してください。

購読者の FunnelFox プロファイル ID を取得する

キャンセルファネルは、FunnelFox プロファイル ID によって購読者を識別します。ウェブサブスクリプションの購入後、FunnelFox はその ID を fnlfx_profile_id カスタム属性として Adapty のプロファイルに書き込みます。また同時に、fnlfx_funnel_id、fnlfx_session_id、vendor_profile_id、vendor も書き込まれます。

FunnelFox がこれらの属性を書き込むのは、最初のウェブサブスクリプション購入時のみです。それ以降の購入では、既存の値はそのまま保持されます。消耗型アイテムの購入の場合、FunnelFox はチェックアウト要素にカスタムアクセスレベルが設定されているときのみ、これらの属性を書き込みます。

アプリはユーザーのプロファイル上の customAttributes から fnlfx_profile_id を読み取ります。Adapty で同じ値を確認するには、Profiles を開いてユーザーのプロファイルを検索してください。

アプリからファネルを開く

キャンセルURLはアプリ自身で組み立てます。このURLは Web paywall URL フィールドには入力しません。そのフィールドはプロダクトを販売するペイウォール用であり、Adaptyが付加するのはfpidではなくadapty_profile_idです。

公開済みのキャンセルファネルURLと、サブスクライバーのfnlfx_profile_idを組み合わせてください：

https://<your-project>.fnlfx.com/cancel?fpid=<fnlfx_profile_id>

属性値はプレフィックスなしで、保存されている値をそのまま渡してください。ユーザーがキャンセルボタンをタップしたときにこのURLを開きます。

ユーザーはファネルのどの時点でも（サブスクリプションのキャンセル後も含め）ページを閉じることができます。ユーザーがアプリに戻ってきたことを確認とみなさないでください。プロファイルを取得して現在の状態を確認しましょう。キャンセルされたサブスクリプションは、有料期間が終了するまでアクセスレベルを維持します。