Chrome 52 のデベロッパーツールでService Workerのチェックができるように

ついにChrome 52の安定版がリリースとなりました。

話題の大きさでいうとバックスペースキーで戻れなくなった件とかタブのデザインが角ばったことのほうがメジャーではありますが、実は今回デベロッパーツールにも変更がありました。「Application」タブからService Workerなどプログレッシブウェブ関連の検証ができるようになったのです。今までserviceworker-internalsを見たりしていましたが、今回の変更でここからプッシュを表示したりなどいろいろできるようになりました。その他にもホームスクリーンへのアイコン追加などService Worker / Webプッシュ以外のPWA関連の検証ができるようになっています。

先日、AMP上でのService Workerインストールの話もありましたが、ついにGoogleも本気でこのへんをプッシュしてきた感がありますね!

スクリーンショット 2016-07-21 23.29.08

Webプッシュが有効に作用する5つのKPI

すっかりご無沙汰しておりますがいかがお過ごしでしょうか?我々はといえば、次期機能リリースに向けて準備の真っ最中です。もう少ししたらこちらでもお知らせできるかと思います。

さてWebプッシュ、少しずつ導入しているWebサイトが増えてきた感もありますが、まだまだシンプルで、全来訪ユーザーに等しくプッシュ許諾を取るタイプのものがほとんど。で、本記事ではWebプッシュが有効に働きそうなKPIをいくつかピックアップしてみたいと思います。今後こういったKPI改善を目的とした実装が増えればいいなと思います。

①Webサイトへの再来訪数(リピート訪問数)

最もノーマルなパターンで、来訪者の目につきやすい場所にプッシュ許諾ボタンなどを置いて「興味があればプッシュ購読してね」というものです。多くの来訪者に訴求できる反面、そのサイトのソーシャルアカウントなどの施策とくらべてメリットをアピールしづらいのがネックです。サイト運営者の手間を考えても「Twitterフォローでいいじゃん」となりやすいです。

また、このやり方はプッシュ許諾直後の新鮮な時期の再来訪は得やすいですが、訴求内容がパターン化してしまい、率としては徐々に悪化する傾向があります。そうなるとPUSH通知自体への印象がネガティブになるといった恐れもあるので配信頻度に注意が必要です。

②特定タイミングや特定ページヘの訪問数増加

これは①にも近いですが、期間限定のセールなどのタイミングで集中的にセッション数を得るというものです。Webプッシュ単体でというよりメールなどの施策と組み合わせるのが有効です。Webプッシュの特性として、スマートフォンのホーム画面にアプローチできるというのがあります。メールよりも開封までのタイムラグを短くできるのでこれを活用して即時的な反応を得るのに向いています。この方法を使う場合は、平時は配信を控え、ここぞという時に通知するのが効果的です。

③リアル店舗への再来店数

リアル店舗の場合でも、来店時に何らかのかたちでプッシュ許諾を取り、集客するのは有効です。比較的短い期間内に複数回利用することに価値がある(初期の来店数が常連化に作用する)サービスに特に向いています。

同じ再来訪でもWebサイトに比べると、一度来店している時点でお店に対するエンゲージメントは強い(わざわざ足を運んで行くほどなので)ので、何らかのかたちでプッシュ許諾をとっておくことで来店後、特に短期間のマインドシェアを上げることができます。

④Webサイトやお店での特定のアクション

このあたりからがWebプッシュらしい施策で、マーケティングオートメーションの視点に近くなってきます。

サイト内やお店で特定のアクションを行ったユーザー(=ある程度のエンゲージメントが築けている)にのみプッシュするというものです。対象となるアクションの幅は広く、会員登録や問い合わせ、情報入力、URLのシェア、資料ダウンロードのような浅めのコンバージョンや閲覧ページの種類などをトリガーにします。①の再来訪数に比べると一定の関係性が築けているユーザーになるので、総配信数は少なくなる反面、再来訪あたりの価値が高くなります。

⑤コンバージョン数

④のアクションよりさらに先の、サイトでのコンバージョンを達成したユーザーを対象にするものです。ここまでくるとエンゲージメントの度合いとしてもサイトとお店で大差がなくなってきます。そのサイトやお店が提供する価値を一通り体験したユーザーなので、配信内容の精度を上げていくことで効率的にコンバージョン数を上げることができます。

