購入を設定する

フローには利用可能なプロダクトを表示し、アプリ内課金をトリガーすることができます:

  1. ストアのプロダクトを Adapty ダッシュボードに追加します。既存のストアプロダクトを連携するか、Adapty で新しいプロダクトを作成してストアに送信するかのどちらかを行います。
  2. ダッシュボードからプロダクトを選択し、フロースクリーンに追加します。そのスクリーン上のカード、変数、アクションからプロダクトを利用できるようになります。
  3. (任意)複数の購入オプションを提示するために、プロダクトカードのグループを設定します。
  4. ボタンに Purchase アクションを追加して設定します。アクションのターゲットには、特定のプロダクトまたはユーザーが選択したプロダクトを指定できます。
  5. 後から Products パネルを使って、フロー全体のプロダクトを追加・交換・削除できます。フローを公開すると、アプリのアップデートなしにユーザーへ変更が反映されます。
1文で価格の見せ方を変える。

AI エディターに、年間プランを1日あたりのコストに換算したり、旧価格に取り消し線を引いたり、お得なプランを目立たせたりするよう依頼できます。変更されるのはこの画面のプロダクトカードのみで、カタログや実際の価格は変わりません。

Explore the AI Editor

スクリーンにプロダクトを追加する

各スクリーンには専用のプロダクトリストがあります。カード、変数、アクションは、そのリストにあるプロダクトしか使用できません。Products パネルには、フロー内のすべてのスクリーンのリストが表示されます。

プロダクトは Products パネルから追加するか、要素を設定する際に選択することができます。どちらの方法でも、プロダクトはそのスクリーンのリストに追加されます。

スクリーンのProductsパネルでプロダクトを追加する

このパネルでは、スクリーンのリストにプロダクトを追加できます。追加したプロダクトは、プロダクトカード、テキスト変数、アクションなど、スクリーン上の任意の要素から利用できます。たとえばテキスト変数を使えば、カードのないプロダクトの価格を表示することも可能です。

スクリーンにプロダクトを追加するには:

  1. 左サイドバーの Products パネルを開き、+ をクリックします。
  2. Screen には現在のスクリーンが表示されます。別のスクリーンにプロダクトを追加するには、ここでターゲットを選択します。
  3. Product でダッシュボードからプロダクトを選択します。
  4. (任意)Offer でプロダクトに適用するオファーを選択します。フローへのオファーの追加を参照してください。
  5. Add product をクリックします。
Add product to screen dialog with the Product dropdown open, listing Monthly and Yearly with their access level and price

Products パネルには、追加したプロダクトがスクリーンごとにグループ化されて表示されます。ここで選んだオファーは、そのプロダクトを使用するすべてのカードで事前選択された状態になります。プロダクトを要素に割り当てるか、アクションで使用するまで、フロー内の内容は変わりません。

要素の設定中にプロダクトを追加する

要素でプロダクトを選択すると、ビルダーはそれを画面のリストに追加します。これは次のような場合に発生します:

  • プロダクトカードにプロダクトを割り当てる。
  • テキスト要素にプロダクト変数を挿入する。
  • Purchase アクションの Product を設定する。

各ドロップダウンには、この画面にすでに追加されたプロダクトが表示され、続いてカタログの残りのプロダクトが表示されます。異なるオファーで選択されたプロダクトは独自のエントリとして登録されます。パネルとドロップダウンには、プロダクト/オファーのペアごとに1つのエントリが表示されます。

プロダクトカードの設定を続けるには、プロダクトカードを追加すると購入をトリガーするを参照してください。

プロダクトカードを追加する

ユーザーに複数のプロダクトを選択肢として提示するには、Products 要素を追加します。この要素は、あらかじめ定められたレイアウトで3枚のプロダクトカードのセットとして提供されます。カードはプロダクトグループを形成し、ユーザーが1つ選択すると、Purchase アクションで選択したプロダクトを購入できるようになります。

このセットが、プロダクトカードやプロダクトグループを利用する唯一の方法です。カードの枚数を増やしたり減らしたりするには、セットを追加した後にカードを複製または削除してください。

プロダクトグループを追加する

  1. Add element パネルを開きます。

  2. Products カテゴリを選択します。

  3. レイアウトのプリセットを選択します: Vertical List、Horizontal List、Feature Carousel、Feature Cards、または Banner List。

    キャンバスにProductsエレメントを追加する

プロダクトカードの設定

