「プッシュ通知(WEBプッシュ)」について※有料契約者向け

最終更新日:

プッシュ通知(WEBプッシュ)とは

※プッシュ通知登録のご依頼は有料契約者様のみ受け付けております。

カスタマーのブラウザに直接メッセージを届けることのできる機能です。SATORIで作成したセグメント単位でのメッセージ通知が可能です。サイト訪問者から通知許可(オプトイン)を獲得するだけで、訪問者が自社サイトを訪れていなくても、ブラウザが開かれている状態であれば、ブラウザにメッセージが送れるようになります。オプトインはサイト上で表示されるダイアログ上で「許可」を押すだけです。アプリは対象外となります。

例)プッシュ通知(WEBプッシュ)イメージ

______.png

WindowsのChromeでSATORI社のサイト閲覧中に、オプトインしているグルメに関する
サイトからのプッシュ通知(WEBプッシュ)が表示

目次

  • 事前に必要な設定
    -プッシュ通知(WEBプッシュ)サイト登録
    -設置用コード/タグの取得と設定
  • プッシュ通知(WEBプッシュ)作成手順
  • 設定したプッシュ通知(WEBプッシュ)の確認
  • 対応ブラウザ
  • カスタマーがプッシュ通知(WEBプッシュ)を受け取るための条件
  • FAQ

事前に必要な設定

-プッシュ通知(WEBプッシュ)サイト登録

プッシュ通知(WEBプッシュ)の通知許可を出したいサイトドメインの登録が必要です。
※複数サイトでプッシュ通知をご利用になりたい場合は、それぞれのサイトの登録が必要です。

登録をご希望の場合、下記の内容でこちらのお問合せフォームよりSATORIサポートセンターへご連絡ください。

※HTTPSサイトのみ登録可能です。HTTPサイトは登録できませんので、事前にご確認ください。
※既に依頼済みのサイトと同一ドメインの場合は、弊社への登録依頼は必要ありません。

件名 : プッシュ通知(WEBプッシュ)サイト登録希望

本文 : 下記のサイトでプッシュ通知(WEBプッシュ)の登録を希望します。

アカウントID:登録を希望されるSATORIアカウントID(企業ID)を記入ください
アカウント名:登録を希望されるSATORIアカウント名(企業名)を記入ください

登録希望サイト数:●件

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

サイト名:こちらにサイト名を記入ください(32文字以内)

登録サイトURL:こちらに登録サイトURLを記入くださいHTTPSのみ対応)
正しい記載例:
 https://example.com/
誤った記載例 (以下は登録できません):
 http://example.com/ (https対応していないため)
 https://example.com/directory001/ (ドメイン以下のディレクトリ指定はできません)
 https://example.com/directory002/abcde.html (ドメイン以下のディレクトリ指定はできません)

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

- 設置用コード/タグの取得と設定

  1. 設置用コードの取得
  2. "satori_worker.js"をサーバー内に設置
  3. 通知サイトのソースコードに専用タグを設置 

 

1.設置用コードの取得

①右上の人型アイコンより、「所属企業・組織」を選択

______1.png

 

②右側の︙ボックスをクリックし「プッシュ通知サイト情報」をクリック

______2.png

 

③プッシュ通知サイトとして登録したリストの右側の︙ボックスをクリックし「設置用コードを取得」をクリック

webpush12.png

 

④「STEP1」通知サイトのルートへ設置するコード、「STEP2」通知サイトのソースコードに記述するタグを確認

webpush103.png

 

2."satori_worker.js"を設置

STEP1「通知サイトのルートへ"satori_worker.js"を設置」の下に記載のあるコードをコピーし、satori_worker.jsの名前ファイルを作成します。作成したファイルを通知サイト(申請いただいたドメイン)直下に設置をします。
https://通知サイトURL/satori_worker.jsでアクセスできる必要があります。

webpush104.png

※こちらの設定にはサーバー設定の専門知識が必要になります。専門知識をお持ちの方による設定をお願いします。

 

3.通知サイトのソースコードに専用タグを設置

webpush105.png

通知サイト内に上記のタグを設置します。注意点として、例えばhttps://satori.teamで通知サイトを登録した場合、https://satori.team以外のサイトにはタグを入れないでください。

※通知サイトにはSATORI計測タグと、STEP1の“satori_worker.js"が設置されていることが必須です。

