透過廣告將您的 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 廣告的廣告伺服器。
擴增廣告請求的指定目標資料
做為快速擷取放送機制的一部分,「即時設定」(RTC) 功能可讓發布商利用在執行階段擷取的第一方和第三方指定目標資訊,擴增廣告請求。RTC 允許每個廣告版位最多呼叫指定目標伺服器 5 次,結果會附加到廣告請求中。若要在廣告上使用 RTC,您使用的廣告聯播網必須支援 RTC 和快速擷取。
您可以從這部 YouTube 影片進一步瞭解 RTC
或者,從這些 RTC 資源進一步瞭解
最佳做法
以下是一些訣竅,可讓您盡可能提高 AMP 網頁上廣告的效益
版位與控制項:最佳化您的廣告版位
- 在 AMP 網頁上放置與非 AMP 網頁相同數量的廣告,以產生每頁最高收益。
- 將第一個廣告放置在第一個可視區域正下方 (「首頁下方」),以提供最佳的使用者體驗。
- 除非您使用進階 CSS 或媒體查詢,否則請確保您的廣告單元在網頁上置中,以便為使用者提供最佳的行動版網頁體驗。
- 在您的 AMP 廣告空間中啟用多尺寸廣告請求,以增加廣告競價壓力並提高收益。
需求與定價:為您的廣告取得合適的價格
- 跨所有銷售管道 (包括直接和間接管道) 銷售 AMP 網頁上的廣告單元,以盡可能提高 AMP 網頁廣告空間的競爭力。
- 為 AMP 網頁上的廣告空間定價,使其與非 AMP 網頁上的廣告空間類似。監控成效並據此調整定價。
- 確保所有廣告需求管道都競相爭取 AMP 網頁上的廣告空間,以提高競爭力。
廣告類型:放送最佳類型的廣告
- 避免使用過於龐大的素材,詳情請參閱 IAB 指南。
- 避免使用插頁式廣告或其他會在廣告載入時導致內容重新排版的廣告格式。
- 針對可視度進行最佳化,方法是將 data-loading-strategy 設定為 prefer-viewability-over-views。
- 透過支援的播放器或
amp-iframe
,將廣告放置在您的影片內容中,以便在所有類型的內容中都能營利。 - 實作原生廣告,以便使用多尺寸廣告請求與顯示廣告競爭,在增加需求壓力的同時,為您的讀者提供優質的使用者體驗。