まずはじめに、ポップアップの概要について説明します。
ポップアップとは
ポップアップは、ポップアップキャンペーンタグが設置されているWebページ上で、
ユーザーが表示トリガー（後述します）に該当する挙動を取った時に表示される画像や動画、HTMLの要素です。
当サービスでは表示するポップアップをユーザーがクリックしたときに、
以下の挙動を設定することができます。
- シナリオ起動（現在のWebページ上でシナリオが表示される）
- ポップアップを閉じる（単純にポップアップを閉じ、現在のWebページへユーザーを滞在させる）
- 指定URLへ遷移（指定されたURLを別ウィンドウで開く）
ポップアップの表示トリガー
ポップアップがWebページに表示されるきっかけとなるユーザーの挙動を「表示トリガー」と呼びます。
当サービスで検知することができる表示トリガーは以下の通りです。
読み込み完了後即時
ポップアップキャンペーンタグが読み込み完了して即時でポップアップが表示されるトリガーです。
カーソルがウィンドウ外に出た時
カーソル（マウスポインター）がウィンドウ外に出た時にポップアップが表示されるトリガーです。
ユーザーがアドレスバー付近にマウスを動かした際の挙動を検知する目的のため、
ウィンドウの上下左右のうち、上方向の外に出た時のみ表示される仕様となっています。
（下方向・左右方向のウィンドウ外に出た場合は、表示されません）
ブラウザバックした時
ユーザーが戻るボタンやスマートフォンのスワイプ等で、
ブラウザバックしようとした時にポップアップが表示されるトリガーです。
ユーザーがページ上で少なくとも1回はクリックやタップ操作を行わなければ検知しない仕様となっています。
タブを切り替えた時
ユーザーがブラウザのタブを切り替えた時にポップアップが表示されるトリガーです。
このトリガーを検知する内部処理の都合上、
ページ内のiframe要素やその要素内の任意のクリッカブル要素をクリックしたときも、
ブラウザのタブを切り替えた時と同等のイベントが発生してしまうため、
そういった場合は意図的にトリガー検知をしないような処理を施しています。
サイト訪問後一定時間経過した時
ユーザーがサイト訪問後一定時間が経過した時にポップアップが表示されるトリガーです。
経過時間は秒単位で指定が可能です。
無操作状態が一定時間続いた時
ユーザーが無操作状態になって一定時間が経過した時にポップアップが表示されるトリガーです。
経過時間は秒単位で指定が可能です。
スクロールした時
ユーザーがページを下方向に一定比率スクロールした時にポップアップが表示されるトリガーです。
比率はパーセントで指定が可能です。
スクロールアップした時
ユーザーがページを上方向に一定比率スクロールした時にポップアップが表示されるトリガーです。
比率はパーセントで指定が可能です。
任意のHTML要素をクリックした時
ユーザーがページ内にある任意のHTML要素をクリックした時にポップアップが表示されるトリガーです。
任意のHTML要素が画面内に入った時
ユーザーがページをスクロールしながら閲覧する中で、任意のHTML要素が画面内に入った時にポップアップが表示されるトリガーです。
例えば「ページ下部の問い合わせフォームが見えたタイミングで、ユーザーのお問い合わせを喚起するためにキャンペーンバナーを表示する」といった制御が可能です。
任意のHTML要素が画面外に出た時
ユーザーがページをスクロールしながら閲覧する中で、任意のHTML要素が画面外に出た時にポップアップが表示されるトリガーです。
例えば「ファーストビューが画面外に出たタイミングで、ユーザーの離脱を防止するためにキャンペーンバナーを表示する」といった制御が可能です。
ポップアップの表示制御
当サービスでは上記の表示トリガーそれぞれを1つのポップアップでオン・オフできるため、
複数の表示トリガーを組み合わせることも可能です。
複数の表示トリガーが設定されている場合、
そのポップアップは最初に検知した表示トリガーで1回のみ表示されます。
一度ユーザーがポップアップを閉じたあとに他の表示トリガーを検知しても、2回目以降は表示されません。
また、表示・除外条件を設定することで、
特定のURLのみに表示させられるだけでなく、
例えば他にモーダル表示されている要素がある間は表示されないようにする、
一度ポップアップを表示した場合は一定期間表示しないようにする、といった複雑な表示制御が可能です。
それでは、次のステップで画像/動画版のポップアップを作成してみましょう。