WordPressでブラウザタブ通知を簡単に追加する方法

ブラウザタブ通知は、訪問者を静かに惹きつけ、再訪問を促す、シンプルでありながら効果的な機能の1つです。

例えば、多くのeコマースサイトでは、ユーザーがタブを切り替えた際に、購入を完了するために戻るよう優しくリマインドするためにこれを使用しています。 それは微妙で、邪魔にならず、サイト全体のコンバージョン率を向上させることができます。

このガイドでは、WordPressにブラウザタブ通知を簡単に追加する方法を紹介します。これにより、訪問者を集中させ、再訪を促すことができます。🙌

一度試せば、訪問者の注意を引きつけ、再訪問を促すための非常に便利なツールであることがお分かりいただけるでしょう。

WordPressにブラウザタブ通知を追加する理由

ブラウザタブ通知は、訪問者が別のタブに切り替えた後にウェブサイトに戻るのを助けます。訪問者を完全に失う代わりに、微妙な通知を使用して、コンテンツ、製品、または特別オファーについて思い出させることができます。

これにより、ブラウザタブ通知はエンゲージメントとコンバージョンを増やすためのシンプルでありながら効果的な方法となります。ブラウザタブ通知を使用する最大のメリットをいくつかご紹介します。

• 注意散漫な訪問者の再エンゲージメント：別のタブに切り替えた後、ユーザーにサイトに戻るよう促します。
• カート放棄の削減：ストアを離れる前に、カートに残された商品について買い物客にリマインドします。
• コンバージョンの増加：特別オファー、リードマグネット、重要な行動喚起に注意を引きます。
• ブランド認知度の向上：カスタムメッセージや視覚的な通知で、ウェブサイトを常に意識させます。
• ユーザーエンゲージメントの向上：訪問者に記事の続きを読む、フォームを完了する、またはコンテンツを探索することを奨励します。

ブラウザタブ通知は通常、訪問者がウェブサイトから離れたときに、タブタイトルを変更したり、カスタムメッセージを表示したり、ファビコンを更新したり、通知数を表示したりすることで機能します。

例えば、オンラインストアは「カートを忘れないでください！」のようなメッセージを表示するかもしれませんが、ブログは訪問者が別のタブを開いたときに「もっとヒントを得るために戻ってきてください！」と表示するかもしれません。

ブラウザタブ通知の例を次に示します。

ブラウザタブ通知の種類

目標に応じて、さまざまな種類のブラウザタブ通知を使用して、訪問者の注意を引き、サイトに戻るよう促すことができます。

最も人気のあるオプションを簡単に比較してみましょう。

それでは、WordPressでさまざまな種類のブラウザタブ通知を簡単に追加する方法をご紹介します。

以下のリンクを使用して、選択した方法にジャンプできます。

ブラウザタブ通知を追加するためにWPCodeをインストールする

WordPress にカスタムコードを追加することで、サイトにブラウザタブ通知を簡単に追加できます。通常はテーマの functions.php ファイルを編集する必要がありますが、わずかなエラーでもウェブサイトが壊れる可能性があります。

だからこそ、WPCodeの使用をお勧めします。300万以上のサイトで信頼されている、市場で最高のWordPressコードスニペットプラグインです。

これは、カスタムコードをサイトに追加する最も安全で簡単な方法であることがわかりました。テーマファイルを編集せずに、専用のインターフェイスを介してカスタムJavaScriptを挿入できます。これにより、誤ってサイトが破損するのを防ぐことができます。

詳細については、WPCodeレビューをご覧ください。

まず、WPCode プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、WordPress管理画面のサイドバーから コードスニペット » + スニペットを追加 ページにアクセスしてください。

次に、「カスタムコードを追加（新規スニペット）」オプションの上にマウスカーソルを合わせ、その下にある「+ カスタムスニペットを追加」ボタンをクリックします。

次に、画面上のオプションリストからコードタイプを選択します。

その後、「カスタムスニペットの作成」ページに移動します。

どの種類のブラウザタブ通知を使用する場合でも、ここにコードを入力します。

タイプ1：ブラウザタブ通知として新しい更新を表示する

この方法は、サイトのアクティビティをシミュレートしてユーザーの注意を引きたい場合に最適です。タブタイトルに数字が表示され、ユーザーが新しいメッセージや更新を待っているかのように見えます。

例えば、FacebookやLinkedInのようなサイトでは、未読通知を表示するためにこれを使用しています。この心理的なトリガーを使用して、ユーザーが何を見逃しているかを確認するためにタブに戻るように促すことができます。

「カスタムスニペットの作成」ページに移動したら、スニペットに名前を付ける必要があります。コードを識別するのに役立つものであれば、何でも選択できます。

次に、メニューから「コードタイプ」として「JavaScriptスニペット」を選択します。

次に、次のコードスニペットを「コードプレビュー」ボックスにコピーして貼り付けるだけです。

let count = 0;
const originalTitle = document.title;
let titleInterval;

function startCounting() {
    if (!titleInterval) { // Only start if not already running
        titleInterval = setInterval(() => {
            count++;
            document.title = '(' + count + ') ' + originalTitle;
        }, 2000);
    }
}

