ブロギングライフ

ブログサイト運営関連、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-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://YOURDOMAIN.COM/amp-helper-frame.html?appId=YOUR-APP-ID"
permission-dialog-url="https://YOURDOMAIN.COM/amp-permission-dialog.html?appId=YOUR-APP-ID"
service-worker-url="https://YOURDOMAIN.COM/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
></amp-web-push>

ウィジェットの設定

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

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

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

<style amp-custom>
amp-web-push-widget button.subscribe {
display: inline-flex;
align-items: center;
border-radius: 2px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 10px 15px;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: #4A90E2;
color: white;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

amp-web-push-widget button.subscribe .subscribe-icon {
margin-right: 10px;
}

amp-web-push-widget button.subscribe:active {
transform: scale(0.99);
}

amp-web-push-widget button.unsubscribe {
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
border: 0;
margin: 0;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: transparent;
color: #B1B1B1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>

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

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">
<amp-img
class="subscribe-icon"
width="24"
height="24"
layout="fixed"
src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
</amp-img>
プッシュ通知を購読する
</button>
</amp-web-push-widget>

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">プッシュ通知を非購読する
</button>
</amp-web-push-widget>

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

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

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

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

*
*
* (will not be published.)

Return Top