商品購入やサービス申し込みはもちろん、宿泊やレストラン、習い事のようなコンバージョンとサービスの提供タイミングがずれるものなどにも有効です。

重要なのは「時間軸を意識すること」

というわけで5つほどKPIを紹介してみました。他の手法と比べての特徴としては「時間軸を意識すること」だと思います。即時性を求めたり、前回の来訪やコンバージョンから一定の時間を取ったり季節や曜日を加味することでよりパーソナル性(=そのユーザーならではの通知内容)を高めることができます。まだそこまで有効な使い方をしている事例は少ないですが、ブラウザのペイロード対応も進んできているので今後に期待ですね。

Webプッシュマーケティングにおける6つのトピック(Google I/O 2016から)

先日開催された「Google I/O 2016」の中で「Deep user engagement with web push notifications」というセッションがありました。

他にもプログレッシブWeb関連のセッションがいくつかあり、その中でWebプッシュに触れているものもありましたが、単独で扱っているのはこのセッションだけでした。というわけで、本セッションの内容から特にマーケティング的に重要そうなポイントを6つピックアップして紹介したいと思います。(Web Push プロトコルの話など一部割愛している箇所もありますので詳しく知りたい方は動画もご覧ください。)

続きを読む

Webプッシュ3大ワードからリテンション施策を比較する(Google Developers Summit Tokyo 2016 から)

4月26日に開催された「Google Developers Summit Tokyo 2016」の2日目。その中で「Hey, look at me, I’m Notification」という、Webプッシュ関連の発表がありました。個人的に注目なのが、

  • Timely (タイミング):今送るべき通知なのか?
  • Precise (正確性) :正確に、何についての通知なのかパッと見て理解できるように。
  • Relevant (関連性/具体性):そのユーザーならではの情報を通知する。

の3つのキーワードです。文脈的には今までGoogleがWebプッシュ通知の配信におけるマナーとして伝えてきた内容がベースになっていますが、あらためてワード化されることで、より重視し浸透させたいという姿勢を感じました。

続きを読む

ペイロード時代のWebプッシュにより実現される、Webアプリ6パターンのUX

前回のブログでもポストしました、Chrome50から実装されるブラウザからのプッシュ通知におけるペイロード機能。簡単に言いますと、今まで定型メッセージしか送れなかったのが、ユーザー行動や属性に基づいたパーソナライズされたプッシュ通知が送れるというものです。

プッシュ通知自体はすでにネイティブアプリでは何年も使われており、その使われ方もだいぶ工夫がされてきています。そのあたりも参考にしつつ、今日はこのペイロードが使えることを前提としてどんなWebサービスと相性がよさそうなケースを6つほどリストアップしながら考えてみたいと思います。

※実際のサービスに適用しやすいように、なるべくケースは抽象化しました。

①サイト内でのアクション後、段階を経ながら提供されるサービス

対象:ショッピングサイト、サービスEC、宅配系サービス

amazonアプリを使っていると、商品が発送された時や完了したときにプッシュ通知が届く経験をしたことがあるかもしれません。このように、ユーザーがサイト内で購入などのアクションをした後、一定の期間でサービス提供が完了するというタイプです。一般的なECはもちろん、オーダーメイドで時間がかかる商品、または出前や印刷、クリーニングといったサービスECと言われるジャンルにも向いています。このケースでは、Webプッシュはサイトへのリピート訪問よりも通知という機能を果たすことに重点が置かれます。

②サイト内でのメッセージ表示

対象:マーケティング関連ツール、各種サービス管理画面など

大抵のWebサイトではユーザーが入力する際に何らかのメッセージを表示します。これをもっと非同期的に解釈することで、そのサイトを利用中にプッシュするという逆の発想での使い方も考えられます。例えばマーケティング関連ツールでCSVでリストを抽出するときに時間がかかる場合がありますが、数十秒〜数分遅れて完了メッセージをWebプッシュで送るといったケースが考えられます。

③即時的な反応が必要なサービス

対象:オークション、チケット予約、タイムセールや新商品発売