function stopCounting() {
    clearInterval(titleInterval);
    titleInterval = null;
    document.title = originalTitle;
    count = 0; // Reset count when returning
}

window.addEventListener('blur', startCounting);
window.addEventListener('focus', stopCounting);

このコードは、ユーザーがタブから離れると、インクリメンタルな数値でブラウザのタブタイトルを継続的に更新し、アクティビティが継続しているように見せかけます。

ユーザーがサイトに戻ると、タイトルは通常の状態にリセットされ、カウントもリセットされます。

それが完了したら、「挿入」セクションまでスクロールダウンします。「自動挿入」オプションを選択し、場所は「サイト全体ヘッダー」のままにします。

その後、ページの上部に戻り、「非アクティブ」スイッチを「アクティブ」に切り替えます。

最後に、「スニペットを保存」ボタンをクリックして設定を保存します。

これで完了すると、カスタムコードスニペットがサイトに追加され、機能し始めます。

タイプ2：ブラウザタブ通知としてのファビコンの変更

この方法では、ユーザーが別のタブに移動したときにブラウザタブに異なるファビコンを表示します。これは、サイトが開いたままであることを思い出させるためのさりげない方法です。

ファビコンを動的に変更するには、WordPressテーマによって提供される既存のファビコンリンクのhrefを修正するのがベストプラクティスです（通常はdocument.querySelector('link[rel="icon"]')で見つかります）。

これは、新しい<link>タグを挿入するよりも優れています。タグの挿入は、競合や予期しない動作につながる可能性があります。

これを実現するために、ユーザーがページを離れるときに画像を切り替え、戻ってきたときに元に戻すJavaScriptスニペットを使用します。

まず、コードスニペット » + スニペットを追加ページにアクセスし、「+カスタムスニペットを追加」をクリックします。

作成ページで、メニューから「コードタイプ」として「JavaScriptスニペット」を選択します。

それが完了したら、次のコードを「コードプレビュー」ボックスにコピー＆ペーストします。

// This script assumes an existing favicon link in the head (e.g., from your theme).
// If your theme doesn't provide one, you might need to add a default <link> tag
// using an HTML snippet in WPCode, inserted into the site-wide header.

document.addEventListener('DOMContentLoaded', function() {
    const faviconLink = document.querySelector('link[rel="icon"]'); // Find the existing favicon link
    if (!faviconLink) {
        console.warn("No favicon link found. Please ensure your theme adds one or add it manually in the head.");
        return;
    }

    const originalFavicon = faviconLink.href;
    // Replace with the full URL of your desired notification image
    const notificationFavicon = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

    window.addEventListener('blur', function() {
        faviconLink.href = notificationFavicon;
    });

    window.addEventListener('focus', function() {
        faviconLink.href = originalFavicon;
    });
});

コードを貼り付けた後、const notificationFavicon =行のURLを、独自の通知画像のリンクに置き換える必要があります。

新しいファビコンをWordPressのメディアライブラリにアップロードし、アップロードされた画像の完全なURL（例：https://example.com/wp-content/uploads/2024/05/favicon-notification.png）をコピーするだけです。

次に、コード内の引用符の中に貼り付けます。

それが完了したら、「挿入」セクションまで下にスクロールします。

コードをすべてのページに自動的に埋め込みたい場合は、「自動挿入」オプションを選択できます。

特定のページのみでファビコンを変更するには、「ショートコード」オプションを選択し、サイドバーウィジェットやコンテンツエディターの下部など、ショートコードが有効な領域に貼り付けます。

次に、ページの上部に行き、右上隅の「非アクティブ」から「アクティブ」にスイッチを切り替え、「スニペットの保存」ボタンをクリックします。

その後、ブラウザのタブ通知としてファビコンが変更され始めます。

タイプ3：ブラウザタブ通知としてサイトタイトルを変更する

この方法は、訪問者の注意を再び引きたい場合にサイトタイトルを変更したい場合に適しています。

このコードスニペットを使用すると、ユーザーがブラウザで別のタブに切り替えたときに、サイトのタイトルが目を引くメッセージを表示するように変更されます。

WPCodeプラグインを使用して、サイトタイトルをブラウザタブの通知に変更します。

「カスタムスニペットを作成」ページに移動するには、管理サイドバーからコードスニペット » + スニペットを追加ページにアクセスします。

ここで、「カスタムコードを追加（新規スニペット）」オプションの下にある「+カスタムスニペットを追加」をクリックします。

次に、画面に表示されるオプションのリストから、コードタイプとして「JavaScriptスニペット」を選択する必要があります。

「カスタムスニペットを作成」ページにいるので、まずコードスニペットのタイトルを入力します。

これは、コードが何のためにあるのかを覚えておくのに役立つものであれば何でも構いません。

次に、次のコードスニペットを「コードプレビュー」ボックスにコピーして貼り付けるだけです。

