Webプッシュ通知の購読を求めるタイミングや方法をカスタマイズしたい

Push7では、Webサイトのユーザーに対して購読を促す手段を複数用意しています。このページでは、そのタイミングや方法をカスタマイズする方法についてご紹介します。

このページの内容は、Push7 SDKが導入されていることが前提となります。詳しくは「SDK導入」をご覧ください。

Push7 ボタン

ボタンは、ユーザーに購読を促す最も一般的な手段です。ボタンをクリックすると、Nativeモードの場合は購読ダイアログを表示し、Normalモードの場合は購読ページに遷移します。

ボタンを設置するには、Push7 Dashboardを開き、アプリケーションを選択します。サイドバーより「タグ」をクリックし、「ボタン」タブよりタグを生成してください。ボタンを設置したい場所にコードをコピーすれば、設置が完了です。

ボタンの見た目をカスタマイズすることも可能です。詳細は「独自デザインの購読ボタンは利用できますか？」をご参照ください。

Push7 BOX

BOXは、画面を覆いかぶせるように表示されるダイアログです。購読ボタンが押された場合、ボタンと同じようにNativeモードの場合は購読ダイアログを表示し、Normalモードの場合は購読ページに遷移します。

BOXを設定するには、ダッシュボードから「タグ」→「BOX設定」と進んでください。必要に応じて文言をカスタマイズし、保存するとSDKを導入したWebサイトに表示されるようになります。

自動購読/手動購読

Nativeモードでのみ使用できる機能です。

購読ページへの遷移なしに購読が可能なNativeモードでは、ユーザーがWebページを開いた段階でブラウザの購読ダイアログを表示することができます。

ダッシュボードの指示に従ってNativeモードを導入すると、自動で購読されるように設定されます。

p7.init("appno",{
  mode:"native",
  subscribe:"manual"
});

ボタンやBOXなど、その他のタイミングで購読ダイアログを表示したい場合には上記コードのようにsubscribeオプションをmanualに設定してください。

特定位置までのスクロールにて購読

Nativeモードかつ手動購読の場合のみ使用できる機能です。

ユーザーが特定の位置までスクロールした場合（例:記事を読み終え、共有ボタンが表示されたとき）に購読ダイアログを表示することができます。

p7.init("appno",{
  mode:"native",
  subscribe:"manual",
  subscribe_at:"#after-content"
});

この機能を利用する場合、上記のようにsubscribe_atオプションを加えてSDKを初期化してください。上記の場合、IDにafter-contentを持つ要素が画面内に表示された段階で購読ダイアログが表示されます。

subscribe_atオプションは1つまたは複数のCSSクエリ、そして1つまたは複数のHTMLElementを受け付けます。動的に要素を設定したい場合には

const elements = document.querySelectorAll("<some query>")
p7.init({
  appno: "appno",
  mode: "native",
  subscribe: "manual",
  subscribe_at: elements
})

のように、JavaScriptのHTMLElement, NodeListを渡すことが可能です。