はじめに

本マニュアルでは、WEBプッシュ通知の許諾を求めるためのボタンの設置について説明します。

通知許諾ボタンについて

通常、ウェブサイトがユーザーにWEBプッシュ通知の許諾を求める際には、PUSHCODEのブラウザの通知許諾ポップアップ、もしくは通知許諾ポップアップを表示します。

ブラウザ通知許諾ポップアップ

PUSHCODE通知許諾ポップアップ

一方で、通知許諾ボタンを設置することも可能です。

通知許諾ボタンを利用する場合、ユーザーがウェブサイトにアクセスした際にポップアップは表示せずに、ユーザーが任意のタイミングで通知を許可することができます。

通知許諾ボタンの設置方法

通常の導入プロセスは、通知許諾ポップアップを表示する手順ですので、画像のタグは設置せず、代わりに下記の2つのタグを設置してください。

1. JavaScriptタグ

以下のタグをHTMLソースの</head>タグの直前やGoogle Tag Managerに追加してください。

{DOMAIN_TOKEN}には、上記画像の赤枠の値を記載ください。

<script defer src="https://www.pushcode.jp/dist/js/pushcode.js"></script>
<script>
window.PushCodeInit = function() {
  try {
    if (PushCode && PushCode.isSupport()) {
      PushCode.init({ domainToken: '{DOMAIN_TOKEN}', userid: '' });
    }
  }
  catch (err) {
    console.error(err);
    if (PushCode) {
      PushCode.sendError(err);
    }
  }
};
window.addEventListener('load', function() {
    var button = document.getElementsByClassName('pushcode-handler');
    for (var i = 0; i < button.length; i++) {
        button[i].addEventListener('click', function () {
            PushCode.requestPermission();
        });
    }
});
</script>

2. HTMLタグ

以下のタグをHTMLソースのボタンを設置箇所に追加してください。

デザインに任意で変更ください。

<button type="button" class="pushcode-handler">サイトから有益な情報をお届けします</button>