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、應該投放的廣告或廣告定位選項。這些選項可以使用 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 元件的參考文件。

注意 – 不允許在 AMP 文件中執行廣告聯播網提供的 JavaScript。相反地，AMP 執行階段會從不同的來源 (透過 iframe 沙箱) 載入 iframe，作為 AMP 文件，並在該 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 的資訊。

上一章 下一章