> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/testing/editor/6n2dhi68d7.md).

# ウィジェットのトリガー条件について

Webサイトにアクセスしたときに、ウィジェットに気づきましたか？ もしそうなら、ウェブページに表示される頻度や、ウィジェットを閉じた後に表示されないことにお気づきでしょうか？

通常、このようなウィジェットは、Webサイト上で訪問者の注意を引き、何も得ずにWebサイトを去らないようにするために使用されます。**例えば、**&#x6700;初の注文で15%の追加割引と送料無料というバナーウィジェットを表示します。

VWOのウィジェットについては、「[VWOでウィジェットを操作する](https://help.vwo.com/hc/en-us/articles/360039014073)」を参照してください。

より多くの訪問者やコンバージョンを得るために、特定の条件に基づいていくつかのポップアップバナーの形で情報を表示したいと思うことがよくあります。いくつかの例を見て、より深いインサイトを得ましょう。

**シナリオ1：**&#x65;コマースプラットフォームを運営しており、訪問者がフォーマルパンツをカートに入れた場合、「これと一緒にフォーマルベルトを購入すると、25％割引になります」というプロモーション用のポップアップを表示したいとします。ポップアップは、訪問者が特定のアクションを起こした後に起動されるもので、常に表示されるわけではありません。そのため、このポップアップの意義は条件付きとなります。

**シナリオ2：**&#x65E5;用雑貨のアプリを持っており、新型コロナウイルスに準拠し、Webサイトで15秒以上滞在したすべての訪問者にバナーで「数量限定の商品を購入できます。また、需要が多いため、通常よりも配送に時間がかかることがあります」。と告知したいとします。 重要な情報なので、初回にその情報のバナーを無視した場合でも、1セッションに1回、すべてのゲストに表示する方が適切である。同時に、無視されるとユーザーエクスペリエンスが悪くなるので、セッション中に何度も表示することは避けたいところです。

**シナリオ3：**&#x65C5;行サイトを運営していて、Webサイトにイベントのカレンダーを掲載しています。訪問者の場所によって、1つ以上のアクティビティを表示するよう選択することができます。例えば、ドバイ行きのチケットが購入された場合、砂漠サファリのイベントに申し込むことができるフォームのポップアップを表示したいと思います。また、目的地におすすめするイベントがない場合は、このポップアップを表示しないように設定することができます。

適切なタイミングで情報を表示することが肝心ではないでしょうか？ こうすることで、Webサイトに表示する各情報の関連性が高まり、コンバージョンが上昇するのです。また、情報の表示頻度をコントロールすることも重要です。もし、上記のどちらかのケースで、何かがやりすぎたとしたら？ いかがですか？

### **ウィジェットを起動するタイミングがわからない場合はどうすればいいのでしょうか？** <a href="#id-7bbaecj97jy4" id="id-7bbaecj97jy4"></a>

ウィジェットを起動するタイミングが分からない場合、**例えば、**&#x3059;ぐにウィジェットを表示するか、一時停止した後に表示するか、または、Webサイトを訪れた訪問者の注意を引くようなユーザー活動の後に表示するかなど、複数のバリエーションを作成して、それぞれ異なるタイミングでウィジェットを表示させることをお勧めします。**例えば、**&#x65;ラーニングサイトで、2コース以上購入すると10％割引になるキャンペーンを行う場合を考えてみましょう。ここでは、コースがカートに追加されたとき、チェックアウトボタンが押されたとき、ユーザーがあなたのWebサイトに30秒以上滞在したときにプロモーションバナーが表示される、3つのバリエーションを用意することができます。

十分な時間をかけてテストを行った後、他より優れているバリエーションを探します。こうすることで、どのトリガー条件が自分のWebサイトに最適なのかを判断することができます。

### **VWOにおけるウィジェットのトリガー条件について** <a href="#zesh1k57afbn" id="zesh1k57afbn"></a>

VWOは、ウィジェットの表示タイミング、表示頻度、削除のタイミングをコントロールできる**トリガー条件**を内蔵しています。![image5.png](/files/fnmbA1eh2Koy1H5DQvml)

これらのオプションを活用することで、訪問者をより効果的に惹きつけ、Webサイトをより機能的にすることができます。VWOビジュアルエディターを使用してウィジェットを追加する際に、以下の設定を行うことができます。

* **ウィジェットはいつ表示されますか？**

  **ウィジェットを表示するタイミング**を設定することで、ウェブページ上のウィジェットを表示するタイミングを選択することができます。ここでは、以下の選択肢があります。

| **状態**              | **商品説明**                                                                                                                                                                                                                                                                                                                                    |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **常に**              | <p>このオプションは、キャンペーン実行時にウィジェットを表示させることができます。</p><p><img src="/files/HXkLbciOtKFMbAtaTRuW" alt="image12.png" data-size="original"></p>                                                                                                                                                                                                         |
| **遅延後**             | <p>このオプションは、一定時間が経過したときにウィジェットを表示させることができます。入力ボックスで遅延時間を秒単位で指定することができます。</p><p><img src="/files/gP43Tqbe6lyZKovoPtyb" alt="image3.png" data-size="original"></p><p><strong>注：</strong>1〜999の値を入力してください（数字のみ、小数点以下は入力しないでください）。</p>                                                                                                          |
| **訪問者がページをスクロールする** | <p>このオプションは、ページが指定された割合でスクロールされた後にウィジェットを表示することができます。入力ボックスでパーセンテージを指定することができます。</p><p><img src="/files/0h7CyspzrHQk7k4SGTTQ" alt="image8.png" data-size="original"></p><p><strong>注：</strong>1〜99の値を入力してください（数字のみ、小数点以下は入力しないでください）。</p>                                                                                                   |
| **訪問者が要素をクリックします**  | <p>このオプションにより、要素がクリックされたときにウィジェットを表示することができます。入力ボックスでCSSセレクタのパスを指定することができます。これは、要素のクリック機能に追加して行われるため、既存のボタンをクリックする機能には影響ありません。</p><p><img src="/files/7iuKKGuHgWPXNNJKdxix" alt="whenIsWidgetShown.png" data-size="original"></p><p><strong>注：</strong>ウィジェットは同じページに表示されます。クリックによって新しいページに移動した場合、その新しいページがキャンペーンの一部であってもウィジェットは表示されません。</p> |
| **カスタム条件**          | <p>このオプションでは、ウィジェットを表示する際のカスタムクライテリアを定義することができます。<strong>カスタムJSコードの追加</strong>オプションをクリックすると、条件をコード行として指定することができます。</p><p><img src="/files/28plTLNtw7ViTYy1NxfA" alt="image10.png" data-size="original"></p>                                                                                                                                 |

* **ウィジェットの表示頻度は？**

  **ウィジェットの表示頻度を設定する**ことで、ウェブページ上のウィジェットの表示頻度を選択することができます。ここでは以下のオプションがあります。

| **状態**         | **商品説明**                                                                                                                                                                                                                       |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **常に**         | <p>このオプションは、キャンペーンが実行されているページに訪問者が来るたびにウィジェットを表示することができます。</p><p><img src="/files/b4zYkqZGBo9EKcuCxStB" alt="image13.png" data-size="original"></p>                                                                            |
| **訪問者1人につき1回** | <p>このオプションは、訪問者の滞在期間中に一度だけウィジェットを表示させることができます。</p><p><img src="/files/eAyWmZaXFo6eFfJLEyft" alt="image9.png" data-size="original"></p>                                                                                         |
| **回数**         | <p>このオプションは、訪問者に対して指定した回数だけウィジェットを表示させることができます。入力ボックスで数値を指定することができます。</p><p><img src="/files/iI90b90ScxOM8F6lb1Y8" alt="image4.png" data-size="original"></p><p><strong>注：</strong>1〜99の値を入力してください（数字のみ、小数点以下は入力しないでください）。</p> |

* **ウィジェットはいつ破棄されますか？**

  ウィジェットが破棄されると、訪問者に二度と表示されなくなることを意味します。VWOでは、ウィジェットをいつ破棄するか、また破棄したときにどうするかを指定することができます。**ウィジェットを破棄する時**の設定を使うことで、自分に合ったものを選ぶことができます。

  **注：**&#x3053;れらのオプションは、選択したウィジェットによって異なります。**例えば、「訪問者がフォームを送信した場合」**&#x306E;オプションは、ソーシャルシェアウィジェットには適用されません。

| **状態**                            | **商品説明**                                                                                                                                                                                                     |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **決して**                           | <p>このオプションにより、ウィジェットが決して破棄されないようにすることができます。つまり、訪問者が十字ボタンをクリックしてウィジェットを破棄しても、次の訪問時に再び表示されるようにすることができます。</p><p><img src="/files/j5II9xWVX6eU1OLPZU18" alt="image1.png" data-size="original"></p>               |
| **訪問者が十字ボタンをクリックした場合**            | <p>このオプションは、十字ボタンのクリックでウィジェットを永久に破棄します。</p><p><img src="/files/ZyC28lBAJ1LEyuG1Kqyo" alt="image2.png" data-size="original"></p>                                                                              |
| **お客様がフォームを送信された場合**              | <p>このオプションは、フォーム送信の成功をイベント化し、ウィジェットを最終的に表示します。</p><p><img src="/files/tMn3Ah0j7nV0j64eN0fS" alt="image7.png" data-size="original"></p>                                                                       |
| **訪問者が十字ボタンをクリックしたり、フォームを送信した場合** | <p>このオプションは、上記の2つのオプションでorの条件を作成します。</p><p><img src="/files/MSgOeAlrHn48Iy1Z1shB" alt="image6.png" data-size="original"></p>                                                                                 |
| **カスタム条件**                        | <p>このオプションでは、ウィジェットを破棄するためのカスタムクライテリアを定義することができます。<strong>カスタムJSコードの追加</strong>オプションをクリックすると、条件をコード行として指定することができます。</p><p><img src="/files/RBNvjfOMKC68VANf03Br" alt="image11.png" data-size="original"></p> |

### **あらかじめ設定されているトリガー条件が、お客様のご要望にそぐわない場合はどうすればよいのでしょうか？** <a href="#id-5eyzs3gs21hb" id="id-5eyzs3gs21hb"></a>

VWOにはあらかじめいくつかのトリガー条件が定義されていますが、自分で定義することも可能です。

ウィジェットの定義済みトリガー条件が要件を満たさない場合、**カスタム条件**オプションを使用して条件を定義します。

カスタムトリガー条件を定義するには、ウィジェットの表示方法と表示タイミングを指定するコードスニペットを記述する必要があります。**例えば、**&#x30E6;ーザーが購読ボタンをクリックしたときだけウィジェットを表示させたい場合や、訪問者がウィジェットの十字ボタンを2回クリックしたときに、ウィジェットを永久的に破棄する必要があります。

ここでは、ウィジェットトリガーの設定方法について説明します。

### **VWOでウィジェットトリガーの条件を設定する** <a href="#xype3mwt8xfo" id="xype3mwt8xfo"></a>

VWOでウィジェットのトリガー条件を設定するには、以下を実行します。

**手順**

1. お客様のVWOアカウントにログインします。
2. \[**テスト**]→\[**A/Bテスト**]に進みます。
3. \[**テストを作成**]をクリックして、新しいA/Bテストキャンペーンを作成します。
4. \[**既存の仮設から選択する**]プルダウンから、仮設を選択します。
5. \[**テスト対象のページのURLを入力する**]欄に、フォームが存在するURLを入力します。
6. \[**次へ**]をクリックします。\
   VWOエディターにテストページが表示されます。
7. ウィジェットを追加するには、\[**ライブラリ**] > \[**VWOギャラリ**] > \[**ウィジェット**]で、ページに追加したいウィジェットを選択します。
8. トリガーを指定するには、\[**トリガー条件**]セクションまでスクロールし、使用ケースに関連するものを選択します。カスタムトリガーを追加したい場合は、\[**カスタム条件**]オプションを使用します。

   **注：**\[**カスタム条件**]オプションを選択すると、ユーザーが実際の条件に例を微調整するのに役立ついくつかのコメントを含むコードボックスが開きます。そのためには、開発チームの協力が必要かもしれません。

**事後要件**

キャンペーンライブをする前に、[ライブプレビュー](https://help.vwo.com/hc/en-us/articles/360021310593)を使用してウィジェットのトリガーを確認することをお勧めします。
