Android SDKのObserverモードでフローを表示する

Observerモードを使用している場合、購入ロジックはご自身で実装する必要があります。ただし、ペイウォールのUIはフロー＆ペイウォールビルダーに委任できます。

ビルダーでスクリーンをデザインすると、Adapty SDKがネイティブにレンダリングします。コピー、レイアウト、価格はいつでも更新でき、アプリのリリースは不要です。ユーザーが購入ボタンをタップすると、SDKがあなたのコードを呼び出して購入を完了します。

このガイドでは、そのスクリーンの表示方法と購入コールの処理方法を説明します。Adaptyが購入を代わりに処理する場合は、フローとペイウォールの表示を参照してください。

始める前に

必要なもの：

Adapty Android SDK v4以降: 旧バージョンではフローをレンダリングできません。既存のアプリをv3から移行するには、移行ガイドを参照してください。
observerModeをtrueに設定: Android SDKインストールガイドを参照してください。
ストアの初期連携: Google PlayでAdaptyをセットアップしてください。
プロダクトが割り当てられた公開済みフロー: フロー＆ペイウォールビルダーで作成し、プロダクトを割り当ててください。
フローのプレースメント: プレースメントを作成して、フローを割り当ててください。
アプリ内でフローを取得済み: フローを表示する前に、フローとその設定を取得してください。

実装

AdaptyUiObserverModeHandler を実装してください。

onPurchaseInitiated イベントは、ユーザーが購入を開始したことを通知します。このコールバックに応答して、カスタムの購入フローを起動できます。

