JavaScript の Page Load、Focus、UnFocus、Exit イベント

JavaScript でユーザーがいつウェブページに入ってきたかを記録することは、多くの人がすでにやっていると思います。でも、ユーザーがいつページを「閉じた」のかを判断する方法を考えたことはありますか？今のブラウザは複数のウェブページをタブで表示するので、ユーザーが実は別のページを見ていて、あなたのページはただ開いたままになっているという可能性もあります。たとえば YouTube もこの問題によく直面します。ユーザーが音楽を聴くためにページを開いたままにしていても、実際には Facebook を見ているのです……。

今回は、JS のページ読み込みとクローズのイベント、そして Focus（ページに入った）と UnFocus（ページから離れた）のイベントを簡単にまとめます。これらのイベントを使えば、ユーザーの操作状況を記録して分析できますし、ユーザーがページから離れたときに音楽の再生を止めるといったことも実現できます。

ページの読み込み

ページに入ったことを検知する方法は2種類あり、ready と onload です。主な違いは、onload はページが画像などのリソースを含めて完全に読み込まれたときに発生するのに対し、ready はページの DOM が読み込まれた時点で発生するという点です。一般的には、ready は onload より前に発生します。

注：ready イベントは jQuery でしか提供されていません。

window.onload = function() {
    console.log('load');
}

$(document).ready(function() {
    console.log('ready');
})

ページを閉じる

Facebook で投稿を書いている途中にうっかり閉じるボタンを押してしまうと、「本当に再読み込みしますか？」という確認ダイアログが表示されます。これは、以下のイベントで実現されています。このイベントを使えば、ユーザーがページを閉じたときに内容を自動保存したり、本当に離れてよいかを確認したりできます。ただし、ダイアログの内容はカスタマイズできません。これは、このイベントが広告目的に使われないようにするためです。

window.onbeforeunload = function() {
    console.log('123');
    return 'bye';
}

何を return しても表示されることはありませんが、何か1つでも return すればダイアログは表示されます。この動作を無効にしたい場合は、次のコードを使えます：

window.onbeforeunload = null

ページを閉じたかどうかの判断には、技術面と戦略面の2つの問題があることに注意してください。技術面では、私のテストでは onbeforeunload は iOS では動作しませんでした。Android は試していないので分かりません。代替手段については？いろいろ試しましたが、ユーザーがページを閉じたかどうかを正確に判断できる方法はまだ見つかっていません。また、閉じ方にはアプリの終了、ページを閉じる、クラッシュ、リンクのクリックなど、さまざまな種類があります。それぞれの動作をブラウザがページのクローズとみなすかどうかは、テストが必要です。

戦略面では、モバイルのユーザーの行動はパソコンのユーザーとは違うことに注意してください。考えてみてください。スマートフォンでウェブページを見ているとき、本当にページを閉じていますか？通常、モバイルではページを閉じる習慣はありません。その代わりに、新しいページを開いて別の内容を見たり、アプリを閉じたりします。ただし、モバイルの「閉じる」は実際には閉じたことにはならず、バックグラウンドで動き続けます。この点にも注意が必要です。

ページに入る

ここでのページに入るというのは load とは異なり、ユーザーが別のタブから切り替えてあなたのページに来たことを指します。

window.onfocus = function() {
    console.log('focus');
}

ページから離れる

同様に、これはページを閉じることを意味するわけではありません。ユーザーが別のタブをクリックして、フォーカスがあなたのページから離れたことを指します。

window.onblur = function() {
    console.log('blur');
};