Webブラウザ向けプッシュ通知のサービス導入事例と配信方法ガイド

  • このエントリーをはてなブックマークに追加
  • Pocket

title2

Webプッシュ通知(ブラウザプッシュ通知)とは?

Chromeブラウザのバージョン42以降(デスクトップ版とAndroid版)で使えるようになった、Webサイトから配信するプッシュ通知の仕組みです。ネイティブアプリではおなじみのマーケティング手法がWebサイトでも実現できるようになり、新しいリピート獲得ソリューションとして注目されています。

このページでは「Webプッシュって何?」という疑問から、国内外での導入事例、Webサイトへの導入のやり方について紹介します。

Webブラウザ上でのプッシュ通知の流れ

まずはどんな感じでプッシュ通知が配信されるのか見てみましょう。

スマートフォン(Android)への通知

ユーザーがWebプッシュ通知に対応したWebサイトに対応ブラウザでアクセスすると、画面下から通知の許可ポップアップを表示します。ユーザーが「許可」ボタンをタップすると、以降そのユーザーに対してプッシュ通知を送信できるようになります。

and1

プッシュ許可ポップアップ

 

プッシュ通知時は、アプリのプッシュと同じようにホーム画面に表示されます。

プッシュ通知時のホーム画面

プッシュ通知時のホーム画面

デスクトップ(PC)への通知

基本的な流れはスマートフォンと同じですが、Chromeだとプッシュ許可のポップアップがブラウザのアドレスバー下に表示されます。

プッシュ許可の表示

プッシュ許可のポップアップ

 

プッシュ通知時は、プッシュ内容がデスクトップの右上に、複数ある場合は縦に並んで表示されます。ブラウザを閉じていても表示します。

デスクトップへのWebプッシュ通知

デスクトップへのWebプッシュ通知

Webプッシュ通知のメリット

メールなど既存のリテンション手法に対して以下のようなメリットがあります。

  • Webサイトに対応ブラウザでアクセスするだけでプッシュ許可が取れる(フォーム遷移やボタンクリックが不要)
  • 許可する場合は Yes / No の選択だけでよくメールアドレスなどの入力が不要
  • 通知はスマホ(Android)やPCに直接(ブラウザを閉じていても)届く。特定のアプリケーションの起動が不要。Web標準技術によって実現されており、ChromeをはじめFirefoxやUC Browser、Operaなど対応ブラウザが増えている。

一言でいうと、今までの手法にはない手軽さでパーミッションを取りつつスマホのホーム画面という一等地でコミュニケーションができる、ということです。iOSではまだ利用できませんが、サイトのユーザー層によっては現時点でも十分なリーチができます。

以下のページではメール(メルマガ)やLINE@とWebプッシュの比較をまとめておりますのでご参考ください。

Webプッシュ通知、LINE@、メルマガ。3つのリピート獲得手法を比較してみました

Webプッシュ配信を実現する技術(Service Worker)

Webプッシュ通知は、Service Workerという技術を利用して実現しています。

Service Workerとは、ブラウザがWebページをレンダリング時に実行するのとは別のタイミングでバックグラウンドでJavaScriptを動かす仕組みです。従来のJavaScriptと異なり、当該ページをブラウザで開いていなくてもスクリプトを実行できるというのが今までとの最大の違いです。これにより、バックグラウンドでデータ同期などの処理を行ったり、ネイティブアプリのようなWebプッシュ通知ができるようになりました。

技術面については、Pushnateの開発者が書いたQiitaの記事も合わせてご参考ください。

Webでプッシュ通知するサービスを個人開発で作ってみた+ServiceWorkerPushAPIの実装方法まとめ

Webプッシュの導入事例

海外ではいくつかのサービスがすでに導入済みです。日本でもおなじみのFacebookやVICE、国産サービスでは先日リクルートのSUUMOが導入を発表しています。そしてもちろん、このWebプッシュマーケティング研究所でも活用しています。
Facebookの事例については以下の記事もご参考ください。

Facebookの事例から考える、Webアプリにおけるプッシュ通知の許可タイミング

Webプッシュを導入するには(実践方法)

スクリーンショット 2015-11-04 9.56.30

Pushnateサービスサイト

Pushnateならもちろん無料、15分でWebプッシュを導入できます!

2015年11月2日リリースのPushnateベータ版より、外部JavaScript方式による独自ドメインでのWebプッシュ通知にも対応いたしました。これにより今までできなかった、

  • プッシュ通知ウィンドウ内に利用サイトのドメインが表示できる
  • Webサイトにアクセスした瞬間にプッシュ許可ウィンドウ表示

ができるようになりました。
そして導入に必要な作業は3ステップ。5分で設置できます。

  1. Firebase(Google)でプロジェクトを作成する
  2. Pushnate管理画面にサイトを登録し、SDKを取得しサイトにアップロード
  3. プッシュ許可を取るページにプッシュ許可コードを設置する

以下のページでも詳しい導入方法を紹介しています。ぜひ本格的なWebプッシュ通知を体験してみてください。

※独自ドメインでの配信はサイトがhttps環境である必要があります。非SSLだけどとにかく試してみたいという方はこちらのページをご参考ください。

Pushnate導入ガイド:独自ドメインでのWebプッシュ通知を配信する

ショッピングカート(買い物カゴ)やフォームから離脱したユーザーに配信する

2016年8月より新機能として、ECサイトのショッピングカートやお問い合わせフォームから離脱してしまったユーザー向けにWebプッシュ通知を配信できるようになりました。コンバージョンに近そうな人に絞ることでコンバージョン率改善を見込んだ機能です。導入サイトがSSL環境であり、トップページや商品ページとカートページのドメインが同じである必要がありますが、同じメッセージをただ送るだけでないWebプッシュの活用ができます。詳しくはこちらのお知らせをご覧ください。

ショッピングカートや問い合わせフォームから離脱したユーザーへのプッシュ通知配信機能をリリースしました

Webプッシュ通知の効果を測定する

Pushnateのサイト(サービスサイトやブログ)でもWebプッシュを活用してエンゲージメントを高める取り組みを行っており、Google Analyticsを利用してプッシュ通知の効果測定をしています。メール経由の効果測定方法を利用したWebプッシュ向けの効果測定方法をこちらの記事で紹介しています。

Google Analyticsを利用してWebプッシュ通知の効果を測定する

よくある質問

PushnateおよびWebプッシュについてよくある質問をまとめました。随時更新しております。

お問い合わせについて

Webプッシュの導入やPushnateのサービス詳細についてのお問い合わせはこちらのフォームよりお願いします。

今すぐWebプッシュをはじめる(無料)

Webプッシュ、今なら無料ではじめられます

Pushnate(プッシュネイト)はAndroidやPC版Chrome 42以上で使える、Webサイトでも無料でプッシュ通知が配信できるサービスです。

プッシュ通知したいWebサイトにJavaScriptを貼り付け、ちょこっと設定するだけ。通知日時を指定したり定期的な通知も可能なので、新商品や新コンテンツ追加時など自由なタイミングでリピート訪問を促進することができます。

今すぐWebプッシュをはじめる(無料)

SNSでもご購読できます。

スポンサーリンク