「今すぐサイトから申し込まなくちゃ」というケースです。オークションやチケット販売、人気商品やセール商品などが該当します。Webプッシュはスマホのホーム画面に直接リーチできますので、即時性のある情報とは相性が良いです。また、Webプッシュの機能の一つであるカスタムボタンを使えば、通知ウィンドウからそのまま入札や予約、購入といったアクションにつなげることもできます。

④通知自体がコンテンツとして完結するサービス

対象:占い、天気予報、テレビ番組、俳句のような短文コンテンツ

ネイティブアプリではおなじみの天気予報など、最低限の情報を決まったタイミングでチェックできればいいというケースです。そのほかにもテレビ番組情報だったり、その日一番検索されたワード、占いのようなコンテンツなど、主にメディア系サービスにおけるパーソナライズ機能の一環として使われるケースもあるかもしれません。最近話題のLINEのBotなんかもここに近いです。

⑤ちょっとした予約

対象:レンタル系サービス、美容院などの来店サービス、飲食店

図書館やレンタル系サービスなど、絶対行くかどうかわからないけど、借りれるようになったら教えて欲しい、といったカジュアルな予約用途です。予約といえば最近はスシローアプリなども人気ですが、Webプッシュにおいてはアプリをインストールするほど繰り返し使わなさそうなサービス、そもそもアプリがないサービスが対象になりそうです。

⑥カート落ち、フォーム落ち

対象:ショッピングサイト、見込み客や予約を獲得したいサイト

ペイロード本命ともいえるケースです。

サイト内でショッピングカートやフォーム入力の途中で離脱してしまったユーザーに絞って再来訪を促進するケースです。コンバージョンに最も近いユーザーに訴求するのでROIを検証しやすいというのが最大の特徴です。ペイロードであれば、カートに入っている商品名を出したりセール情報と組み合わせて訴求することも可能です。

以上、6つピックアップしてみましたが、まだ他にもありそうな気がしますので、いずれフレームワーク的にもまとめてみたいと思います。

そしてこれらケースからもわかるとおり、Webプッシュは、例えば受注確認メールのような、エビデンス的な効果はほとんどありません。メールはもちろん、LINEよりもメッセージ表示量が少なく、プッシュ内でコンテンツとして成立させるのも難しい。それよりも、ユーザーが特にスマホを操作したりアプリケーションを起動しなくてもコミュニケーションができる、という特性を活かした実装が向いています。もうすぐChrome50がリリースされますので楽しみですね。

Chrome 50 ベータ版にて待望のペイロード機能が加わります

先日、Googleの日本語ブログでもお知らせがありましたが、Chrome 50 ベータ版が公開されています。

サイトからプッシュ通知を使って、ネイティブ アプリケーションと同じ方法でシステムレベルの通知をトリガーできるようになりました。

ついに待望のペイロードが実装されます。

最新バージョンの Chrome では、サイトで通知データのペイロードをプッシュ メッセージに含むことができるようになるため、サーバーの確認は不要になります。ユーザーのプライバシーを保護するため、プッシュ通知のペイロードは暗号化しなければなりませんプッシュ通知のペイロードPush API 仕様の一環であり、Firefox では既にサポートされています。

今までとは少し通知の仕方が変わることになります。そしてすでにFirefoxではサポートされているとのこと。
今までもこのブログではペイロードについて触れてきましたが、当初の予定である49ではなく、50での実装となりました。

今まではWebプッシュ通知といっても、実質固定のメッセージをユーザー全員に表示するという仕組みでしたが、これによりユーザー行動や属性に合わせたプッシュ通知が可能になります。やっとブラウザでもネイティブアプリと同じレベルで使えるようになるということです。(Facebookのように力技でそれを実現していたケースもあります)

JavaScriptコードを設置するだけでプッシュできるということもあり、これまでは個人ブログや小規模サイトで使ってみるというケースも多かったですが、これからはよりサイトと密接に結びついているような、Webサイトのユーザー体験全体に関わるような使い方も出てくると思います。

Chrome 50が正式版になり、それが行き渡るまでは少し時間かかりますが、今年の年末にはペイロードを使ったプッシュが普通になるのかもしれませんね。

広告効果向上ツールとしてWebプッシュを活用する

