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

訪問者がタブを切り替えてもコンテンツに興味を持ち続けられるクリエイティブな方法をお探しなら、WordPressにブラウザのタブ通知を追加するのは素晴らしいアイデアです。

ブラウザタブ通知は、ブラウザのタブ自体に表示される動的なメッセージやアラートです。人々の注意を引き、サイトに戻ってきてもらうことができます。このさりげない機能は、エンゲージメントを高め、目標達成に役立ちます。

私たちはWPFormsのようないくつかのパートナーブランドでブラウザタブ通知を使用してきました。私たちの経験から、ブラウザタブの通知を見た後にウェブサイトを離れる多くのユーザーが戻ってくる傾向があることに気づきました。

この投稿では、WordPressでブラウザータブ通知を簡単に追加する方法を紹介します。

ブラウザータブ通知とは？

ブラウザータブ通知とは、訪問者がブラウザーで別のサイトを見ているときに、あなたのサイトのタブに表示されるメッセージです。

WordPressのウェブサイトにブラウザのタブ通知機能を追加することで、ユーザーが別のタブを開いてページを離れた瞬間に注意を引くことができます。

例えば、サイトのファビコンを変更したり、アニメーション化したり、カスタマイザーメッセージを書いたり、タブを点滅させたりすることができます。

オンラインストアを運営している場合、ブラウザータブ通知は本当に役立ちます。このような通知は、気が散った顧客を呼び戻し、お買い物カゴの放棄率を下げ、顧客エンゲージメントを高めます。

この機能を使えば、お買い物カゴの放棄についてカスタマイザーに警告を出したり、カスタマイザーがあなたのサイトに再度アクセスした場合に割引を提供することもできます。

以下はブラウザータブ通知の例である。

そこで今回は、WordPressで様々な種類のブラウザータブ通知を簡単に追加する方法をご紹介します。

以下のリンクからお好きな方法にジャンプできます：

WPCodeをインストールしてブラウザータブ通知を追加する

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

そのため、市場で最高のWordPressコードスニペットプラグインであるWPCodeの使用をお勧めします。サイトにカスタムコードを追加する最も安全で簡単な方法です。

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

有効化した後、WordPress管理サイドバーからCode Snippets ” + Add Snippetページにアクセスしてください。

カスタムコードを追加（新規スニペット）」設定にマウスオーバーし、その下にある「スニペットを使用」ボタンをクリックします。

カスタムスニペットの作成」ページが表示されます。

どのタイプのブラウザー・タブ通知であっても、ここにコードを入力する。

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

この方法は、ユーザーにサイトに投稿される更新を通知したい場合に使用します。タブに数字が表示され、見逃している新項目の数を知らせます。

例えば、WooCommerceストアがあり、在庫に新しい商品を追加した場合、ユーザーはブラウザータブの通知に新しい商品がいくつ追加されたかを示す数字を見ることができます。

下の画像をご覧いただきたい：

カスタマイザー作成」ページに移動したら、スニペットに名前を付ける必要があります。コードを識別するのに役立つものであれば何でも構いません。

次に、右側のドロップダウンメニューから「コードタイプ」として「JavaScript Snippet」を選択します。

あとはすべて、以下のコード・スニペットをコピー＆ペーストして「コード・プレビュー」ボックスに入れるだけだ：

let count = 0;
const title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

そうしたら、「インサーター」セクションまでスクロールダウンしてください。2つのオプションがあります：自動挿入」と「ショートコード」です。

Auto Insert」オプションを設定するだけで、あなたのサイトにコードが自動的に挿入され、実行されます。

ショートコードを追加した特定のページにのみ更新を表示したい場合は、「ショートコード」メソッドを使用できます。

その後、ページの一番上までスクロールして戻り、「Inactive」スイッチを「Active」に切り替える。

最後に「Save Snippet」ボタンをクリックして、設定を保存します。

これでカスタム・コード・スニペットがサイトに追加され、機能するようになります。

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

この方法では、ユーザーが別のタブに移動したときに、サイトのブラウザータブに別のファビコンを表示します。

ファビコンはウェブブラウザに表示される小さな画像です。ほとんどの企業はロゴの縮小版を使用しています。

ブラウザータブのファビコンを変更するには、WPCodeプラグインを使用します。

まず、WordPress管理画面の「Code Snippets ” + Add Snippets」ページにアクセスし、「Add Your Custom Code (New Snippet)」設定の下にある「Use Snippet」ボタンをクリックします。

カスタムスニペットの作成」ページが表示されますので、まずはコードスニペットのタイトルを入力してください。

ここで、右側のドロップダウンメニューから「コードタイプ」として「HTMLスニペット」を選択します。

そうしたら、次のコードをコピー＆ペーストして「コード・プレビュー」ボックスに入れてください：

<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>

<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() { 
        clearInterval( update ); 
    }, 3100);
}

コードを貼り付けたら、コードから例のファビコンリンクを削除し、独自の画像リンクに置き換えるだけです。

私たちのコードで強調されているリンクは以下の通り。

ファビコンとして選ぶ画像は、すでにWordPressサイトのメディアライブラリにアップロードされている必要があります。

そうでなければ、コードは機能せず、ファビコンは変更されません。

そうしたら、「インサーター」セクションまでスクロールダウンする。

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

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

次に、ページの上部に行き、右上のスイッチを「非有効化」から「有効化」に切り替え、「スニペットを保存」ボタンをクリックする。

その後、あなたのファビコンはブラウザータブの通知として変わり始めます。

タイプ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!'; の行に行き、ブラウザータブ通知用のメッセージのプレースホルダーテキストを削除するだけです。

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

ただし、特定のページにのみアイキャッチメッセージを掲載したい場合は、「ショートコード」オプションを設定することができます。

例えば、「カートに入れる」ページだけにこのコードを追加して、サイトのカート放棄率を下げることができます。

その場合は、ショートコード設定を選択することができます。

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

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

最後に、ページの一番上までスクロールして戻り、スイッチを「非活性化」から「有効化」に切り替える。

その後、「Save Snippet」ボタンをクリックして設定を保存します。

これで完了です！これで、ブラウザータブ通知はあなたのサイトを離れたユーザーに警告を発します。

ボーナス：WordPressサイトにWebプッシュ通知を追加する

訪問者を呼び戻し、お買い物カゴの放棄率を下げるもう一つの方法は、ユーザーにWebプッシュ通知を送ることです。このプッシュ通知は、クリック可能なショートメッセージで、サイトにアクセスしていないときでも訪問者に送信されます。

市場で最高のプッシュ通知ソフトウェアであるPushEngageを使えば、これを簡単に行うことができます。

ブログの新着記事やカスタムメッセージを自動送信したり、コードなしでDripキャンペーンを設定することができます。

このプラグインは、テンプレート、A/Bテスト、ユーザーセグメンテーション、スマートオプトインリマインダー、カスタマトリガーキャンペーン、インタラクティブメッセージオプションなどの機能も提供しています。

これらの機能をすべて使って、お買い物カゴの通知、メッセージのスケジュール設定、値下がりアラートの送信などを行い、サイトトラフィックの増加につなげることができます。

詳しくは、WordPressでWebプッシュ通知を追加する方法の初心者ガイドをご覧ください。

WordPressでブラウザのタブ通知を追加する方法について、この記事がお役に立てれば幸いです。WordPress でアイコン付きの機能ボックスを追加する方法のチュートリアルや、サイトを成長させる最高の WordPress jQuery プラグインのトップピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.