ユーザーが閉じるボタンをタップしたときにオファーを表示する
ユーザーが閉じるボタンをタップすると、購入せずに離脱しようとしています。このレシピでは最初の閉じるボタンのタップを検知します。ペイウォールを閉じる代わりに、ラストチャンスオファーのオーバーレイを表示します。ユーザーがオファーを閉じると、閉じるボタンが通常どおり機能してフローが閉じます。
このロジックには、カスタムのBoolean変数が1つと、条件付きアクションが1つ必要です。
close_tappedは最初Falseです。- 最初にクローズをタップすると、オファーオーバーレイが表示され、
close_tappedがTrueに設定されます。 - それ以降のクローズタップでフローが閉じます。
始める前に
- 閉じるボタン付きのペイウォール画面を作成してください。例として、基本的なペイウォール画面の作成を参考にしてください。
- オーバーレイで宣伝するオファー付きのプロダクトを作成してください。
1. 変数を作成する
カスタム変数の詳細については、変数を参照してください。
- 左パネルの { } アイコンをクリックして Variables を開きます。
- Custom タブで + をクリックします。
- 変数名を
close_tappedに設定し、Value Type を Boolean にします。Initial Value は False のままにしておきます。 - Create variable をクリックします。
2. オファーオーバーレイを作成する
オーバーレイとは、デバイスの画面に固定され、ペイウォールの上に重なるコンテナです。最初は表示状態で作成してください。非表示の要素は編集できないため、コンテンツを配置した後のステップ4で非表示にします。
- + > Layout > Vertical Container をクリックします。
- コンテナを選択した状態で Design タブを開き、Position を Fixed に設定します。水平方向の配置を Left & Right、垂直方向の配置を Top に設定します。垂直方向の中央揃えオプションはないため、上部オフセット（例：
300）を入力してオーバーレイを画面中央付近に移動させます。 - Fill の下で背景を設定します（単色またはイメージ）。コンテナはデフォルトで透明なため、塗りつぶしを設定しないとオーバーレイの下にペイウォールが透けて見えます。
- オファーのコンテンツを追加します。Layers パネルでコンテナを選択した状態で、+ > Text > H2 をクリックします。割引価格を表示するには、Content フィールドに
offer_priceなどのオファー変数を挿入します。 - + > Products をクリックしてレイアウトのプリセットを選択し、オーバーレイにドラッグします。キャンバス上のプロダクトカードを選択し、Design タブでプロダクトとオファーを選択します。
- + > Buttons をクリックしてボタンのプリセットを選択し、オーバーレイにドラッグします。Interactions タブで Add trigger > On tap > Add action をクリックし、Action を Purchase、Product をオファープロダクトに設定します。
3. オーバーレイに閉じるボタンを追加する
オーバーレイには専用の閉じるボタンが必要です。このボタンのアクションはフローを閉じるのではなく、オーバーレイを非表示にするものでなければなりません。
- オーバーレイを選択した状態で、+ > Buttons > Close flow をクリックします。
- ボタンを選択した状態で、Interactions タブを開きます。プリセットにはあらかじめ Close Flow アクションが設定されています。そのアクションをクリックし、タイプを Hide element に変更します。ターゲットにオーバーレイコンテナを設定してください。
オーバーレイの閉じるボタンに事前設定された Close Flow アクションをそのまま残さないでください。フロー全体が閉じられてしまいます。
4. オーバーレイを非表示にする
オーバーレイは、最初の閉じるタップが行われるまで非表示のままにする必要があります。
Layers パネルでオーバーレイコンテナを選択し、その状態を Hide に設定します。オーバーレイはレイヤーツリーに残りますが、キャンバス上には表示されなくなります。
5. 閉じるボタンを設定する
閉じるボタンのデフォルトアクションを、close_tapped で分岐する条件付きアクションに置き換えます。
条件付きアクションの詳細については、アクション — 条件付きアクション を参照してください。
- ペイウォールの閉じるボタン（オーバーレイの閉じるボタンではなく、画面上のもの）を選択します。
- Interactions タブを開き、あらかじめ設定されている Close Flow アクションをクリックして、タイプを Conditional Action に変更します。
- if ブロックで Add condition をクリックし、
close_tappedEquals False と設定します。 - then ブロックに2つのアクションを追加します：
- Set Variable：
close_tappedを True に設定する。
- Set Variable：
-
Show element: ターゲットをオファーオーバーレイに設定します。
-
else ブロックに Close Flow アクションを追加します。
これで、最初の閉じるタップでオファーが表示されます。ユーザーがそれを閉じた後、もう一度閉じるをタップすると else ブランチにマッチし、フローが終了します。
次のステップ
- フローを保存して公開する。
- プレースメントにフローを追加することで、ユーザーへの表示を開始します。