グループ内の各カードについて:

  1. カードを選択します。Design タブの Product セクションで、プロダクトを割り当てます。このスクリーンにすでに追加されているプロダクトは Added セクションに表示され、その後にカタログの残りのプロダクトが続きます。
  2. アクティブなオファーを確認します。プロダクトにあらかじめオファーを紐付けていた場合、そのオファーが自動的に表示されます。手動で別のオファーを選択することもできますが、その場合は Products パネルにプロダクトのコピーが表示されます。
  3. スクリーンが開いたときにこのカードをデフォルトで選択状態にするには、Set as default を選択します。
Product dropdown of a product card open, with the screen's products under Added and the rest of the catalog under Other products
  1. (Optional) どのプランが選択されているかをユーザーに示すには、カードのSelected statesをスタイリングしてください。
Important

プロダクトのないカードは公開をブロックします。削除したプロダクトグループを参照したままのアクションや変数も同様です。グループを置き換えたら、すべてのアクションと変数を新しいグループに向け直してください。

カードのセットアップを4つのオプション機能で完了させます。

  • 動的価格: プレースホルダーの価格を、プロダクトの価格変数に置き換えます。カードにはユーザーの通貨でストアの価格が表示されます。
  • オファー条件: オファーの詳細を明示するには、カードのテキストにオファー変数(offer_price、offer_billing_period、offer_full_duration)を使用します。
  • バッジ: 特定のプランを強調するバッジを配置します。
  • アンカー価格: カード内の旧価格要素は、設定した係数を掛けた実際の価格を取り消し線付きで表示します。これにより、実際の価格が割引として見えます。通貨とフォーマットは常に実際の価格と一致し、数値は価格変更に合わせて自動更新されます。

購入をトリガーする

Purchase アクションは、プロダクトのストア購入を開始します。フロー内の任意の要素に設定できますが、ボタンやプロダクトカードに設定するのが最も一般的です。

購入ボタンを追加する

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

  1. Add element パネルを開きます。
  2. Button カテゴリからプリセットを選択します。
  3. ボタンを選択した状態で、右パネルの Interactions タブを開きます。
  4. Add trigger > On tap をクリックし、Add action をクリックします。
  5. Action を Purchase に設定し、Product を以下のいずれかに設定します:
    • products.selectedProduct:画面上のProductsエレメントでユーザーが選択したプロダクトを購入します。
    • 特定のプロダクト:画面上の選択にかかわらず、常にそのプロダクトを購入します。
「Interactions」タブの購入アクションで「Product」ドロップダウンが開いており、選択中のプロダクト変数、「Added」配下の画面のプロダクト、「Other products」配下のその他のプロダクトが一覧表示されています

プロダクトカードから購入をトリガーする

プロダクトカードから直接購入を開始できるため、別途ボタンを用意する必要がありません。各カードに Purchase アクションを追加してください。

ボタンに価格を表示する

選択中のプロダクトの価格をボタンのラベルに挿入するには、変数を使います:

  1. ボタンを選択した状態で、右パネルの Design タブを開きます。
  2. Content フィールドで、価格を表示したい位置にカーソルを置きます。
  3. 変数アイコンをクリックして products.selectedProduct を選択し、続けて prod_price 属性を選択します。完全な変数は products.selectedProduct.prod_price になります。
  4. 変数の前後に固定テキストを追加します。例: Subscribe for {prod_price}。

ユーザーが別のプロダクトを選択するたびに、ラベルが自動的に更新されます。

選択中のプロダクトの価格変数をラベルに使用した購入ボタン

購入の復元

既存のサブスクライバーは、以前の購入を復元する方法が必要です。Restore purchases アクションのボタンを追加してください:

  • Button カテゴリの Links プリセットを使用します。これには、Restore(事前設定済み)、Terms of use、Privacy policy の3つのテキストボタンが横並びで含まれています。
    Adding a restore button to the canvas
  • 別のボタンに Restore purchases アクションを追加します。
    1. ボタンを選択して Interactions タブを開きます。
    2. Add trigger > On tap をクリックし、Add action をクリックします。
    3. Action ドロップダウンから Restore purchases を選択します。
インタラクションタブにある購入を復元するアクション

復元ボタンがなくてもパブリッシュは可能ですが、ストア審査で却下される可能性があります。flow-audit スキルを使って、復元機能がないペイウォールを確認してください。

選択したプロダクトに応じてスクリーンのコンテンツを変更する

スクリーンにプロダクトカードがある場合、ユーザーが選択したカードに応じて他の要素を表示・非表示にできます。

