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 的資訊。

上一章 下一章