Webサイトを運営する上で顧客へのリーチ手段をどうしているかということを軽く振り返り、その上でWebPushを導入してみた事例紹介

1. 顧客リーチ手段再考
エムスリー株式会社 岩佐 淳史

2. 自己紹介
● 2015/04/01 エムスリー入社
○ m3.comアプリ (iOS/swift)
○ PCサイトフロント www.m3.com (scala/play, java/spring)
○ SPサイトフロント sp.m3.com (scala/play, java/SAStruts)
○ アプリバックエンド api.m3.com (java/SAStruts)
○ 各種バックエンド (scala/play, java/xxx)
● 入社以前
○ iOSアプリ開発 (Objective-C)
○ Androidアプリ開発 (Java)
○ 機械学習 (mathematica, R言語, C++)
○ 組み込み (Toppers, V850アセンブラ, C, C++)
○ Windowsアプリ開発 (C#, C++/cli, C++/MFC)

3. アジェンダ
● 顧客リーチ手段
● WebPush実装

4. 顧客リーチ手段
● メール
● DM
● Push通知
○ アプリPush
○ WebPush
● 検索エンジン
● 広告
● ソーシャルメディア
● etc...

5. Copyright © 2015 M3, Inc. All rights reserved. 5
m3.com
・m3.com：
医療従事者専用の「プラットフォーム」
・25万人以上（日本の約80％）の医師会員
が利用。最新の医療ニュース、クイズ、
取材コンテンツ、医師同士のQ&Aサービ
ス等、会員制総合医療情報サービス
・「MR君」：製薬会社からの医薬品情報を
オンラインで受け取り、多忙な医師の時間
効率化に貢献
・iOS、Android版も絶賛開発中

6. 弊社サイトへの流入数/day
* 2つの経路から流入した場合は重複カウントされている
メール 約 48%
広告 約 0.2%
検索エンジン/直接アクセス 約 36%
APP 約15%

7. それぞれでやっている施策
● メール -> 登録訴求, A/Bテスト, パーソナライズ
● 広告 -> 約0.2%と少ないのでスルー
● 検索エンジン -> SEO対策(今回はパス)
● APP -> インストール促進, Push通知

8. ニュースメルマガの件名テスト
● 一部の事前テストユーザーに対して3つの件名でA/Bテストを実施し、最もクリック
率が高いテスト結果内容を残りの本配信ユーザーに配信

11. Push通知 〜受信許可率〜
現状の受信許可率
● 向上するようにダイアログを出したり
● 通知をONにしたらインセンティブを与えたり
SP WebPush 約70%
APP iOS 約72%
APP Android 約71%

12. Push通知 〜開封率〜
現状の開封率
● 現状は何もできていない
(以前、パーソナライズしようとして失敗した
A/Bテストをやるにしてもメルマガに比べて現状ではパイが小さいので後回し)
SP WebPush 約11%
APP iOS 約0.6%
APP Android 約5%

14. まとめ
1. そもそもの母数を増やす
2. 十分に母数が増えた後は反応率を上げる施策を実施する

15. Web Push

17. 目的
メールやアプリプッシュ通知と同様の「新しい飛び道具」を追加することにより、m3.com
会員のさらなるアクティブ化をはかりm3.com全体利益貢献増を狙う。

18. 効果(予定)
xxx人(想定最大来訪者数)
*
4%(WebPushに対する反応率 <- アプリプッシュ等からの想定値)
*
365日(1年)
*
yyy円(1来訪あたりの想定利益値)
=
zzz億円(予定)

19. アジェンダ
1. 全体構成
2. ウェブアプリの実装
3. サービスワーカーの実装
4. アプリケーションサーバの実装
5. プッシュサーバーの例
6. 使い方

20. 全体構成
プッシュ
サーバ
アプリケーショ
ン
サーバ
ブラウザ
1. 購読要求
2. URL
(エンドポイント)
3. URL + 鍵
(エンドポイント)
4. URL(エンドポイント)
に暗号化したペイロードを
POST
5. PUSH!

21. ブラウザの実装
1. プッシュ通知の登録
a. ブラウザのserviceWorkerからendpointを取得する
b. アプリケーションサーバに endpointを通知する
2. 受信時の処理を登録
a. ブラウザのserviceWorkerのpushイベントリスナとして実装する
Pushイベントリスナの例
self.addEventListener('push', function(evt) {
evt.waitUntil(
self.registration.showNotification(
'(プッシュ通知に表示するタイトル )', {
icon: '(アイコンのURL(パスのみでOK))',
body: '(プッシュ通知に表示する説明テキスト )',
tag: '(識別用の適当なタグ ("tag", "notification", 等)',
vibrate: [400,100,400] // ミリ秒単位で振動と休止の時間を
交互に任意の回数だけ配列に格納
}));}, false);
APサーバからPOSTされるJSONの例
{
"title": "Push Message",
"body": "プッシュ通知にメッセージを付けて送ることが出
来ましたよ",
"tag": "pushMessage201512080001"
}

22. サービスワーカーの登録
1. window.navigator.serviceWorker.register(‘/sw.js’, {scope: ‘/’});
Promise<ServiceWorkerRegistration>
* serviceWorkerは設置しているパス配下でしか登録できないので注意
(/javascripts/sw.js とかに配置すると/javascripts/配下からしか登録できない)

23. 2. Notification.permission !== ‘denied’ をチェックする
(ブロックされていると ‘denied’ になっている)
3. window.navigator.serviceWorker.ready.then
Promise<ServiceWorkerRegistration>を取得する
4. Notification.requestPermission で通知の許可を求める
Promise<String>
ブロック -> ’denied’
許可 -> ‘granted’

24. 5. 通知するためのトークンと鍵を取得する
swr.pushManager.subscribe({userVisibleOnly: true})
Promise<PushSubscription>
endpoint, p256dh(ブラウザの公開鍵(楕円曲線暗号)), auth(秘密の乱数)
6. アプリケーション・サーバーにPOSTする
* 最新のブラウザ前提なのでfetch APIが使える (byebye jQuery)
7. サーバに登録した結果を保存しておく
* 最新のブラウザ前提なのでローカルストレージが使える (byebye cookie)

25. サービスワーカーの実装
1. self.addEventListener(‘push’, function(event) {});
Push通知が届いた時の処理を記述
Ex. self.registration.showNotificationで通知を表示できる
2. self.addEventListener(‘notificationclick’, function(event) {});
Push通知をクリックされた時の処理を記述
Ex. event.notification.close()で通知を閉じる
clients.openWindow(‘https://www.m3.com’)でURLを開ける
* Promiseを返すように実装して、event.waitUntilしないと処理が終わる前に強制
終了させられるので注意。よって、webStorageのような同期型APIのコールは実行
できない

26. 通知クリック時のイベントリスナの例
self.addEventListener("notificationclick", function(event) {
event.notification.close();
clients.openWindow("/");
}, false);

27. サービスワーカーのデバッグ上の注意
● HTTPSが必須
ex. Node.jsであれば require(‘https’)してkeyとcertを提供する
その後キーチェーンに追加(macの場合)

28. アプリケーションサーバの実装
1. ブラウザからエンドポイントと鍵を受け取る(maybe with loginId, UA)
2. エンドポイントに対してJSONをPOST
* ただし、受け取った公開鍵とauthで暗号化する必要性がある
* なお、暗号化処理はpushのペイロードが無しであれば不要
その場合は、ペイロードにはデータは載せずに、サービスワーカーがfetch APIを用
いてサーバーにデータを問い合わせるように実装する

29. プッシュサーバ
GCM(Chrome) -> manifestが必要
ex. sp.manifest.json {"name": "m3.com", "short_name": "m3.com", "icons":
[{"src":"https://s.m3img.com/atlas/1.0.0/images/favicon/android-chrome-192x192.png", "sizes":
"192x192", "type": "image/png" }],
"display": "standalone", "start_url": "https://sp.m3.com", "gcm_sender_id": "856748432996"}
<link rel="manifest" href="${at("/manifest/sp.manifest.json")}" />
FCM(Chrome 52以降)
Simple Push(Firefox)