Webプッシュ通知のテスト方法(完全ガイド)

Webプッシュ通知のテスト方法(完全ガイド)

Webプッシュ通知が機能しているかどうかをテストするためのガイドをお探しですか?

プッシュ通知は比較的新しいマーケティングツールです。そのため、Webプッシュ通知のトラブルシューティングは、オンラインで良いチュートリアルを見つけるのが難しいため、少し手間がかかる場合があります。

朗報:この記事は、プッシュ通知のテストに必要な唯一のガイドです。Webプッシュ通知ソフトウェアの専門家が執筆したもので、あらゆるブラウザまたはオペレーティングシステムでプッシュ通知をテストするのに役立ちます。

この記事ではPushEngageを例として使用しますが、テストは普遍的です。したがって、別のベンダーを使用している場合でも、問題ありません。 

PushEngageは市場で最高のプッシュ通知ソフトウェアです。まだお使いでない場合は、今すぐPushEngageを使い始めることをお勧めします。

さて、プッシュ通知をテストできるようになる前に、いくつか注意すべき点があります。

心配いりません。この記事の冒頭にすべての前提条件を含めました。ステップバイステップですべてをフォローすれば、うまくいきます。

よろしいですか?素晴らしい!始めましょう。

プッシュ通知をテストできるようになる前にやること

プッシュ通知のオプトインをテストしたり、正しくインストールされたかどうかを確認したりするのは面倒な場合があります。

Webプッシュ通知を購読すると、購読ポップアップが再度表示されることはありません。そのため、Webプッシュ通知をテストするのが難しくなります。

テストを行う最も簡単な方法は、Chrome(どのオペレーティングシステムでも可)から始めることです。

Google Chromeは最も広く使用されているブラウザの1つであり、Chromeで複数のプロファイルを作成してテストできるため、Chromeとの互換性をテストするのは非常に簡単です。

明確にするために:PushEngageがサポートしている限り、他のどのブラウザでも同じテストを実行できます(これについては後述)。

早速始めましょう。

ステップ1:新しいGoogle Chromeプロファイルの作成

Chromeブラウザで新しいプロファイルを作成して、ウェブサイトへの複数のユニークユーザーの訪問をシミュレートできます。

異なるプロファイルでサイトにアクセスするたびに、Chromeは自動的に新しいユーザーをシミュレートします。このようにして、この記事のすべてのテストで複数のユーザーのプッシュ通知をテストできます。

それでは、今すぐChromeで新しいプロファイルを設定しましょう!

コンピューターでChromeブラウザを開き、Googleにサインインします。右上にユーザープロファイルが表示されます。プロファイル画像またはユーザー名を選択し、「ユーザーの管理」をクリックします:

新しいChromeプロファイル

次に、「ユーザーを追加」をクリックします:

Chromeユーザーを追加

新しいアカウントを作成し、「保存」をクリックします:

変更を保存

これで完了です。プッシュ通知のテストがずっと簡単になります。

ステップ2:Webプッシュ通知のブラウザサポートを確認する

PushEngageは、主要なすべてのブラウザと多数のウェブサイト構築プラットフォームをサポートしています。サポートされている統合の完全なリストを確認して、カバーされていることを確認できます。

どのベンダーからでも同様のサポートを受けるべきです。別のベンダーを使用しており、主要なブラウザやプラットフォームのサポートが得られない場合は、お問い合わせください。カスタマーサクセスチームがPushEngageへの移行をすぐにサポートします。

完全開示: 一部の訪問者にはブラウザプッシュ通知が許可されていません。たとえば、Facebookアプリで開くブラウザや、JavaScriptをサポートしていないブラウザではプッシュ通知を使用できません。

しかし、サイト訪問者の大多数は、JavaScriptをサポートする一般的なブラウザからのものです。したがって、これは大きな問題ではありません。

ステップ#3:SSL証明書の確認

PushEngageのプッシュ通知を使用するためにHTTPSウェブサイトである必要はありません。ただし、まだウェブサイトにSSL証明書をインストールすることを強くお勧めします。

