# AMPサポート

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

## 統合手順

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

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

* [pushly-amp-helper-frame.html](https://cdn.p-n.io/amp/examples/pushly-amp-helper-frame.html)
* [pushly-permission-dialog.html](https://s3.amazonaws.com/cdn.p-n.io/amp/examples/pushly-amp-permission-dialog.html)
* [pushly-amp-styles.html](https://cdn.p-n.io/amp/examples/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\` タグを含めてください。

{% hint style="warning" %}
ステップ 1 で配置した各ファイルへの URL が最終スニペットで正確であることを確認してください。&#x20;
{% endhint %}

```
<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: ウィジェットを追加する

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

{% hint style="info" %}
これらのウィジェットは、記事の段落の間や、各記事の下部に配置することを推奨します。
{% endhint %}

#### 購読ボタン

```
<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` および `購読/購読解除` ボタンが存在すること。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.pushly.com/pushly-ja/integration/webpusshu/sdk/amp-support.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.