function changeTitleOnBlur() {
	var timer     = null;
	var	title     = document.title;
	var altTitle  = 'Return to this page!';
	window.onblur = function() {
		timer = window.setInterval( function() {
			document.title = altTitle === document.title ? title : altTitle;
		}, 1500 );
	}
	window.onfocus = function() {
		document.title = title;
		clearInterval(timer);
	}
}

changeTitleOnBlur();

コードを貼り付けたら、それを編集して、ブラウザタブに表示したいメッセージをコードに単純に書き込むことができます。

希望のメッセージを入力するには、var altTitle = 'Return to this page!'; の行に移動し、プレースホルダーテキストをブラウザタブ通知のメッセージに置き換えてください。

次に、「挿入」セクションまでスクロールし、「自動挿入」モードを選択して、すべてのページでブラウザタブ通知を有効にします。

ただし、目を引くメッセージを特定のページにのみ表示したい場合は、「ショートコード」オプションを選択できます。

たとえば、「カートに追加」ページにのみこのコードを追加して、ウェブサイトのカート放棄を減らすことができます。

その場合は、ショートコードオプションを選択できます。

その後、「場所」オプションまでスクロールダウンし、隣のドロップダウンメニューをクリックします。

ここから、「サイト全体フッター」オプションを選択します。

最後に、ページの上部までスクロールし、「非アクティブ」から「アクティブ」にスイッチを切り替えます。

次に、「スニペットを保存」ボタンをクリックして設定を保存します。

これで完了です！これで、ブラウザタブ通知がサイトを離れるユーザーに警告します。

ボーナス：より広範なリーチのためにWebプッシュ通知を探る

ブラウザのタブ通知は効果的ですが、1つの大きな制限があります。ユーザーがあなたのタブを開いたままにしていないと機能しません。

ウェブサイトを閉じた後でも訪問者にリーチしたい場合は、ウェブプッシュ通知が必要です。タブアラートとは異なり、これらはユーザーのデバイスまたはブラウザに直接送信されるアクティブなメッセージです。

これを設定する最も簡単な方法は、PushEngage を使用することです。これは市場で最高のプッシュ通知ソフトウェアです。

PushEngage を使用すると、新しいブログ記事、値下げ、またはカート放棄の自動更新を送信できます。私たちは WPBeginner で新しいチュートリアルについて購読者に通知するためにこれを使用しており、私たちにとってリピートトラフィックの主要なソースとなっています。

詳細については、完全なPushEngage レビューをご覧ください。

A/Bテスト、自動プッシュ、ユーザーセグメンテーション、スマートオプトインリマインダーなどの強力な機能が含まれています。これらのツールは、繰り返し訪れる忠実なオーディエンスを構築するのに役立ちます。

詳細については、WordPress にウェブプッシュ通知を追加する方法に関する初心者向けガイドをご覧ください。

ブラウザタブ通知の追加に関するよくある質問

WordPressでブラウザタブ通知を追加することに関して、読者が頻繁に尋ねる質問をいくつか紹介します。

WordPressにアナウンスバーを追加するにはどうすればよいですか？

アナウンスバーを追加する最も簡単な方法は、OptinMonster のようなプラグインを使用することです。これにより、サイトの上部または下部に表示される固定バーを作成し、コードを記述せずにアップデート、セール、またはアラートを表示できます。

詳細については、WordPress でアラートバーを作成するチュートリアルをご覧ください。

WordPress で通知を追加するにはどうすればよいですか？

オンサイト通知を追加するには、PushEngageのようなプラグインを使用するか、WPCodeを使用してカスタムスクリプトを挿入できます。

PushEngage はブラウザに送信されるアクティブなウェブプッシュ通知を処理し、WPCode はこのガイドのようなパッシブなタブタイトルアラート用のカスタムスクリプトを追加できます。

ウェブブラウザ通知を有効にするにはどうすればよいですか？

PushEngage のようなウェブプッシュ通知サービスにサインアップする必要があります。

WordPress プラグインをインストールすると、サイトは訪問者が現在ウェブサイトにアクセスしていない場合でも、ブラウザ/デバイスにアラートを送信する許可を自動的に求めることができます。

WordPress で通知を追加するにはどうすればよいですか？

WordPress エディターで、デフォルトのグループブロックに背景色を付けて、投稿内に簡単な通知を追加できます。

すべてのページに表示されるサイト全体の通知には、OptinMonsterやSeedProdのようなフローティングバープラグインの使用をお勧めします。

WordPress でポップアップバナーを追加するにはどうすればよいですか？

ポップアップバナーを追加するのに最適なツールはOptinMonsterです。

ページ滞在時間や離脱意図などの特定のユーザー行動に基づいてトリガーされる、ライトボックス、スライドイン、フローティングバナーを作成するためのドラッグ＆ドロップビルダーを提供します。

開始するには、WordPressにポップアップを追加するチュートリアルをご覧ください。

この記事がWordPressでブラウザタブ通知を追加する方法を学ぶのに役立ったことを願っています。また、WordPressにアイコン付きのフィーチャーボックスを追加する方法のチュートリアルをご覧になったり、モバイルフレンドリーなWordPressサイトを追加する方法のリストを確認したりすることもできます。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。