プッシュ通知(WEBプッシュ)作成手順

メニューの場所

アクションセクションを開きプッシュ通知メニューへ進むと表示されます

______6.png

新規プッシュ通知から作成

1.「新規プッシュ通知」をクリック

webpush_new01.PNG

 

2. 通知サイト選択から希望のサイトを選択し、「ターゲット選択へ進む」をクリック

webpush34.png

・この画面上での購読者数とは、通知サイト訪問者の内、WEBサイト上に表示されるダイアログ上で「許可」をクリックした数となります

 

3. プッシュ通知を出したいセグメントを選択し、「通知内容作成へ進む」をクリック

webpush40.png

・セグメントを複数選択した場合は「OR条件」となります。
・セグメントを選択せずに「全ての購読者に通知する」を選択すると、通知サイト訪問者の内、「通知許可」とした訪問者の全てに通知が可能です。
・セグメントごとの購読者数は、「通知許可」とした訪問者の内で、セグメントに該当している訪問者数です。

 

4. プッシュ通知の内容設定

______4.png

入力が必要な項目は以下の通りです。

  • 「タイトル」
    プッシュ通知に表示されるタイトルです。字数制限は50文字です。絵文字は利用できません。
  • 「遷移先URL」
    通知をクリックした際の遷移先です。遷移させたいURLを入力ください。
  • 「メッセージ」
    プッシュ通知に表示されるメッセージです。字数制限は80文字です。絵文字は利用できません。
  • 「表示画像」
    プッシュ通知に表示させる画像です。画像登録は必須です。

右側の通知プレビューで対応ブラウザごとのプッシュ通知のプレビューが確認できます

 

5. 通知オプションの設定と通知

webpush51.png

通知オプションを設定可能です。

  • 「通知を自動で閉じる」
    「ON」にすると購読者のブラウザに通知が表示された後、一定時間経過後に自動で閉じます。閉じるまでの時間はブラウザによって異なります。
    「OFF」にすると自動では閉じません。購読者がプッシュ通知をクローズする等の動作が必要です。ブラウザによっては「OFF」にしても自動で閉じる場合があります。
    ※現在デフォルトでOFFが選択されておりますので、必要な場合はONに切り替えの上設定ください。
  • 「再通知を試みる有効期間」
    オフライン等の理由により購読者に通知が届かなかった場合の再通知の設定を1日~28日の期間で設定が可能です。
  • 「通知予約」
    日付と時間を設定することで通知予約が可能です。
  • 「テスト通知」
    通知をする前に、設定操作をしているブラウザにテスト通知が可能です。

 右下のベルマーク「●●件に通知」をクリックすることで、購読者へプッシュ通知が実行もしくは予約実行がされます。

 

設定したプッシュ通知(WEBプッシュ)の確認

プッシュ通知メニューから確認ができます。
既に配信されたものは「通知済みリスト」、予約しているものは「通知予約リスト」で確認ができます。

「通知済みリスト」ではリストごとに通知内容詳細をクリックすると、「プッシュ通知内容」「通知件数」「クリック数」「通知対象セグメント」「通知サイト」「通知日時」の確認ができます。

webpush73.png

「通知予約リスト」ではリストごとに「予約内容詳細」クリックすると「予約日時」「プッシュ通知内容」「通知予定件数」「通知対象セグメント」の確認ができます。また、予約日時前であれば予約内容を編集、もしくは予約の削除が可能です。

______5.png

対応ブラウザ

現時点での対応ブラウザは以下となっております。ブラウザによって通知の際のデザインが異なります。

デバイス OS ブラウザ
PC

Windows
Mac OS

Chrome
Firefox

Mobile Android Chrome

カスタマーがプッシュ通知を受け取るための条件

  • 対応ブラウザを使用していること
  • 通知を受け取りたい対象のWEBサイト上でオプトインしていること
    (WEBサイト上に表示されるダイアログ上で「許可」をクリックするだけでオプトインされます)

例)WEBサイト上でのオプトイン許可のダイアログ 

  OS Chrome FireFox
PC Windows webpushu100.png webpush102.png

FAQ

FAQ(よくあるご質問)はこちらからご確認ください。

 

 

 

 

 

この記事は役に立ちましたか?

0人中0人がこの記事が役に立ったと言っています