> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 離脱意図ウィジェットを作成する

> PBXを使用して、訪問者がサイトを離れようとしたときに表示されるポップアップウィジェットを生成し、パーソナライゼーションキャンペーンのWebsite exitトリガーに接続します。

離脱意図ウィジェットは、訪問者のカーソルがブラウザウィンドウの上部に向かって移動したとき、つまりページを離れようとしているタイミングで表示されます。離脱意図ウィジェットを使用して、最後の瞬間のオファーを提示したり、メールアドレスを収集したり、訪問者がサイトを離れる前に役立つコンテンツを表示したりすることができます。

## はじめる前に

PBXまたはPersonalizationビルダーを初めて使用される場合は、続ける前に[PBXでウィジェットを作成する](../pbx-widgets)および[パーソナライゼーションを設定して公開する](../../../web-personalization/set-up-and-launch-a-personalization)をご確認ください。

## ステップ 1: ウィジェットを作成する

テキストプロンプトで離脱意図ポップアップを説明し、PBXに生成させます。

1. **Studio** > **Widgets** > **New widget** に移動します。
2. **Using a prompt** を選択します。
3. ウィジェットの名前を入力し、**Create** をクリックします。
4. プロンプトフィールドにポップアップの内容を説明します。例:

   ```text theme={null}
   Create a centered modal popup for an exit intent offer.

   - Content: Headline, short description with a discount offer, email input field, CTA button, and a "No thanks" link
   - Style: Modern ecommerce design, rounded elements, dark CTA button, close button in the top-right corner
   - Behavior: Close when clicking "No thanks" or the close button
   ```

<Frame>
  <img src="https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-an-exit-intent-widget/exit-intent-pbx-prompt.png" alt="離脱意図ポップアップの説明が入力されたPBXのプロンプトフィールド" width="50%" />
</Frame>

5. 生成されたウィジェットを確認し、「CTAボタンを大きくしてください」や「ヘッドラインのフォントを変更してください」などのフォローアッププロンプトで調整します。
6. 結果に満足したら、ウィジェットを保存します。

<Frame>
  ![PBXのプレビューに表示された生成済み離脱意図ポップアップ](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-an-exit-intent-widget/exit-intent-pbx-result.png)
</Frame>

効果的なプロンプトの書き方については、[PBXでウィジェットを作成する](../pbx-widgets)をご覧ください。

<Note>
  PBXウィジェットはレガシーパーソナライゼーションには対応していません。新しいパーソナライゼーションビルダーへのアクセスが必要な場合は、カスタマーサクセスマネージャーにお問い合わせください。
</Note>

<Tip>
  ドラッグ&ドロップエディターでウィジェットを作成する場合は、ステップ 2 で **Using the editor** を選択してください。手順については[ウィジェットを作成する](./create-a-widget)をご覧ください。
</Tip>

## ステップ 2: パーソナライゼーションを作成する

ウィジェットを表示するパーソナライゼーションキャンペーンを作成します。

1. **Experiences** > **Personalization** に移動します。
2. **New personalization** をクリックします。

<Note>
  パーソナライゼーションのコンテンツにウィジェットを追加するステップはまだ利用できません。**Using widget** オプションが有効化され次第、この記事を更新します。
</Note>

## ステップ 3: Website exitトリガーを設定する

訪問者のカーソルがブラウザウィンドウを離れたときにパーソナライゼーションが有効になるよう設定します。

<Frame>
  ![Trigger Builderの画面。「Browsing behavior」の下に「Website exit」条件が選択されている状態が表示されている](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-an-exit-intent-widget/exit-intent-trigger-builder-website-exit.png)
</Frame>

1. **Targeting rules** タブをクリックし、**Triggers** セクションを展開します。
2. **When a specific trigger occurs** を選択します。
3. **Create a new trigger** をクリックするか、ドロップダウンから既存のWebsite exitトリガーを選択します。
4. Trigger Builderで次の操作を行います。
   1. トリガーの名前を入力します（例: "Website exit—all pages"）。
   2. プロジェクトを選択し、**Next** をクリックします。
   3. 条件パネルで、**Browsing behavior** の下にある **Website exit** を選択します。
   4. **Next** をクリックし、トリガーの概要を確認してから **Create trigger** をクリックします。
5. ドロップダウンから作成したトリガーを選択します。

ターゲットとなった訪問者のカーソルがブラウザウィンドウを離れると、パーソナライゼーションが有効になります。

## ステップ 4: 表示頻度を制限する

ポップアップが繰り返し表示されないよう、表示回数を制限します。

<Frame>
  <img src="https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-an-exit-intent-widget/exit-intent-display-settings.png" alt="「Display settings」パネルで訪問あたりの表示上限が1に設定されている状態が表示されている" width="50%" />
</Frame>

1. **Display settings** を展開します。
2. **Display limits** で、訪問あたりの表示上限を **1** に設定します。

これにより、訪問者はセッションごとに1回だけポップアップを確認できます。

## ステップ 5: 公開する

1. **Save** をクリックします。
2. **Simulate** をクリックして、ブラウザでパーソナライゼーションをプレビューします。
3. **Launch** をクリックして公開します。

## 次のステップ

* [PBXでウィジェットを作成する](../pbx-widgets): 高度なプロンプトテクニック、目標追跡、Googleスプレッドシートとの連携を詳しく確認します。
* [ウィジェットのA/Bテストを行う](../use-widgets-in-your-campaigns/ab-test-your-widgets): 最も効果的な離脱意図メッセージを見つけるために実験を実施します。
* [パーソナライゼーションを設定して公開する](../../../web-personalization/set-up-and-launch-a-personalization): 高度な表示設定、スケジュール設定、ロールバック条件を設定します。