> For the complete documentation index, see [llms.txt](https://documentation.pushly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.pushly.com/pushly-ja/integration/webpusshu/sdk/amp-support.md).

# AMPサポート

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

{% 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.