val observerModeHandler =
 AdaptyUiObserverModeHandler { product, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

Observerモードでの復元を処理するには、getRestoreHandler()をオーバーライドします。デフォルトではnullが返され、Adaptyの組み込みAdapty.restorePurchases()フローが使用されます。独自の復元実装を提供するには:

val observerModeHandler = object : AdaptyUiObserverModeHandler {
    override fun onPurchaseInitiated(
        product: AdaptyPaywallProduct,
        onStartPurchase: AdaptyUiObserverModeHandler.PurchaseStartCallback,
        onFinishPurchase: AdaptyUiObserverModeHandler.PurchaseFinishCallback,
    ) {
        // the same body as the purchase example above
    }

    override fun getRestoreHandler() =
        AdaptyUiObserverModeHandler.RestoreHandler { onStartRestore, onFinishRestore ->
            onStartRestore()
            yourBillingClient.restorePurchases(
                onSuccess = { restoredPurchases ->
                    onFinishRestore()
                    //handle successful restore
                },
                onError = {
                    onFinishRestore()
                    //handle error
                }
            )
        }
}

AdaptyUiObserverModeHandler observerModeHandler = new AdaptyUiObserverModeHandler() {
    @Override
    public void onPurchaseInitiated(
        AdaptyPaywallProduct product,
        PurchaseStartCallback onStartPurchase,
        PurchaseFinishCallback onFinishPurchase
    ) {
        // the same body as the purchase example above
    }

    @Override
    public RestoreHandler getRestoreHandler() {
        return (onStartRestore, onFinishRestore) -> {
            onStartRestore.invoke();
            yourBillingClient.restorePurchases(
                restoredPurchases -> {
                    onFinishRestore.invoke();
                    //handle successful restore
                },
                error -> {
                    onFinishRestore.invoke();
                    //handle error
                }
            );
        };
    }
};

Remember to invoke the following callbacks to notify AdaptyUI about the purchase or restore process. This is necessary for proper flow behavior, such as showing the loader:

コールバック	説明
onStartPurchase()	購入が開始されたことを AdaptyUI に通知するために呼び出すコールバックです。
onFinishPurchase()	購入が完了したことを AdaptyUI に通知するために呼び出すコールバックです。
onStartRestore()	任意。復元が開始されたことを AdaptyUI に通知するために呼び出せるコールバックです。
onFinishRestore()	任意。復元が完了したことを AdaptyUI に通知するために呼び出せるコールバックです。

デバイス画面にビジュアルフローを表示するには、まず設定が必要です。

これを行うには、AdaptyUI.getFlowView() メソッドを呼び出すか、AdaptyFlowView を直接作成します。

   val flowView = AdaptyUI.getFlowView(
       activity,
       flowConfiguration,
       products,
       eventListener,
       insets,
       customAssets,
       tagResolver,
       timerResolver,
       observerModeHandler, 
   )

   val flowView =
        AdaptyFlowView(activity) // or retrieve it from xml
   ...
   with(flowView) {
       showFlow(
           flowConfiguration,
           products,
					 eventListener,
           insets,
           customAssets,
           tagResolver,
           timerResolver,
					 observerModeHandler,
       )
   }

AdaptyFlowView flowView = AdaptyUI.getFlowView(
        activity,
        flowConfiguration,
        products,
        eventListener,
        insets,
        customAssets,
        tagResolver,
        timerResolver,
        observerModeHandler
);

AdaptyFlowView flowView =
  new AdaptyFlowView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
flowView.showFlow(flowConfiguration, products, eventListener, insets, customAssets, tagResolver, timerResolver, observerModeHandler);

<com.adapty.ui.AdaptyFlowView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

ビューが正常に作成されたら、それをビュー階層に追加して表示できます。

この操作には、次のコンポーザブル関数を使用します：

AdaptyFlowScreen(
    flowConfiguration,
    products,
    eventListener,
    insets,
    customAssets,
    tagResolver,
    timerResolver,
    observerModeHandler,
)

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

パラメーター	必須/任意	説明
flowConfiguration	必須	フローのビジュアル詳細を含む `AdaptyUI.FlowConfiguration` オブジェクトを指定します。`AdaptyUI.getFlowConfiguration(flow)` メソッドを使用して読み込んでください。詳細はビュー設定の取得をご参照ください。
products	任意	画面上のプロダクト表示タイミングを最適化するために、`AdaptyPaywallProduct` の配列を指定します。`null` を渡した場合、AdaptyUI が必要なプロダクトを自動的に取得します。
eventListener	任意	フローイベントを監視するために `AdaptyFlowEventListener` を指定します。使いやすさの観点から、`AdaptyFlowDefaultEventListener` の拡張が推奨されます。詳細はフロー＆ペイウォールイベントの処理をご参照ください。
insets	任意	インセットは、タップ可能な要素がシステムバーの後ろに隠れないようにするためのフロー周囲のスペースです。デフォルト: `Unspecified`（Adapty がインセットを自動的に調整します）。フローインセットの変更をご参照ください。
customAssets	任意	`AdaptyCustomAssets` オブジェクトを渡すことで、実行時にフロー内の画像や動画を置き換えることができます。詳細はアセットのカスタマイズをご参照ください。
tagResolver	任意	フローテキスト内のカスタムタグを解決するために `AdaptyUiTagResolver` を使用します。このリゾルバーはタグパラメーターを受け取り、対応する文字列に解決します。
observerModeHandler	Observerモードで必須	前のステップで実装した `AdaptyUiObserverModeHandler`。

Warning

ペイウォールを購入トランザクションに関連付けることを忘れないでください。関連付けを行わないと、Adapty は購入のソースフローを特定できません。

ペイウォールを表示する前に（クリックして展開）

Adapty と Google Play および App Store の初期連携を設定します。 2. SDK をインストールして設定します。observerMode パラメータを true に設定してください。フレームワーク別の手順は Android 向けを参照してください。 3. Adapty ダッシュボードでプロダクトを作成します。 4. Adapty ダッシュボードでペイウォールを設定してプロダクトを割り当て、ペイウォールビルダーでカスタマイズします。 5. Adapty ダッシュボードでプレースメントを作成してペイウォールを割り当てます。 6. モバイルアプリのコードでペイウォールビルダーのペイウォールとその設定を取得します。

AdaptyUiObserverModeHandlerを実装してください。

onPurchaseInitiatedイベントは、ユーザーが購入を開始したことを通知します。このコールバックに応答して、カスタムの購入フローを起動できます：

Note

Adapty Android SDK 3.15.0より前のバージョンでは、このコールバックにペイウォールとペイウォールビューも渡されていました。3.15.0以降にアップグレードする際は、これら2つのパラメータを削除してください。

val observerModeHandler =
 AdaptyUiObserverModeHandler { product, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

Observerモードでの復元を処理するには、getRestoreHandler()をオーバーライドします。デフォルトではnullを返し、Adaptyの組み込みAdapty.restorePurchases()フローを使用します。独自の復元実装を提供するには：

val observerModeHandler = object : AdaptyUiObserverModeHandler {
    override fun onPurchaseInitiated(
        product: AdaptyPaywallProduct,
        onStartPurchase: AdaptyUiObserverModeHandler.PurchaseStartCallback,
        onFinishPurchase: AdaptyUiObserverModeHandler.PurchaseFinishCallback,
    ) {
        // the same body as the purchase example above
    }

    override fun getRestoreHandler() =
        AdaptyUiObserverModeHandler.RestoreHandler { onStartRestore, onFinishRestore ->
            onStartRestore()
            yourBillingClient.restorePurchases(
                onSuccess = { restoredPurchases ->
                    onFinishRestore()
                    //handle successful restore
                },
                onError = {
                    onFinishRestore()
                    //handle error
                }
            )
        }
}

AdaptyUiObserverModeHandler observerModeHandler = new AdaptyUiObserverModeHandler() {
    @Override
    public void onPurchaseInitiated(
        AdaptyPaywallProduct product,
        PurchaseStartCallback onStartPurchase,
        PurchaseFinishCallback onFinishPurchase
    ) {
        // the same body as the purchase example above
    }

    @Override
    public RestoreHandler getRestoreHandler() {
        return (onStartRestore, onFinishRestore) -> {
            onStartRestore.invoke();
            yourBillingClient.restorePurchases(
                restoredPurchases -> {
                    onFinishRestore.invoke();
                    //handle successful restore
                },
                error -> {
                    onFinishRestore.invoke();
                    //handle error
                }
            );
        };
    }
};

Remember to invoke the following callbacks to notify AdaptyUI about the purchase or restore process. This is necessary for proper paywall behavior, such as showing the loader:

コールバック	説明
onStartPurchase()	購入が開始されたことを AdaptyUI に通知するために呼び出すコールバックです。
onFinishPurchase()	購入が完了したことを AdaptyUI に通知するために呼び出すコールバックです。
onStartRestore()	任意。リストアが開始されたことを AdaptyUI に通知するために呼び出せるコールバックです。
onFinishRestore()	任意。リストアが完了したことを AdaptyUI に通知するために呼び出せるコールバックです。

デバイス画面にビジュアルペイウォールを表示するには、まず設定が必要です。

これを行うには、AdaptyUI.getPaywallView() メソッドを呼び出すか、AdaptyPaywallView を直接作成します：

   val paywallView = AdaptyUI.getPaywallView(
       activity,
       viewConfiguration,
       products,
       eventListener,
       personalizedOfferResolver,
       tagResolver,
       timerResolver,
       observerModeHandler, 
   )

   val paywallView =
        AdaptyPaywallView(activity) // or retrieve it from xml
   ...
   with(paywallView) {
       showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
					 observerModeHandler,
       )
   }

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        eventListener,
        personalizedOfferResolver,
        tagResolver,
        timerResolver,
        observerModeHandler
);

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.showPaywall(viewConfiguration, products, eventListener, personalizedOfferResolver, tagResolver, timerResolver, observerModeHandler);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

