トライアルトグルを使ったペイウォールの作成

トライアルトグルを使うと、ペイウォールを無料トライアルありのプロダクトと無料トライアルなしのプロダクトで切り替えられます。ただし、トグル自体はオン・オフのスイッチにすぎません。どのカードを表示するかのルールと、どのプロダクトを選択状態にするかのルールは、自分で設定します。

このレシピでは、これらのルールを設定し、トグル機能付きのペイウォールを完全に動作する状態で構築する方法を説明します。

始める前に

Important

トライアルをオプション(トライアルトグルを使用するために必要)にしたい場合は、初回オファーを作成しないでください。iOS では、初回オファーは対象となるすべてのユーザーに自動的に適用されます。オフにすることはできません。代わりにプロモーションオファーを使用してください。詳細はAdapty とオファーの連携方法をご覧ください。

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

  1. + > Paywall & Commerce > Products でプレセットを選択します。
  2. キャンバスまたは Layers パネルでカードを選択し、プロダクトを割り当てて、オファーのドロップダウンは No offer のままにしておきます。
  3. 販売するプランごとに同じ操作を繰り返します。トライアルなしで、1プランにつき1枚のカードを作成してください。
  4. すべてのカードを複製します。各コピーで、オファーのドロップダウンからトライアルオファーを選択します。

これで各プランには同じプロダクトを指す2枚のカードができます。1枚はオファーあり、もう1枚はオファーなしです。

キャンバス上の4つのプロダクトカード — 年間と月間、それぞれにトライアルあり・なし — 表示ルールを設定する前はすべて表示されている状態

2. トライアルトグルを追加する

  1. + > Paywall & Commerce > Trial Toggle をクリックします。

    The trial toggle added to the paywall screen and selected on the canvas
  2. トグルが正しいタイプの選択可能グループに属していることを確認します。キャンバスの空白部分をクリックして Screen settings を開きます。Selectable groups の下にある trial_toggle を開き、Group TypeToggle に設定して Save をクリックします。ダイアログには、トグルがオンかどうかを検出するために使用する変数 trial_toggle.isActive が表示されます。

グループタイプがトグルに設定され、その下に条件変数 trial_toggle.isActive が表示されている「グループを編集」ダイアログ
  1. トグルのラベルを編集します。

デフォルトではトグルをオフにしておいてください。トライアルトグルをあらかじめ選択状態にすると、ダークパターンとして App Store の審査で却下されるリスクがあります。詳しくはトグルを参照してください。

3. 各トグル状態に対応したカードを表示する

各カードの Design タブで、Visibility の下にある Conditional を選択し、条件を設定します:

カード条件
トライアルありtrial_toggle.isActive Equals True
トライアルなしtrial_toggle.isActive Equals False
The Yearly_notrial card selected with Visibility set to Conditional and the Show element if popover showing trial_toggle.isActive Equals False

4. トグルが変わったときに表示中のカードを選択する

カードはトグルに合わせて切り替わりますが、選択中のプロダクトは切り替わりません。非表示になったカードが選択されたままになり、Purchase アクションも引き続きそのカードを対象とするため、トライアルを有効にしたユーザーが意図しない課金を受ける可能性があります。

トグルに Conditional Action を追加して、タップするたびに表示中のカードへ選択をリセットするようにしましょう。

  1. Layers パネルで Trial toggle コンテナを選択します。
  2. Interactions タブを開き、On tap トリガーと Conditional Action を追加します。
ブロック設定内容
iftrial_toggle.isActive Equals True
thenSelect Product(トライアルありのカードを指定)
elseSelect Product(同じプロダクトのトライアルなしカードを指定)
トグルの On Tap トリガーに条件アクションを設定: trial_toggle.isActive Equals True の場合に一方のカードを選択し、else ブランチでもう一方のカードを選択する

5. ボタンラベルを更新する

トライアルがオンになったら、コールトゥアクションの表示が変わるようにします。

  1. ボタンのテキスト要素を選択します。

  2. Design タブの Content セクションで、Conditional を選択し、Edit conditions をクリックします。

  3. 各ブロックを次のように設定します:

    ブロック設定内容
    iftrial_toggle.isActive Equals True
    thenトライアル用ラベル(例:Start your free trial
    else通常ラベル(例:Purchase
The Edit conditional text dialog with trial_toggle.isActive Equals True showing Start your free trial, and Purchase in the else branch

条件付きテキストの詳細については、条件付きテキストを追加するを参照してください。