最近ニュースサイトやブログなどで、ブラウザの戻るボタンを押したら広告やレコメンド記事が表示される謎演出がありますよね。今日はあれを簡易的に再現してみます。

• ブラウザの戻るボタンで広告出すやつのサンプル

Chrome、Firefox、Safariで動作チェック済みです。上記のページの[続きを読む]のボタンを押下したあと、ブラウザバックをするとダミーの広告が出るはずです。以下のコードを設定しました。非常に簡易的なものです。今後のWebブラウザのアップデートで正常に動かなくなる可能性はありますが…。

//何かしらアクションを起こしたときに履歴を操作
window.history.pushState(null, null, window.location.href);

window.addEventListener('popstate', (e) => {
 //戻るボタンを押したときにアクションをおこす
});

まずhistoryAPIのhistory.pushStateを使い、任意に履歴を追加します。そのあとpopstateのイベントハンドラで戻るボタンが押されたタイミングで特定のイベントを発火させます。この時、広告を出す系のサイトでは広告やレコメンド記事エリアを表示させるような処理をしているはずです。

しかし、これはユーザの本来の意図とは反する動きなのでUX（User eXperience）的には好ましいことではありません。ですが、戻るボタンの検知自体は場面次第では有効なことがあります。例えば…

• Webアプリ等で戻るボタンの動作を抑制・警告させたい
• フォームや申し込み、購入画面などで誤動作・二重処理を防止したい
• 広告ではないポップアップ表示を戻るボタンで消すようにしたい

…等。ユーザのことを考えて、使う場面を見極めましょう。

おしまい♥