ビューが正常に作成されたら、ビュー階層に追加して表示できます。

この操作には、次のコンポーザブル関数を使用します：

AdaptyPaywallScreen(
    viewConfiguration,
    products,
    eventListener,
    personalizedOfferResolver,
    tagResolver,
    timerResolver,
)

リクエストパラメータ：

パラメータ	必須/任意	説明
Products	任意	画面上のプロダクト表示タイミングを最適化するために、`AdaptyPaywallProduct` の配列を指定します。`null` を渡した場合、AdaptyUI が必要なプロダクトを自動的に取得します。
ViewConfiguration	必須	ペイウォールのビジュアル詳細を含む `AdaptyViewConfiguration` オブジェクトを指定します。`Adapty.getViewConfiguration(paywall)` メソッドを使って読み込んでください。詳細はペイウォールのビジュアル設定を取得するを参照してください。
EventListener	任意	ペイウォールのイベントを監視するために `AdaptyUiEventListener` を指定します。使いやすさの観点から、AdaptyUiDefaultEventListener の拡張が推奨されます。詳細はペイウォールイベントの処理を参照してください。
PersonalizedOfferResolver	任意	パーソナライズされた価格（詳細はこちら）を示すには、`AdaptyUiPersonalizedOfferResolver` を実装し、`AdaptyPaywallProduct` の価格がパーソナライズされている場合は true、そうでない場合は false を返す独自のロジックを渡します。
TagResolver	任意	ペイウォールテキスト内のカスタムタグを解決するには `AdaptyUiTagResolver` を使用します。このリゾルバーはタグパラメータを受け取り、対応する文字列に解決します。詳細はペイウォールビルダーのカスタムタグのトピックを参照してください。
ObserverModeHandler	オブザーバーモードでは必須	前のステップで実装した `AdaptyUiObserverModeHandler`。
variationId	必須	バリアントの文字列識別子。`AdaptyPaywall` オブジェクトの `variationId` プロパティを使用して取得できます。
transaction	必須	iOS、StoreKit1 の場合: `SKPaymentTransaction` オブジェクト。 iOS、StoreKit 2 の場合: Transaction オブジェクト。 Android の場合: 購入の文字列識別子（`purchase.getOrderId()`）。ここで purchase は課金ライブラリの Purchase クラスのインスタンスです。

