ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

AMPページにWeb プッシュ通知購読ボタンを設定する方法

AMPページにWeb プッシュ通知購読ボタンを設定する方法

AMPのコンポーネント amp-web-pushを使用するとプッシュ通知購読機能をAMPページに搭載することができます。プッシュ通知サービスプロバイダー OneSignalは、AMPページでのプッシュ通知購読機能をサポート(提供)しています。

OneSignal Webプッシュ通知購読機能をAMPページに設定する方法

現時点ではAMPのWebプッシュ通知購読機能は、Androidのみ対応可能です。iOSに関しては、まだサポートされていません。以下は、OneSignalのAMP Webプッシュのデモです。

特定のAMP化プラグイン、AMP対応WordPress テーマでの設定方法

WordPress プラグイン AMP for WPを使用してAMP化しているサイトの場合、本記事で紹介する方法ではなく、プラグインの設定の方で簡単に対応可能です。
プラグイン AMP for WPとOneSignal プッシュ通知の連携方法

WordPress テーマ CocoonでAMP化を行なっている場合の設定方法は以下の記事をご覧下さい。

事前に必要な作業

OneSignalのアカウントとサイトのWeb プッシュ アプリ IDが設定で必要となります。アカウントの作成や通常ページでのプッシュ機能の設定方法とAPP IDの取得方法は、以下の記事を御覧下さい。

WordPress サイトにプッシュ通知機能を搭載する方法

AMP Web Push スクリプトの設置

以下のスクリプトコードを AMP ページ <head>タグ内に設置します。

<script async custom-element=”amp-web-push” src=”https://cdn.ampproject.org/v0/amp-web-push-0.1.js”></script>

AMPページの<head>タグ内にコードを設置する方法は、AMP化している方法(プラグインやテーマ)によって異なります。AdSenseのAMP 自動広告のコードの<head>タグ内への設置方法と同じです。(<body>タグ直後に設置するコードについては、後で紹介します。)

SimplicityにAdSense AMP 自動広告を設定する方法

CocoonにAdSense AMP 自動広告を設定する方法

AMP for WordPress でAMP化したページにAdSense 自動広告を設置する方法

AMP Web プッシュ通知拡張機能の設定

以下の二つのAMPプッシュ通知設定用のファイルをダウンロードして、サイトのルートにアップロードします。

続いて、以下のコードのYOURDOMAIN.COMを設定するサイトのドメインに置き換え、YOUR-APP-IDにOneSignalのWebプッシュアプリのIDに変更した後、AMPページの<body>タグ内(<body>の直下)に設置します。<body>タグへのコードの設置方法は、上で紹介したAdSense AMP 自動広告コードの設置方法で紹介したページなどをご参照下さい。

ウィジェットの設定

AMPページでのプッシュ通知購読ボタンと購読解除メッセージの表示を行うウィジェットを、AMPページに設置します。ウィジェットの設置位置は、以下の様なユーザーエクスペリエンス、ユーザーフローの理由から記事下(メインコンテンツの後)が推奨されています。

  1.  ウィジェットは、AMPの仕様上、スペースが予め必要となります。購読済みのユーザーに対しても、ウィジェットのスペースを埋めて表示することはできません。ウィジェットをページ上部などに設置すると、購読中、非購読を問わずすべてのユーザーに対してウィジェットが表示され、余分なスクロールを強いることになります。
  2.  サイトやコンテンツの価値をユーザーが理解した上で、プッシュ通知の購読を尋ねるのが妥当な流れです。記事の終わりに購読、非購読のボタンを設置するのは、ユーザーにとって自然な位置です。
  3. デフォルトのAMP Webプッシュ通知 ウィジェットは、デフォルトではプッシュ通知購読ボタン、購読済みのユーザーには購読を止めるメッセージが表示されます。ボタンが記事の上や途中にあると誤タップする可能性があります。

以下のコードをAMPページの<head>タグ内(通常CSSの場所)に設置します。


以下のコードを購読・非購読のボタンを表示する位置に設定します。位置は、記事下が推奨です。設定方法は、WordPressの場合は、テキストウィジェットなどを使用します。(記事下に広告コードを設置する方法と基本的に同じです。)


上のコード内の「プッシュ通知を購読する」、「プッシュ通知を非購読する」のメッセージはお好みに合わせて変更して下さい。

AMP ページの記事下に以下の様にボタンが表示されます。

AMP ページ 記事下のプッシュ通知購読ボタン表示例

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!