フローbuilder内のボタン

ボタンはフローbuilder内でユーザーのタップに反応するインタラクティブな要素です。次の用途に使用できます:

  • プロダクトに紐付いてトランザクションを自動処理する購入用CTA
  • ナビゲーション — ユーザーを画面間で移動させる(次へ、戻る、閉じる、スキップ)
  • ユーティリティリンク — 購入の復元、利用規約、プライバシーポリシー

このセクションでは、Adapty SDK バージョン4.0以上で動作する新しいフローbuilderについて説明します。

ボタンを追加する

ボタンを追加するには:

  1. + をクリックして Button を選択します。
  2. ボタンの種類を選択します。
button-type.webp
  1. 購入ボタン、リンク、閉じるボタンにはあらかじめアクションが設定されています。リンクの場合はユーザーの遷移先URLを設定してください。その他のボタンタイプの場合は、Interactions パネルに移動し、Button triggers セクションでボタンが実行するアクションを設定します。
button-action.webp
  1. Design パネルでボタンのデザインを設定します。

ボタンの種類

購入ボタン

購入ボタンを機能させるには、プロダクトを画面にバインドし、Products 要素を追加してください。ガイドをご覧ください。

購入ボタンは、ユーザーが画面上で選択しているプロダクトのアプリ内課金を開始します。SDKがトランザクションを自動的に処理するため、アプリのコードで購入処理を実装する必要はありません。

購入ボタンを追加するには:

  1. + をクリックして Button を選択し、ボタンのプリセットを選びます。
  2. ボタンを選択した状態で、右パネルの Interactions タブを開きます。
  3. Add trigger > On tap をクリックし、Add action をクリックします。
  4. ActionPurchaseProductproducts.selectedProduct に設定します。products.selectedProduct 変数は常に画面で現在選択されているプロダクトに解決されます。

購入ボタンにアニメーションを付けて注目を集めることができます。ペイウォールビルダーでは現在 Pulse アニメーションタイプに対応しています。

アニメーションのスタイルは Design パネルで設定してください。

purchase-button.webp

Terms of Use ボタンと Privacy Policy ボタンには Open URL アクションが組み込まれています。そこに遷移先URLを設定してください。Open URL が空の場合やインラインリンクが空の場合、プレビューおよび公開がブロックされます。

一部のストア要件に準拠するため、以下のリンクを追加できます:

  • 利用規約
  • プライバシーポリシー
  • 購入の復元

リンクを追加するには:

  1. + をクリックして Button > Links を選択します。これにより、購入の復元またはURLを開くといったあらかじめ定義されたアクションを持つインラインボタンの行が追加されます。含まれているボタンがすべて必要でない場合は、レイヤーパネルで不要なものを削除してください。
add-links.webp
  1. 次に、ボタンのアクションを設定します:

    • Restore purchases ボタンはすでに購入の復元を処理します。
    • 残りの各リンクについて:
      1. ボタンをクリックして選択し、右側の Interactions タブに切り替えます。
      2. フィールドにURLを貼り付けます。
      3. デフォルトでは、シームレスなユーザー体験のためにURLはアプリ内ブラウザで開きます。外部ブラウザでユーザーを遷移させたい場合は、Open in external browser チェックボックスを選択してください。
pb-links.webp

フローを閉じる

Close ボタンはフローを自動的に閉じます。

閉じるボタンを追加するには、+ をクリックして Button > Close flow を選択します。

close-flow.webp

Absolute ポジションを使用すると、閉じるボタンを画面の角に配置できます。

アクションを使用して、他のボタンもフローを閉じるように設定できます。

カスタムボタン

追加できるすべてのボタンは、タップ時に任意のアクションを実行するように設定できます: