JSで別タブに切り替えられたらページタイトルを変更する

通常はタイトルのテキストってユーザーの操作に応じて変わったりしないのですが、今回は 「別タブをアクティブにした時に切り替わる（自分のページが非アクティブになった時）」 方法を紹介したいと思います。

この方法を使えばユーザーがタブを切り替えた時などに起こるちょっとした変化で自ページへの再帰率が高まるかもしれません。

元ネタはこちら

この方法は私のオリジナルではなくInstgaramで拾ったネタです。 下記がオリジナルです。

この投稿をInstagramで見る

Mahdi Baghaei(@webbbbbbb_webbbbb)がシェアした投稿

サンプルコード

Instgaramは動画のためコードがコピーできません。今後使う時に備えてコードを起こしておきました。 window に focus と blur のイベントを設定してそれぞれの発火時に<title>のテキストを変更するだけのシンプルなコードです。

// オリジナルのタイトル取得
const originalTitle = document.title;

// blur時のタイトル
const blurTitle = "Come back babyyyyyy!";

window.addEventListener('focus', () => {
  this.document.title = titleOriginal;
});

window.addEventListener('blur', () => {
  this.document.title = blurTitle;
});

これで別タブに切り替わった時に<title>のテキスト「Come back babyyyyyy!」が切り替わるようになります。
この記事でも実装してみたので良ければ試してみてくださいね。