メールなどのリテンション手法と比較したブラウザからのプッシュ通知の特徴として、Webアクセス中の行動内容を元にパーミッションを取れるということが挙げられます。

情報入力したかどうかでなく、Web上の行動状況を起点としてユーザーとの関係が作れるので、例えば

  • 特定のサイトからのアクセス(リファラ)時のみプッシュ許諾を出す
  • 初回訪問 / 再来訪 の場合のみプッシュ許諾を出す
  • 検索エンジンやソーシャルメディア経由アクセスの場合のみプッシュ許諾を出す

などが可能になります。

そしてこれらの中で最も費用対効果が見えやすそうなのが「広告経由のアクセス時のみWebプッシュ許諾をとる」という施策です。

これは、ディスプレイ広告のクリックのみならず、オーガニック検索に比べて来訪ワードが取得しやすいリスティング広告でも有効です。

というわけで今回は広告訴求するいくつかのケースを対象にどんなやり方がありそうかまとめてみました。

ケース①:アプリインストール促進広告

こんなイメージのページに遷移したところでプッシュ許諾を取ります。

IMG_1966

スマホサイトやアプリ内広告から遷移し、主にランキング形式で人気アプリを紹介するようなページです。通常、クリックのコストに対して1ダウンロードあたりの獲得コストで収支を管理します。主に広告が入り口ページになるので、Webプッシュ通知により再来訪が1増えればその経済的な価値は把握しやすいケースといえます。

ケース②:ECサイトの商品広告

広告のイメージ(Criteoのバナー例)

スクリーンショット 2016-03-11 13.16.40

ECサイトにおいては、商品データを利用して、大量の商品パターン広告を出稿することがあります。リスティング広告はもちろん、最近はデータフィードによるリターゲティング広告などもあります。広告クリック経由で、特に初回訪問となったアクセスの場合、商品データやセール情報と組み合わせて後からWebプッシュをすることにより、高いリターゲティング効果が期待できると考えられます。

商品購入のECサイトだけでなく、旅行や不動産、中古車情報サイトなども同じような考え方ですね。

ケース③:BtoB向け製品のWebサイト

Salesforceなどに代表されるSaaSと呼ばれるジャンルの製品です。

スクリーンショット 2016-03-11 13.17.49

BtoB向け製品の特徴としては、見込み客の母数が少ない半面、比較的単価が高いということが挙げられます。このようなケースではむやみにWebプッシュの許諾をとろうとせず、サイトに訪問してからの行動も踏まえるのが良いでしょう。

  • 一定時間Webサイトに滞在していたらプッシュ許諾
  • 直帰せずに次のページを見てくれたらプッシュ許諾
  • ページ下までスクロールしてくれたら(= 情報を読んでくれたら)プッシュ許諾
  • 無料Ebookをダウンロードしてくれたらプッシュ許諾

など、一定のエンゲージメントができたと判断できる行動をベースに設計することで、より効果の高いユーザーとの接点が持てます。

本日紹介した機能はまだPushnateでは利用できないのですが、今後のWebプッシュ自体の仕様追加により可能性が高くなる見込みです。現在の使われ方など見ながら今後検討していきたいと思います。

Webプッシュ事例紹介:ICS MEDIA様

本日は、いつもと趣向を変えてPushnateを使ってWebプッシュ通知を実施されている事例を紹介してみたいと思います。

今回紹介するのはICS MEDIA様のWebサイトです。インタラクション設計を中心に事業を展開されている株式会社ICS様が運営されているオウンドメディアです。SSL環境ですが、共通ドメイン型のWebプッシュを設置されています。

スクリーンショット 2016-03-06 22.43.20

ページ上部に「プッシュ通知設定」というリンクがあります。

スクリーンショット 2016-03-06 22.44.44

これをクリックすると・・

スクリーンショット 2016-03-06 22.45.24

こんな風にモーダルウィンドウが出てWebプッシュ通知の受け取り設定ができます。このモーダル周りはPushnateの機能ではなく、ICS MEDIA様のほうで作られたものですね。Pushnateのプッシュ受け取りの設定画面はまだちょっと寂しげなので、この例のように、どんな情報が届くのかを事前に伝えるのは非常に良い例だと思います。

少し実装に手間がかかってしまいますが、ぜひご参考ください!