AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

新增擴充的 AMP 元件

AMP 的元件系統讓您能以最少的力氣，快速地在文章中建構有效率且具回應性的功能。AMP HTML 程式庫將 AMP 元件分為三類：

  • 內建：這些元件包含在基礎 AMP JavaScript 程式庫 (於 <head> 標記中指定) 中，例如 amp-img 和 amp-pixel。這些元件可以直接在 AMP 文件中使用。

  • 擴充：這些是基礎程式庫的擴充功能，必須以自訂元素的形式明確包含在文件中。自訂元素需要特定的指令碼，這些指令碼會新增至 <head> 區段 (例如，<script async custom-element="amp-video...)。

  • 實驗性：這些元件已發布，但尚未準備好廣泛使用。開發人員可以選擇加入使用這些功能，然後再全面發布。如要瞭解詳情，請參閱實驗性功能。

我們的範例已使用內建元件 amp-img，而且我們在「將 HTML 轉換為 AMP」教學課程中探討過該元件與 AMP 版面配置系統的關聯性。現在，讓我們將一些常用的擴充 AMP 元件新增至新聞報導中。

透過廣告營利

AMP 中的廣告是使用 amp-ad 元件建構而成。amp-ad 元件可讓您以多種方式設定廣告，例如寬度、高度和版面配置模式。不過，許多廣告平台需要額外的設定，例如廣告聯播網的帳戶 ID、要放送的廣告，或是指定廣告目標的選項。這些選項很容易在 amp-ad 元件中使用 HTML 屬性來指定。

請參考這個 DoubleClick 廣告範例

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

如您所見，這是一個非常簡單的設定。請注意 type 屬性，它會告知 amp-ad 元件我們要使用的廣告平台。在本例中，我們要使用 DoubleClick 平台，因此我們將 doubleclick 指定為值。

data-slot 屬性更為獨特。在 amp-ad 中，任何以 data- 開頭的屬性都是供應商專屬屬性。這表示並非所有供應商都一定需要這個特定屬性，也未必會在提供此屬性時做出反應。例如，比較上方 DoubleClick 的範例和以下來自 A9 平台的測試廣告

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

試著將上述兩個範例都新增到文章中，就在 <header> 標記之後。

請記住，並非所有元件都包含在核心 AMP 程式庫 JavaScript 檔案中。我們需要為廣告元件加入額外的 JavaScript 要求。

將下列指令碼新增到 <head> 標記中

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

重新整理頁面，您應該會看到兩個測試廣告

測試廣告

重要事項 - 您的開發人員主控台中可能會出現一些錯誤，例如 Mixed Content 或 XMLHttpRequest cannot load。前一個錯誤可能與 A9 廣告有關，因為並非它載入的所有內容都是安全的。這是 AMP 上放送的所有廣告都必須符合的重要規定。

下方的兩個 amp-ad 示範了 amp-ad 在支援廣告平台功能方面提供的彈性。在本例中，我們 (使用 DoubleClick 的資訊主頁) 設定了兩個 DoubleClick 測試廣告，使其僅在特定國家/地區顯示 - 第一個只會在英國顯示，第二個只會在美國顯示。試著將這兩個地理位置鎖定廣告設定新增到您稍早新增的廣告下方的 AMP 文件中

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

重新整理頁面並查看。以下螢幕截圖是在加拿大拍攝的，因此兩個廣告都未載入

測試廣告

注意 - 您可能會注意到這些 amp-ad 標記內還有其他 div 標記，且這些標記具有名為 fallback 的屬性。您能猜到 fallback 屬性表示什麼嗎？它會通知 AMP 的載入系統，只有在父元素載入失敗時才顯示該元素的內容。如要瞭解詳情，請參閱預留位置和回溯。

繼續閱讀 - 如要查看最新支援的廣告聯播網，請參閱 amp-ad 元件的參考文件。

注意 - 不允許在 AMP 文件內執行任何廣告聯播網提供的 JavaScript。AMP 執行階段會從與 AMP 文件不同的來源 (透過 iframe 沙箱) 載入 iframe，並在該 iframe 沙箱內執行廣告聯播網的 JS。

我們的 AMP 文件現在包含文字、圖片和嵌入在網頁上的廣告，這些都是講述故事和將內容營利化的關鍵要素。不過，現代網站通常包含比圖片和文字更多的功能。

讓我們將 AMP 文件提升到新的層次，並新增新聞報導中常見的更進階網路功能，例如

  • YouTube 影片
  • 推文
  • 文章引述

嵌入 YouTube 影片

讓我們試著將 YouTube 影片嵌入到文件中。將下列程式碼新增到 AMP 文件中的 <header> 之後 (在您剛新增的 amp-ad 上方)

<amp-youtube
  data-videoid="npum8JsITQE"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

重新整理頁面。您會看到文字，而不是影片：「影片無法載入。」

即使您的瀏覽器可以毫無問題地顯示 YouTube 影片，您仍然會收到這個錯誤。為什麼？影片實際上並未載入失敗，而是元件本身失敗。

請記住，並非所有元件都包含在核心 AMP 程式庫 JavaScript 檔案中。我們需要為 YouTube 元件加入額外的 JavaScript 要求。

注意 - 如果您仍然開啟開發人員主控台，且網址中有 #development=1，您會在此時看到 AMP 驗證器錯誤，提醒您加入 amp-youtube JavaScript，以及指向文件的連結，其中會告訴您要加入的 script 標記。

將下列指令碼新增到 <head> 標記中

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

重新整理頁面，您應該會看到 YouTube 影片

嵌入的 Youtube 影片

如同網頁上的其他元素，我們指定了影片的 width 和 height，以便 AMP 版面配置系統可以計算長寬比。此外，我們將 layout 設定為 responsive，因此影片會填滿其父元素的寬度。

如要進一步瞭解如何嵌入 YouTube 影片，請參閱 amp-youtube 元件文件。如要查看更多影片和媒體元件，請查看媒體 AMP 元件清單。

提示 - 如果元件載入失敗，或瀏覽器不支援元件，請使用 fallback 屬性來通知使用者。

顯示推文

在新聞報導中，嵌入 Twitter 的預先格式化推文是一項常見功能。amp-twitter 元件可以輕鬆提供此功能。

首先，將下列 JavaScript 要求新增至文件的 <head> 標記

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

現在，在文章中新增此程式碼以嵌入推文

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

data-tweetid 屬性是特定平台需要的另一個自訂屬性範例。在本例中，Twitter 會將 data-tweetid 屬性的值與特定推文建立關聯。

重新整理瀏覽器並查看網頁。您應該會看到推文出現

嵌入的推文

如要進一步瞭解如何嵌入 Twitter 推文，請參閱 amp-twitter 元件文件。

提示 - AMP 提供更多元件，可讓您嵌入來自社群網路的內容。請參閱最新的社群 AMP 元件。

醒目提示文章引述

新聞報導中的常見功能是醒目提示文章中特別吸引人的文字片段。例如，可能會以較大的字型重複引述特定來源的語句或重要事實，以吸引讀者的注意。

不過，並非所有文字片段的字元長度都相同，這可能會讓較大的字型大小難以與文字在網頁上佔用的空間取得平衡。

AMP 提供了另一個專為這種情況設計的元件，稱為 amp-fit-text 元件。amp-fit-text 元件可讓您定義固定的寬度和高度元素，以及最大字型大小。元件會智慧型地縮放字型大小，以符合可用寬度和高度內的文字。

讓我們試試看。首先，將元件的程式庫新增到 <head> 標記中

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

將下列程式碼新增至網頁

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

重新整理頁面並查看結果！

現在，進一步實驗。如果引述短得多，會發生什麼事？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Hello!
</amp-fit-text>

或者，如果引述更長，又會發生什麼事？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon’s that is dreaming, And the lamp-light o’er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

作為 amp-fit-text 的最後一個實驗，試著建立一小段文字，例如「Hello」，並使用更大的高度 (例如，值為 400)，並維持 max-font-size 屬性值為 42。產生的頁面會是什麼樣子？文字是否垂直置中？或者，amp-fit-text 標記的高度是否會縮小以符合最大字型大小？根據您已知的 AMP 版面配置系統，試著在玩程式碼之前回答這個問題！

您可以從AMP by Example 的即時示範中進一步瞭解 amp-fit-text。

上一章 下一章