範例：橫幅廣告 - amp.dev

橫幅廣告
- 簡介設定基本用法

簡介

這個範例示範如何實作簡單的橫幅 AMPHTML 廣告。一般而言，AMPHTML 廣告應為有效的 AMP 文件。

這段程式碼代表應作為回應傳回的 body，該回應透過 amp-ad 元件或在任何其他情況下我們想要傳回 AMPHTML 廣告時啟動。

這個範例包含一個影像和一個呈現追蹤像素，分別使用 amp-img 和 amp-pixel 元件實作。

設定

作為任何其他 AMP 文件的一部分，我們匯入標準樣板以使其成為有效的 AMP 文件。

<meta name="viewport" content="width=device-width">

基本用法

橫幅廣告的組成結構是一個帶有連結到廣告商頁面的圖片。我們使用 amp-img 顯示廣告素材的圖片。

<a target="_blank"
   href="https://amp.dev.org.tw/documentation/examples/style-layout/banner_ad/index.html">
  <amp-img src="https://amp.dev.org.tw/static/samples/img/amp-300x250.jpg"
            width="300"
            height="250"
            layout="responsive"
            alt="a4a image"></amp-img>
</a>

我們加入一個追蹤像素，以記錄廣告已使用 amp-pixel 呈現。

或者，可以使用 amp-analytics 來啟用更全面的衡量活動。

<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>

需要更多說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。

在 GitHub 上編輯範例

由 @sebastianbenz 撰寫