ペイウォールの表示を始める前に（クリックして展開）

Adaptyの初期連携をGoogle PlayおよびApp Storeと設定します。
SDKをインストールして設定します。observerModeパラメーターをtrueに設定してください。フレームワーク別の手順は、Android、React Native、Flutter、Unityを参照してください。
Adapty ダッシュボードでプロダクトを作成します。
Adapty ダッシュボードでペイウォールを設定してプロダクトを割り当て、ペイウォールビルダーを使ってカスタマイズします。
Adapty ダッシュボードでプレースメントを作成してペイウォールを割り当てます。
モバイルアプリのコードでペイウォールビルダーのペイウォールとその設定を取得します。

AdaptyUiObserverModeHandler を実装します。AdaptyUiObserverModeHandler のコールバック（onPurchaseInitiated）は、ユーザーが購入を開始したときに通知します。このコールバックに応じて、次のようにカスタム購入フローをトリガーできます。

val observerModeHandler =
AdaptyUiObserverModeHandler { product, paywall, paywallView, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, paywall, paywallView, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

また、AdaptyUI にこれらのコールバックを呼び出すことも忘れないでください。これは、ローダーの表示など、ペイウォールの適切な動作に必要です。

Kotlin のコールバック	Java のコールバック	説明
onStartPurchase()	onStartPurchase.invoke()	購入が開始されたことを AdaptyUI に通知するために呼び出すコールバックです。
onFinishPurchase()	onFinishPurchase.invoke()	購入が正常に完了したか、失敗したか、またはキャンセルされたことを AdaptyUI に通知するために呼び出すコールバックです。

ビジュアルペイウォールを表示するには、まず初期化が必要です。そのために、AdaptyUI.getPaywallView() メソッドを呼び出すか、AdaptyPaywallView を直接作成してください：

val paywallView = AdaptyUI.getPaywallView(
    activity,
    viewConfiguration,
    products,
    AdaptyPaywallInsets.of(topInset, bottomInset),
    eventListener,
    personalizedOfferResolver,
    tagResolver,
    observerModeHandler,
)

//======= OR =======

val paywallView =
     AdaptyPaywallView(activity) // or retrieve it from xml
...
with(paywallView) {
    setEventListener(eventListener)
    setObserverModeHandler(observerModeHandler)
    showPaywall(
        viewConfiguration,
        products,
        AdaptyPaywallInsets.of(topInset, bottomInset),
        personalizedOfferResolver,
        tagResolver,
    )
}

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        AdaptyPaywallInsets.of(topInset, bottomInset),
        eventListener,
        personalizedOfferResolver,
        tagResolver,
        observerModeHandler
);

