透過廣告從 AMP 網頁營利
本指南提供在 AMP 網頁上顯示廣告的相關操作說明和最佳做法。
在網頁中加入廣告
在非 AMP 網頁 (傳統 HTML) 中,如果您想在網頁上顯示廣告,您可以加入 JavaScript 程式碼片段,以便從您的廣告聯播網放送廣告。基於效能和安全考量,您無法在 AMP 網頁中加入第三方 JavaScript。因此,若要在 AMP 中顯示廣告,您需要將自訂 amp-ad
元件新增至您的 AMP 網頁。
接下來,我們將逐步說明新增元件的步驟,方便您在 AMP 網頁上顯示廣告。
步驟 1:加入 amp-ad 指令碼
amp-ad
元件是 AMP 程式庫的自訂廣告擴充功能。amp-ad
的底層是經過精心設計的自訂 JavaScript,可最佳化效能。如要執行 amp-ad
元件,您必須在 AMP 網頁的 head
區段中加入這個元件的必要 JavaScript
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
步驟 2:將 amp-ad 標記加入您的 AMP 網頁
超過 100 多個廣告伺服器和聯播網提供與 AMP 的內建整合功能。如要為指定的廣告聯播網加入廣告,請加入 amp-ad
標記,並在 type
屬性中指定聯播網。
在這個範例中,我們將加入廣告版位,以便從 a9 聯播網放送廣告
<amp-ad type="a9">
</amp-ad>
步驟 3:指定廣告單元尺寸
將 width
和 height
屬性加入 amp-ad
標記。這會指定廣告在 AMP 網頁上的尺寸
<amp-ad type="a9">
width="300" height="250"
</amp-ad>
步驟 4:設定廣告聯播網參數
每個聯播網都有放送廣告所需的特定資料屬性。請參閱廣告聯播網的 amp-ad
文件,並加入所需的屬性。在下列範例中,a9 聯播網需要其他參數來指定廣告尺寸和其他詳細資訊
<amp-ad type="a9"
width="300" height="250"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
步驟 5:(選用)指定預留位置
您可以視廣告聯播網而定,選擇顯示預留位置,直到廣告可供觀看為止。這樣做可以避免出現空白空間,進而提供更優質的使用者體驗。如要指定預留位置,請加入含有 placeholder
屬性的子元素。詳情請參閱預留位置和備用廣告。
<amp-ad type="a9"
width="300" height="250"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<amp-img placeholder src="placeholder-image.jpg"></amp-img>
</amp-ad>
步驟 6:(選用)指定備用廣告
您可以視廣告聯播網而定,選擇在沒有可放送的廣告時顯示備用元素。如要指定備用廣告,請加入含有 fallback
屬性的子元素。詳情請參閱預留位置和備用廣告。
<amp-ad type="a9"
width="300" height="250"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<amp-img fallback src="fallback-image.jpg"></amp-img>
</amp-ad>
恭喜您!您現在已在 AMP 網頁上放送廣告!
放送直接銷售的 AMPHTML 廣告
amp-ad
元件會放送您指定的聯播網廣告。這些廣告可以是標準 HTML 廣告或 AMPHTML 廣告,前提是廣告聯播網支援 AMPHTML 廣告。如要將直接銷售的廣告放送為 AMPHTML 廣告,請按照 AMPHTML 廣告規格 需求,以 AMP HTML 格式建立廣告,並使用放送 AMPHTML 廣告的廣告伺服器。
擴增廣告請求的指定目標資料
Real-Time Config (RTC) 功能是 Fast Fetch 放送機制的一部分,可讓發布商擴增廣告請求,加入在執行階段擷取的第一方和第三方指定目標資訊。RTC 允許每個廣告版位最多呼叫指定目標伺服器 5 次,結果會附加到廣告請求中。如要在廣告中使用 RTC,您使用的廣告聯播網必須支援 RTC 和 Fast Fetch。
您可以觀看這部 YouTube 影片,進一步瞭解 RTC
或者,從這些 RTC 資源瞭解詳情
最佳做法
以下是一些訣竅,可最大程度提升 AMP 網頁上廣告的效益
版位和控制項:最佳化廣告版位
- 在 AMP 網頁上放置與非 AMP 網頁相同數量的廣告,以產生每頁最高收益。
- 將第一則廣告放置在第一個可視區域下方 (「首頁下方」),以提供最佳使用者體驗。
- 除非您使用進階 CSS 或媒體查詢,否則請務必讓廣告單元在網頁上置中,以便為使用者提供最佳行動版網頁體驗。
- 在您的 AMP 廣告空間中啟用多尺寸廣告請求,以提高廣告競價壓力並增加收益。
需求與定價:為您的廣告取得合適的價格
- 在所有銷售管道 (包括直接和間接管道) 中銷售 AMP 網頁上的廣告單元,盡可能提高 AMP 網頁廣告空間的競爭力。
- 為 AMP 網頁上的廣告空間定價,使其與非 AMP 網頁上的廣告空間類似。監控成效並據此調整定價。
- 確保所有廣告需求管道都參與競爭 AMP 網頁上的廣告空間,以提高競爭力。
廣告類型:放送最佳廣告類型
- 避免使用過於繁重的素材,請參閱 IAB 指南。
- 避免使用插頁式廣告或其他會在廣告載入時導致內容重新排版之廣告格式。
- 最佳化可視度,將 data-loading-strategy 設定為 prefer-viewability-over-views。
- 透過支援的播放器或
amp-iframe
將廣告放置在您的影片內容中,以便在所有類型的內容中實現收益。 - 導入原生廣告,以便使用多尺寸廣告請求與展示廣告競爭,在增加需求壓力的同時,為讀者提供優質的使用者體驗。