AMP
繁體中文
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、應放送哪個廣告，或是指定廣告目標的選項。這些選項可以透過 HTML 屬性，輕鬆地在 amp-ad 元件中指定。

請參考以下 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 元件的參考文件。

注意 – 不允許任何廣告聯播網提供的 JavaScript 在 AMP 文件內執行。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。

上一章 下一章