//======= OR =======

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.setEventListener(eventListener);
paywallView.setObserverModeHandler(observerModeHandler);
paywallView.showPaywall(viewConfiguration, products, AdaptyPaywallInsets.of(topInset, bottomInset), personalizedOfferResolver);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

リクエストパラメータ:

ビューが正常に作成されたら、ビュー階層に追加して表示できます。

パラメーター	必須/任意	説明
Products	任意	画面上のプロダクト表示タイミングを最適化するために `AdaptyPaywallProduct` の配列を指定します。`null` を渡した場合、AdaptyUI は必要なプロダクトを自動的に取得します。
ViewConfiguration	必須	ペイウォールの視覚的な詳細を含む `AdaptyViewConfiguration` オブジェクトを指定します。`Adapty.getViewConfiguration(paywall)` メソッドを使用して読み込みます。詳細についてはペイウォールのビジュアル設定を取得するを参照してください。
Insets	必須	システムバーに重なる領域の情報を含む `AdaptyPaywallInsets` オブジェクトを定義し、コンテンツの垂直マージンを作成します。ステータスバーもナビゲーションバーも `AdaptyPaywallView` に重ならない場合は `AdaptyPaywallInsets.NONE` を渡してください。システムバーが UI の一部に重なるフルスクリーンモードの場合は、表の下に示す方法でインセットを取得してください。
EventListener	任意	ペイウォールイベントを監視するために `AdaptyUiEventListener` を指定します。使いやすさのため、AdaptyUiDefaultEventListener を継承することを推奨します。詳細についてはペイウォールイベントの処理を参照してください。
PersonalizedOfferResolver	任意	パーソナライズされた価格（詳細を読む）を示すには、`AdaptyUiPersonalizedOfferResolver` を実装し、`AdaptyPaywallProduct` の価格がパーソナライズされている場合に true、そうでない場合に false を返す独自のロジックを渡してください。
TagResolver	任意	ペイウォールテキスト内のカスタムタグを解決するために `AdaptyUiTagResolver` を使用します。このリゾルバーはタグパラメーターを受け取り、対応する文字列に解決します。詳細についてはペイウォールビルダーのカスタムタグのトピックを参照してください。
ObserverModeHandler	オブザーバーモードで必須	前のステップで実装した `AdaptyUiObserverModeHandler`。
variationId	必須	バリアントの文字列識別子。`AdaptyPaywall` オブジェクトの `variationId` プロパティを使用して取得できます。
transaction	必須	iOS、StoreKit1 の場合: `SKPaymentTransaction` オブジェクト。 iOS、StoreKit 2 の場合: Transaction オブジェクト。 Android の場合: 購入の文字列識別子（`purchase.getOrderId()`）。ここで purchase は billing library の Purchase クラスのインスタンスです。

フルスクリーンモードでシステムバーがUIの一部に重なる場合は、次のようにインセットを取得します。

import androidx.core.graphics.Insets
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
    ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
        val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        ViewCompat.setOnApplyWindowInsetsListener(this, null)
        action(systemBarInsets)
        insets
    }
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
    val paywallInsets = AdaptyPaywallInsets.of(insets.top, insets.bottom)
    paywallView.setEventListener(eventListener)
    paywallView.setObserverModeHandler(observerModeHandler)
    paywallView.showPaywall(viewConfig, products, paywallInsets, personalizedOfferResolver, tagResolver)
}

import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

...

ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
    Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
    ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);
  
    AdaptyPaywallInsets paywallInsets =
                 AdaptyPaywallInsets.of(systemBarInsets.top, systemBarInsets.bottom);
    paywallView.setEventListener(eventListener);
    paywallView.setObserverModeHandler(observerModeHandler);
    paywallView.showPaywall(viewConfiguration, products, paywallInsets, personalizedOfferResolver, tagResolver);
            
    return insets;
});

Returns:

Object	Description
`AdaptyPaywallView`	リクエストされたペイウォール画面を表すオブジェクト。

Warning

購入トランザクションにペイウォールを関連付けることを忘れないでください。これを行わないと、Adapty は購入元のペイウォールを特定できません。