JavaScriptでユーザー離脱を検知する4つの方法

2024-04-06

JavaScriptでユーザーがウェブページを離れたことを検出する方法

beforeunload イベントは、ユーザーがページから移動しようとする際に発生するイベントです。このイベントハンドラ内で、ユーザーに確認メッセージを表示したり、データを保存したりすることができます。

window.addEventListener('beforeunload', (event) => {
  // ユーザーに確認メッセージを表示
  event.returnValue = 'このページから移動しますか？';
});

メリット:

シンプルで実装が簡単
ユーザーがページを離れる前に確認メッセージを表示できる

ユーザーがブラウザの戻るボタンやタブを閉じるボタンを使用した場合には発生しない
ユーザーがページを離れることを阻止できない

visibilitychange イベントは、ページの可視状態が変化した際に発生するイベントです。このイベントハンドラ内で、ユーザーがページを閲覧していない間に処理を実行することができます。

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // ユーザーがページを閲覧していない
  } else {
    // ユーザーがページを閲覧している
  }
});

ユーザーがページを閲覧していない間に処理を実行できる
ユーザーが別のタブに移動した場合にも発生する

ユーザーがブラウザを最小化したり、別のウィンドウに切り替えたりした場合には発生しない

ページ閲覧時間計測

JavaScriptの Date オブジェクトを使用して、ユーザーがページを閲覧し始めた時間と現在時刻を比較することで、ページ閲覧時間を計測することができます。

const startTime = Date.now();

setInterval(() => {
  const elapsedTime = Date.now() - startTime;
  // 閲覧時間が一定時間を超えた場合
  if (elapsedTime > 10000) {
    // ユーザーがページを長時間閲覧していない
  }
}, 1000);

ユーザーが別のタブに移動したり、ブラウザを最小化したりした場合には計測が不正確になる

サーバサイドでの検知

サーバーサイドでセッション情報などを利用することで、ユーザーがページを離れたことを検知することができます。

サーバ側の処理が必要になる

その他の方法

上記以外にも、以下のような方法でユーザーがページを離れたことを検知することができます。

マウスの動きやキーボードの入力がない状態が一定時間続いた場合
ページのスクロールが一定時間停止した場合

これらの方法は、上記の方法と組み合わせることで、より精度の高い検知を実現することができます。

ユーザーがページを離れる前に確認メッセージを表示したい場合は、beforeunload イベントを使用します。
ユーザーがページを閲覧していない間に処理を実行したい場合は、visibilitychange イベントを使用します。
ユーザーがページを閲覧していない時間を正確に計測したい場合は、ページ閲覧時間計測を使用します。
ユーザーが別のタブに移動したり、ブラウザを最小化したりした場合でも検知したい場合は、サーバーサイドでの検知を使用します。

ユーザーがウェブページを離れたことを検出するには、いくつかの方法があります。それぞれの方法のメリット・デメリットを理解した上で、目的に合った方法を選択することが重要です。

beforeunload イベント

window.addEventListener('beforeunload', (event) => {
  // ユーザーに確認メッセージを表示
  event.returnValue = 'このページから移動しますか？';
});

visibilitychange イベント

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // ユーザーがページを閲覧していない
  } else {
    // ユーザーがページを閲覧している
  }
});

ページ閲覧時間計測

const startTime = Date.now();

setInterval(() => {
  const elapsedTime = Date.now() - startTime;
  // 閲覧時間が一定時間を超えた場合
  if (elapsedTime > 10000) {
    // ユーザーがページを長時間閲覧していない
  }
}, 1000);

マウスイベント

mouseout イベント: マウスポインタが要素から離れたときに発生するイベント

これらのイベントを使用することで、ユーザーがページ上の特定の要素から離れたことを検知することができます。

const element = document.getElementById('my-element');

element.addEventListener('mouseout', () => {
  // ユーザーが要素から離れた
});

element.addEventListener('mouseleave', () => {
  // ユーザーが要素とその子孫要素から離れた
});