WordPress にブラウザ通知を追加する方法

公開: 2023-02-12

メール購読者リストを増やしてみたものの、訪問者がサイトに戻ってこない場合は、他に何ができるか疑問に思うかもしれません。 サイトの訪問者に最新情報を知らせ続け、サイトへのリターン トラフィックを促進することは困難な場合があります。

幸いなことに、ブラウザ通知または「プッシュ」通知を使用すると、Web サイトのエクスペリエンスに動的な要素を追加できます。 各ユーザーのブラウザーを介して情報をプッシュするオプションは、訪問者に情報を提供し続け、新しい購読者を集めるための新しい方法を開くことができます.

この記事では、プッシュ通知とは何か、どこで使用できるかについて説明します。 また、デスクトップ ブラウザーとモバイル ブラウザーの両方に設定する方法についても説明します。 この便利なテクニックについてもっと学ぶ準備ができたら、始めましょう!

ウェブサイトのブラウザ通知(プッシュ通知)とは?

Web ユーザーとして、スマートフォンに関して言えば、プッシュ通知の方がなじみがあるかもしれません。 プッシュ通知は、その名の通り、情報を自動的にデバイスまたはブラウザに「プッシュ」して、重要なことが起こったときに通知します。 これは、たとえば、テキスト メッセージを受信した場合や、ソーシャル ポストに「いいね」やコメントを付けた場合などです。

実際、モバイル ユーザーの 52% が携帯電話でプッシュ通知を有効にしています。 さらに、同じテクノロジーを使用して、デスクトップ Web ブラウザー内でプッシュ通知を実現できます。 Web サイトでプッシュ通知を有効にすると、位置情報などの機能を利用してパーソナライズされたエクスペリエンスを作成したり、購入者の習慣を追跡して放棄されたショッピング カートを減らしたりできます。

実際のブラウザ通知の一例は、Freefly のクーポンと無料サンプルの Web サイトです。 Freefly は、デスクトップ ブラウザーにプッシュ通知を使用します。 ユーザーがサイトにアクセスすると、「景品アラート」を受け取るかどうかを尋ねる通知が表示されます。 「はい」または「いいえ」を選択して、ウェブサイトの閲覧を続けることができます。

Freefly のプッシュ通知の実装に関するケース スタディは、その目的が訪問者に期限付きの取引の即時通信を提供することであったことを明らかにしています。 このアプローチにより、わずか 3 分間のセットアップ プロセスの後、30 日間で 4,400 人の新規加入者を獲得しました。

WordPress でブラウザ通知を設定する方法 (6 ステップ)

次に、最大 30,000 人の加入者に無制限のモバイル プッシュと Web 通知を提供する無料の WordPress プラグインである OneSignal を見てみましょう。

OneSignal には、オーディエンスのセグメント化、ローカリゼーション機能の実装、Google アナリティクスによる結果の追跡、堅牢な API の利用も含まれます。

これは、すべての主要な電子メール マーケティング サービスと統合して、プッシュ通知を介してニュースレターを送信し、さらにパーソナライズされた顧客体験を提供できることを意味します。 これらの 6 つの手順に従って、OneSignal の使用を開始する方法を見てみましょう。

1.OneSignal プラグインをダウンロードしてインストールする

まず、WordPress プラグイン ディレクトリに移動して、OneSignal を検索します。 プラグインのファイルをダウンロードしたら、WordPress サイトの管理エリアにあるプラグインセクションにアクセスする必要があります。

または、プラグインセクション内から OneSignal を検索し、そこに無料のプラグインを追加することもできます。

プラグインをインストールしたら、インストールの完了後に表示される[アクティブ化]ボタンを必ず選択してください。 それが完了したら、 OneSignalリンクをクリックしてプロセスを完了できます。

2. OneSignal Web サイトにアクセスして、WordPress に接続します

OneSignal の Web サイトで、無料のアカウントを作成する必要があります。 OneSignal が WordPress サイト用に構成されていることを確認し、使用するブラウザーを選択するために完了する必要があるいくつかの手順もあります。

サインアップすると、通知用のアプリケーションを選択するよう求められます。

この例では、Chrome を使用します。 次のステップに進むには、アプリケーションに名前を付ける必要があります。 次の画面で、Web プッシュを構成するよう求められます。

