AMP サポート

AMP ページ経由で訪問者に Web プッシュの許可を求めることもできます。

Web Push の AMP サポートは、ユーザー体験が不十分で、オプトイン率も低いため推奨されません。

統合手順

ステップ 1: 必要なファイルをダウンロードして配置する

以下のファイルをダウンロードしてください:

• pushly-amp-helper-frame.html

• pushly-permission-dialog.html

• pushly-amp-styles.html

の pushly-amp-helper-frame.html および pushly-amp-permission-dialog.html ファイル内で、 REPLACE_WITH_DOMAIN_KEY というプレースホルダーテキストをプラットフォームのドメインキーに置き換えてください。

3つのファイルをすべて、訪問者にオプトインを求めるドメイン上の公開アクセス可能なディレクトリに配置してください。

ステップ 2: AMP Project の JavaScript を含める

HTML の head セクション内で、AMP ページに以下の script タグを含めてください。AMP ページにメインの Pushly SDK スニペットが含まれていないことを確認してください。

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

ステップ 3: `amp-web-push` コンポーネントを含める

AMP ページの HTML body 内に、以下の `amp-web-push` タグを含めてください。

ステップ 1 で配置した各ファイルへの URL が最終スニペットで正確であることを確認してください。

<amp-web-push
   id="amp-web-push"
   layout="nodisplay"
   helper-iframe-url="https://www.example.com/pushly-amp-helper-frame.html"
   permission-dialog-url="https://www.example.com/pushly-amp-permission-dialog.html"
   service-worker-url="https://www.example.com/pushly-sdk-worker.js"
"></amp-web-push>

ステップ 4: ウィジェットを追加する

購読ウィジェットと購読解除ウィジェットを表示したいページ上の任意の場所に、以下のコードブロックを追加してください。

これらのウィジェットは、記事の段落の間や、各記事の下部に配置することを推奨します。

購読ボタン

<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>

購読解除ボタン（オプション）

<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
  <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">更新の購読を解除</button>
</amp-web-push-widget>

カスタマイズ

以下を確実に満たす限り、CSS とウィジェットをカスタマイズできます。 amp-web-push-widget および 購読/購読解除 ボタンが存在すること。