いずれにしても、ウェブサイトにウェブプッシュ通知をインストールできます。まだインストールプロセスを完了していない場合は、インストールガイドを確認してください。HTTPサイトとHTTPSサイトではプロセスが若干異なります。

Google Tag Managerを使用してインストールコードを追加することもできます。

ただし、プッシュ通知をテストする前に、インストールプロセスを完了する必要があります。

ステップ#4:ウェルカムプッシュ通知を有効にする

サイトにプッシュ通知をインストールしたら、次にウェルカムプッシュ通知を設定する必要があります。

PushEngageダッシュボードにアクセスし、設定 » サイト設定 » インストール設定に移動して、新規購読者向けのウェルカム通知を有効にします。

ウェルカム通知を設定

これは、購読が完了したかどうかを確認するのに役立つため、実用的なステップです。

そして、テストに入る前に必要なのはこれだけです。

サイトのウェブプッシュ通知をテストする方法

いよいよサイトのプッシュ通知のテストを開始します。

注意: テストの前提条件をすべて完了する前に、テストに飛び込まないでください。スキップしたことを後で後悔することになりますので、信頼してください!

すべての前提条件は完了しましたか? 

素晴らしいです。

それでは、今からテストを開始しましょう。

テスト#1:Chromeで異なるプロファイルを使用する

これまでに、Chromeで異なるユーザープロファイルを作成し、PushEngageを使用してウェルカム通知を設定しました。したがって、新しいユーザープロファイルからサイトにアクセスすると、次のようなオプトインが表示されるはずです。

Safariスタイルのプッシュ通知オプトイン例

設定したオプトインの種類に応じて、シングルステップオプトインまたはツーステップオプトインのいずれかが表示されます。オプトインを進め、ツーステップオプトインの場合は、両方のオプトインで「許可」をクリックしてください。

プッシュ通知が正しくインストールされていれば、ウェルカム通知が表示されるはずです。

ウェルカムプッシュの例

確実にするために、少なくとも5つの異なるユーザープロファイルでこれを試してください。同僚や友人にオプトインを依頼してテストすることもできます。

テスト#2:セグメンテーションが機能しているかテストする

顧客セグメンテーションは、プッシュ通知戦略において大きな役割を果たすことができます。

PushEngageで利用できる最も優れた機能の1つは、通知のオプトイン時に購読者をセグメント化できることです。これは、オプトイン、セグメンテーション機能、プッシュ通知を一度にテストできるため、優れたテストになります。

とても素晴らしい!

最初のステップは、PushEngageダッシュボードにアクセスし、2つのセグメントを作成することです。作成方法やどのようなセグメントを使用すればよいかわからない場合は、ブログのカテゴリや機能に基づいてセグメントを作成してみてください。

セグメントの作成に慣れていない場合は、プッシュ通知セグメントの作成方法に関するこの記事を確認してください。

購読者にセグメントでタグ付けするためのコードをサイトに追加したら、オプトインをテストに進むことができます。

リンクをグループと共有し、通知の購読を依頼してください。

購読が完了したら、その特定のセグメントのユーザーにプッシュ通知を送信できます。通知を受信した場合、プッシュ通知は正しくインストールされており、すべて正常に機能しています。

テスト#3: HTTPウェブサイトのトラブルシューティング

前述したように、プッシュ通知を送信するためにサイトにSSL証明書をインストールする必要はありません。インストール手順に従ってコードスニペットをサイトに追加した場合、新しいChromeプロファイルを使用してサイトにアクセスするとオプトインが表示されるはずです。

ワンステップオプトイン

この記事のこのセクションは、オプトインが表示されないHTTPサイトのトラブルシューティング用です。 

Ctrl + Uを押してウェブサイトのソースコードを表示し、PushEngage JavaScriptスニペットを探します。これは、PushEngageダッシュボードから取得し、インストール中にサイトに貼り付けたものと同じスニペットです。