表示されるオプションを変更するには、画面の上部にあるWordPress プラグインまたは Web サイト ビルダーを選択します。 これを行うと、他の Web アプリケーションのリストの中から選択できる WordPress アイコンが表示されます。

WordPressアイコンを選択すると、 WordPress サイト設定というラベルの付いたその他の構成オプションが下に表示されます。 ここで、Web サイトの情報を追加したり、必要に応じてカスタム アイコンをアップロードしたりできます。

この設定ダイアログには、完全に HTTPS ではないサイトに関するドキュメントも含まれています。 そのような状況にある場合は、このドキュメントを確認し、OneSignal の推奨事項に従ってください。 サイトの情報の入力が完了したら、変更を保存します。

3. WordPress プラグイン設定パネルで構成を確認する

WordPressサイト設定情報を保存すると、WordPress の OneSignal 設定パネルに転送する必要がある重要な詳細の画面が表示されます。 これらには、セットアップしたばかりのアプリケーションの API ID と API キーが含まれます。

API 情報の下にある[マイ Web サイトに移動]ボタンを使用するか、別のブラウザー タブで WordPress ダッシュボードに移動して、セットアップを完了します。

ダッシュボードに移動したら、左側のメニューで[OneSignal Push]をクリックし、 [構成]タブを選択します。 ここで、WordPress と OneSignal の間の最終的な接続を確立するために、これらの API コードを入力する必要があります。

Apple Safari ブラウザにもプッシュ通知を設定するには、OneSignal Web サイトに戻り、Safari をアプリケーションとして追加する必要があります (他のブラウザの場合も同様です)。

4. ポップアップ メッセージをカスタマイズする

WordPress と OneSignal を接続したので、プラグインに含まれるさまざまなオプションのカスタマイズを開始できます。 これには、プッシュ通知を購読するためのポップアップ メッセージが含まれます。

WordPress の OneSignal プッシュ設定内で、API 情報の下にスクロールして、プッシュ招待テキストに何を伝えたいかを決定できます。

これは、エクスペリエンスをパーソナライズし、訪問者に通知を使用するように誘導する優れた方法です。

5. 通知アイコンをカスタマイズする

カスタマイズできるもう 1 つの重要な項目は、通知アイコンです。 これにより、訪問者がブラウザで通知を受け取る方法を微調整できます。 たとえば、訪問者がサブスクライブすると受け取るカスタムのお礼メッセージをデザインできます。

さらに、訪問者がプッシュ通知サービスをブロックまたは登録解除した場合に表示される通知のテキストを構成できます。 これは時々発生しますが、通知を購読し続けることが有益である理由を明確にするメッセージを作成することで、訪問者を夢中にさせ続けることができます.

6. WordPress ウェブサイトから通知を送信する

OneSignal の設定がすべて完了したので、通知を送信する方法を知りたいと思うかもしれません。 幸いなことに、OneSignal アプリケーションは、Web サイトに新しい投稿が公開されるたびに、プッシュ通知を自動的に送信します。

ただし、ページまたは投稿の通知を手動で送信する場合は、WordPress の編集画面から行うことができます。

[ドキュメント]タブの下に、OneSignal オプションが表示されます。 そこから、ボックスをチェックして、投稿が更新されるたびに新しいブラウザー通知をプッシュできます。 これは、たとえば、オンライン ストアのアイテムを更新する場合に特に役立ちます。 特定のカスタム投稿タイプのプッシュ通知を自動的に送信するように OneSignal を構成することもできます。

デジタル エクスペリエンスの向上にサポートが必要ですか?

WordPress ウェブサイトにプッシュ通知を設定することは、サイトの訪問者に動的なエクスペリエンスを提供する完璧な方法です。 このツールについて楽しく学べたなら、ここ WP Engine で共有しなければならない他の優れた開発者リソースを気に入るはずです。

WP Engine は、高速で信頼性の高い WordPress ホスティング サービス以上のものを提供します。 また、完全なデジタル エクスペリエンス プラットフォームも提供しています。 これは、WP Engine を使用すると、顧客のために優れた Web サイトのデザインを開発することに集中し、ホスティング管理を私たちに任せることができることを意味します!