JavaScriptによる離脱意図検知の基本
離脱意図（Exit Intent）の検知は、ユーザーがページを離れようとする瞬間を捉える技術です。JavaScriptを使えば、ブラウザのネイティブイベントを活用して、高精度な離脱検知を実装できます。本記事では、実際に使えるコードとともに、主要な検知手法を解説します。
手法1：mouseleaveイベントによる検知
最も一般的な離脱意図検知は、マウスカーソルがブラウザウィンドウの上部に移動したことを検知する方法です。ユーザーがブラウザの閉じるボタンやアドレスバーに向かってカーソルを動かすと、documentのmouseleaveイベントが発火します。
基本的な実装ポイント
- document要素に対してmouseleaveイベントリスナーを設定する
- event.clientYが0以下の場合、上方向への離脱と判定する
- 一度表示したら再表示しないようフラグ管理を行う
- ページ読み込み直後は検知しないよう、遅延を設ける
この手法はデスクトップブラウザでは非常に効果的ですが、モバイルデバイスではマウスカーソルが存在しないため機能しません。そのため、モバイル向けには別の検知手法を組み合わせる必要があります。
手法2：beforeunloadイベント
beforeunloadイベントは、ユーザーがページを離れる直前に発火するブラウザネイティブのイベントです。タブを閉じる、別のURLに移動する、ブラウザを閉じるなど、あらゆる離脱アクションで発火します。
注意点
- beforeunloadイベント内でカスタムUIを表示することはブラウザの制約上困難
- ブラウザ標準の確認ダイアログのみ表示可能
- UXの観点から、フォーム入力中など限定的な場面での使用が推奨される
手法3：スクロール行動パターンの分析
モバイルデバイスでは、スクロール行動を分析することで離脱意図を推定できます。具体的には、高速な上方向スクロールはユーザーがページトップに戻ろうとしている＝離脱の兆候と解釈できます。
実装のコツ
- スクロール速度を計算し、閾値を超えた場合に離脱意図と判定
- スクロール方向が上向きであることを条件に加える
- debounce処理でパフォーマンスを最適化する
- ページ滞在時間との組み合わせで精度を向上させる
手法4：アイドル時間の検知
ユーザーが一定時間操作しない場合も、離脱の兆候として捉えることができます。マウス移動、キー入力、スクロールなどのイベントを監視し、最後の操作から一定時間経過した時点でポップアップを表示する方法です。
複数の検知手法を組み合わせることで、デスクトップ・モバイル両方で高い検知精度を実現できます。ExitGuard Proでは、これらの手法を統合し、デバイスに最適な検知を自動で行います。
実装時のベストプラクティス
- 表示回数の制限：同一セッション内での表示は1回に制限し、Cookieやlocalstorageで管理する
- 遅延表示：ページ読み込み後3〜5秒は検知を無効にし、誤検知を防ぐ
- ページ限定：コンバージョンに重要なページのみで有効にする
- アニメーション：表示時のアニメーションはCSS transitionで軽量に実装する
自前で実装する場合は、ブラウザ間の挙動差異やエッジケースの対応に時間がかかります。ExitGuard Proを使えば、検証済みの離脱検知ロジックをノーコードで導入できます。詳しくはA/Bテストの統計的有意性の記事もご参照ください。