---
title: "ユーザーが閉じるボタンをタップしたときにオファーを表示する"
description: "最初の閉じるボタンのタップを検知して、ユーザーがペイウォールを離れる前にラストチャンスオファーを表示します。"
---

ユーザーが閉じるボタンをタップすると、購入せずに離脱しようとしています。このレシピでは最初の閉じるボタンのタップを検知します。ペイウォールを閉じる代わりに、ラストチャンスオファーのオーバーレイを表示します。ユーザーがオファーを閉じると、閉じるボタンが通常どおり機能してフローが閉じます。

このロジックには、カスタムのBoolean変数が1つと、条件付きアクションが1つ必要です。
- `close_tapped` は最初 `False` です。
- 最初にクローズをタップすると、オファーオーバーレイが表示され、`close_tapped` が `True` に設定されます。
- それ以降のクローズタップでフローが閉じます。
## 始める前に \{#before-you-start\}

- 閉じるボタン付きのペイウォール画面を作成してください。例として、[基本的なペイウォール画面の作成](basic-paywall-screen)を参考にしてください。
- オーバーレイで宣伝する[オファー](offers)付きの[プロダクトを作成](create-product)してください。
## 1. 変数を作成する \{#1-create-the-variable\}

カスタム変数の詳細については、[変数](onboarding-variables#custom-variables)を参照してください。

1. 左パネルの **{ }** アイコンをクリックして **Variables** を開きます。
2. **Custom** タブで **+** をクリックします。
3. 変数名を `close_tapped` に設定し、**Value Type** を **Boolean** にします。**Initial Value** は **False** のままにしておきます。
4. **Create variable** をクリックします。

## 2. オファーオーバーレイを作成する \{#2-build-the-offer-overlay\}

オーバーレイとは、デバイスの画面に固定され、ペイウォールの上に重なるコンテナです。最初は表示状態で作成してください。非表示の要素は編集できないため、コンテンツを配置した後のステップ4で非表示にします。
1. **+** > **Layout** > **Vertical Container** をクリックします。
2. コンテナを選択した状態で **Design** タブを開き、**Position** を **Fixed** に設定します。水平方向の配置を **Left & Right**、垂直方向の配置を **Top** に設定します。垂直方向の中央揃えオプションはないため、上部オフセット（例：`300`）を入力してオーバーレイを画面中央付近に移動させます。
3. **Fill** の下で背景を設定します（単色またはイメージ）。コンテナはデフォルトで透明なため、塗りつぶしを設定しないとオーバーレイの下にペイウォールが透けて見えます。
4. オファーのコンテンツを追加します。**Layers** パネルでコンテナを選択した状態で、**+** > **Text** > **H2** をクリックします。割引価格を表示するには、**Content** フィールドに `offer_price` などの[オファー変数](onboarding-variables#product-variables)を挿入します。
5. **+** > **Products** をクリックしてレイアウトのプリセットを選択し、オーバーレイにドラッグします。キャンバス上のプロダクトカードを選択し、**Design** タブでプロダクトとオファーを選択します。
6. **+** > **Buttons** をクリックしてボタンのプリセットを選択し、オーバーレイにドラッグします。**Interactions** タブで **Add trigger** > **On tap** > **Add action** をクリックし、**Action** を **Purchase**、**Product** をオファープロダクトに設定します。

## 3. オーバーレイに閉じるボタンを追加する \{#3-add-the-dismiss-button-to-the-overlay\}

オーバーレイには専用の閉じるボタンが必要です。このボタンのアクションはフローを閉じるのではなく、オーバーレイを非表示にするものでなければなりません。

1. オーバーレイを選択した状態で、**+** > **Buttons** > **Close flow** をクリックします。
2. ボタンを選択した状態で、**Interactions** タブを開きます。プリセットにはあらかじめ **Close Flow** アクションが設定されています。そのアクションをクリックし、タイプを **Hide element** に変更します。ターゲットにオーバーレイコンテナを設定してください。
:::important
オーバーレイの閉じるボタンに事前設定された **Close Flow** アクションをそのまま残さないでください。フロー全体が閉じられてしまいます。
:::

## 4. オーバーレイを非表示にする \{#hide-the-overlay\}

オーバーレイは、最初の閉じるタップが行われるまで非表示のままにする必要があります。

**Layers** パネルでオーバーレイコンテナを選択し、その状態を **Hide** Hide に設定します。オーバーレイはレイヤーツリーに残りますが、キャンバス上には表示されなくなります。

## 5. 閉じるボタンを設定する \{#5-set-up-the-close-button\}

閉じるボタンのデフォルトアクションを、`close_tapped` で分岐する条件付きアクションに置き換えます。

条件付きアクションの詳細については、[アクション — 条件付きアクション](onboarding-actions#conditional-actions) を参照してください。
1. ペイウォールの閉じるボタン（オーバーレイの閉じるボタンではなく、画面上のもの）を選択します。
2. **Interactions** タブを開き、あらかじめ設定されている **Close Flow** アクションをクリックして、タイプを **Conditional Action** に変更します。
3. **if** ブロックで **Add condition** をクリックし、`close_tapped` **Equals** **False** と設定します。
4. **then** ブロックに2つのアクションを追加します：
    - **Set Variable**：`close_tapped` を **True** に設定する。
- **Show element**: ターゲットをオファーオーバーレイに設定します。

      
5. **else** ブロックに **Close Flow** アクションを追加します。

   
これで、最初の閉じるタップでオファーが表示されます。ユーザーがそれを閉じた後、もう一度閉じるをタップすると **else** ブランチにマッチし、フローが終了します。
## 次のステップ \{#next-steps\}

- [フローを保存して公開する](builder-save-publish)。
- [プレースメントにフローを追加する](create-placement)ことで、ユーザーへの表示を開始します。