条件付き表示を設定するには:

  1. Products 要素でプロダクトカードを選択します。

  2. 右パネルの Interactions タブを開き、Add trigger をクリックします。

    プロダクトカードへのトリガーの追加
  3. On tap を選択し、Add action をクリックします。

  4. Action ドロップダウンから Show または Hide を選択します。

  5. そのプロダクトが選択されたときに表示または非表示にする要素を選択します。

    Show/Hide action in the Interactions tab

他の要素から選択中のプロダクトを変更する

通常、ユーザーはカードをタップして選択中のプロダクトを変更します。ただし、トライアルトグルなどの他の要素も、Select product アクションを使って選択を変更できます。

アクションを設定するには:

  1. 選択を変更する要素(ボタン、トグル、その他の要素)を選択します。対象のカードは同じ画面上にある必要があります。
  2. 右パネルの Interactions タブを開き、Add trigger をクリックします。
  3. トリガーを選択し、Add action をクリックします。
  4. Action ドロップダウンから Select product を選択します。
  5. Product に、アクションで選択するプロダクトカードを設定します。
Select product action in the Edit action window with the Product picker listing product cards

フローのプロダクトを管理する

Products パネルには、フロー内のすべてのプロダクトがスクリーンごとにグループ化されて表示されます。

  • プロダクト名の横の数字は、そのスクリーン上でのプロダクトの参照数を示します。カード、テキスト要素内のプロダクト変数、アクションのそれぞれが対象です。
  • 右側の価格はプロダクトの基本価格です。オファーが設定されている場合は、割引あり・割引なし両方の価格が表示されます。
  • デフォルトのプロダクトは別のセクションに一覧表示されます。
Products panel listing the products of two screens with usage counts, prices, offers, and the Default and Other sections

+ をクリックしてエントリを追加し、プロダクトパネルでプロダクトを追加するの手順に従ってください。

プロダクトのアクション

プロダクトエントリのコンテキストメニューを開いて管理します:

Context menu of a product entry in the Products panel with the Replace in 2 places submenu open, listing the catalog products with access levels and prices
  • Set as default: このプロダクトのカードを画面を開いたときにあらかじめ選択状態にします。カード上の Set as default チェックボックスと同じ機能です。プロダクトカードがこの画面にちょうど1枚だけあるプロダクトにのみ使用できます。
  • Replace in N places: このプロダクトを使用している画面上のすべてのカード、テキスト要素、アクションで置き換えます。Offer フィールドはリセットされます。他の画面でも同じプロダクトとオファーが使用されている場合、確認トーストがその画面にも変更を反映するか提案します。
  • Offer: この画面上でそのプロダクトを使用しているすべての場所のオファーを変更します。他の画面にも同じプロダクトが存在する場合、そちらにも変更を適用できます。ユーザーごとに異なるオファータイプで画面をプレビューするには、同じサブメニューの Preview as を選択してください。
  • Remove: プロダクトを画面のリストから削除します。そのプロダクトを使用していたカードと Purchase アクションのプロダクト設定は即座に失われます。公開前に別のプロダクトに置き換えてください。テキスト変数と条件は参照を保持し、警告アイコンが表示されます。プロダクトを追加し直すか、参照を置き換えるか、テキストを削除するまで、ツールチップには This product is off this screen と表示されます。
  • Missing: ダッシュボードで削除されたプロダクトまたはオファーはエントリが残り、Missing と表示されて使用箇所のカウントが表示されます。利用可能な操作は Replace in N places と Remove のみとなり、残っているすべての使用箇所が公開をブロックします。

プロダクトのトラブルシューティング

プロダクトとオファーに関して、以下の問題が公開をブロックします:

  • プロダクトカードまたは購入アクションにプロダクトが紐付けられていない場合。プロダクトを紐付けるか、カード/アクションを削除してください。
  • プロダクトまたはオファーがダッシュボードに存在しない場合。フローにプロダクトを追加した後、Adapty アカウントから削除すると発生します。Products パネルでMissingプロダクトのエントリを見つけ、既存のプロダクトですべての参照を置換してください。
  • オファー変数が、オファーのないプロダクトで使用されている場合。Products パネルでプロダクトにオファーを設定するか、変数を削除してください。
  • テキスト変数または条件が、Products パネルで削除したプロダクトを参照している場合。+ でプロダクトを追加し直すか、参照を変更してください。

フローに問題がある状態でも保存は可能です。公開が成功するまで繰り返し修正してください。