コードはウェブサイトのheadセクションにある必要があります。footerまたはbodyのHTMLタグ内に配置すると機能しない可能性があるためです。headセクションにコードが表示されない場合は、それが問題です。開発者に代わりにheadセクションに追加するように依頼してください。

ただし、headセクションにコードがあり、新しいChromeプロファイルを使用してサイトにアクセスしてもオプトインが表示されない場合は、deferタグを使用していないことを確認してください。

コードは次のようになります。

JavaScriptスニペットをインスペクト

コードが次のように表示される場合:

<script src=”demo_defer.js” defer></script>

または、<script defer> _pe.subscribe(); </script>

開発者にこのdeferタグをコードから削除するように依頼してください。そうすれば正常に機能するはずです。

テスト#4: HTTPSウェブサイトのトラブルシューティング

HTTPSウェブサイトを実行している場合、トラブルシューティングの最初のステップはHTTPウェブサイトと同じです。PushEngageを統合するためのコードは、ウェブサイトのheadセクションに存在する必要があります。

PushEngageのHTTPSサイトインストールコード

このコードがheadセクションに存在しない場合は、削除して<head>タグ内に再度追加する必要があります。それでも問題ない場合は、インストール中に追加したservice-worker.jsファイルが原因である可能性があります。

このURLにアクセスしてください(your-site-nameを実際のサイト名に置き換えてください):

https://www.example.com/service-worker.js

そして、404エラーが返されていないか確認してください。404エラーは、このファイルの取得に問題があることを意味し、プッシュ通知を配信できない理由となります。この時点で、直ちにカスタマーサクセスチームにご連絡ください

問題を詳しく調べ、解決のお手伝いをいたします。

それでも問題が解決しない場合は、JSONマニフェストを確認する必要があります。次のURLにアクセスしてください(your-site-nameを実際のサイト名に置き換えてください):

https://www.example.com/manifest.json

リンクにアクセスできる場合、次のような結果が表示されます:

JSONマニフェスト

この応答が得られない場合は、サイトのルートフォルダに必要なファイルを追加できなかった可能性が高いです。

心配いりません。クイックインストールという回避策があります。

PushEngageアカウントにログインし、設定 » サブスクリプション設定 » サブスクリプションダイアログボックスに移動します:

サブスクリプション設定

次に、Safariスタイルボックス » 編集に移動します:

Safari スタイル オプトイン設定

最後に、オプションに移動し、クイックインストールを有効にします:

クイックインストールの有効化

これで完了です。

テスト#5:コンソールを使用して問題をデバッグする

警告:このテストは開発者向けであり、他のすべてのテストが失敗した場合にのみ使用してください。ご自身が開発者でない場合は、直ちに私たちにご連絡ください

新しいプロファイルを使用してウェブサイトにアクセスし、Ctrl + Shift + l(要素をインスペクト)を押して、コンソールをクリックし、コンソールウィンドウに_pe.subscribe();と入力します:

コンソールデバッグ

そしてEnterキーを押します。

これで、プッシュ通知が機能しない原因となっている正確なエラーメッセージが表示されるはずです。あとはデバッグするだけです。

まとめ

今回は以上です、皆さん!

このガイドがお役に立った場合は、コンバージョン率の高いオプトイン例に関する記事もご覧ください。プッシュ通知のテストが完了したら、キャンペーンを適切に設定するのに最適です。

PushEngageは、他にも非常に強力なキャンペーンを提供していますので、ぜひチェックしてみてください。結局のところ、PushEngageは世界No.1のプッシュ通知ソフトウェアです。高度なキャンペーンのほとんどは完全に自動化されたプッシュ通知です。

寝ている間でも、自動でお金を稼ぐことができます。

まだの方は、今日からPushEngageを始めましょう

コメントを追加

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従ってモデレーションされ、すべてのリンクはノーフォローとなりますのでご注意ください。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

ウェブサイトを離れた後も訪問者をエンゲージし、維持する

見逃せないプッシュ通知で、すべてのウェブ訪問の価値を高めましょう。

  • 永久無料プラン
  • 簡単なセットアップ
  • 5つ星サポート