amp-ad-custom

<script async custom-element="amp-ad-custom" src="https://cdn.ampproject.org/v0/amp-ad-custom-0.1.js"></script>

總覽

AMP 範本廣告是提供有效 AMPHTML 廣告的替代方式，無需處理複雜的服務時間驗證和簽署作業。其概念是載入以 AMP 撰寫並從授權 AMP Proxy 伺服器提供的廣告範本，並在用戶端使用從廣告伺服器擷取的 JSON 格式廣告資料來轉譯廣告。

任何廣告聯播網若要提供 AMPHTML 範本廣告，整合作業包含 3 個部分

• AMPHTML 廣告範本建立
• 廣告伺服器變更：廣告服務端點
• AMP 中的廣告標記

AMPHTML 廣告範本建立

廣告聯播網以 AMP 格式建立廣告範本，並將其託管在自己的網域中，與標準 AMP 網頁類似。

例如，adnetwork.com 可以在下列網址託管範本：https://adnetwork.com/amp_template_1.html 對應的 AMP Proxy 網址為：https://adnetwork-com.cdn.ampproject.org/ad/s/adnetwork.com/amp_template_1.html。

廣告聯播網的網域名稱 (來源) 作為命名空間，而網址路徑則作為其 ID。

Proxy 伺服器會在第一次要求時快取範本。它遵循與一般 AMP 網頁相同的過時重新驗證快取政策，表示每次快取命中後，都會在背景中發出同步要求。

為了確保範本是有效的 AMPHTML，廣告聯播網必須向快取網址發出 HTTP 要求，如果無效，則會傳回 4XX 錯誤。這也會暖機快取，進而加快首次廣告載入速度。快取網址可以按照上述規則從標準 AMP 網址轉換而來 (詳細網址格式請參閱此處)。

若要更新範本，廣告聯播網只需要更新網域中的網頁，然後再次發出快取暖機要求即可。

廣告伺服器

廣告聯播網需要提供新的服務端點，以 JSON 格式傳回 CORS 回應

{
  templateUrl: "https://adexample.com/amp_template_1.html",
  data: {
    clickUrl: "https://buy.com/buy-1",
    buttonText: "Buy now"
  },
  analytics: {
    type: "googleanalytics",
    config: {
      ...
    }
  }
}

回應需要幾個自訂標頭

• CORS 的自訂標頭
• AMP-Ad-Template-Extension: amp-mustache
• Amp-Ad-Response-Type: template

廣告標記

`amp-ad-custom` 擴充功能可用於快速宣告廣告版位，方法是使用在資料屬性上設定的鍵值組來形成廣告要求。廣告版位範例看起來可能像這樣

<amp-ad-custom
  width="320"
  height="50"
  src="http://www.my-ad-network.com"
  data-request-param-{param_1}="{val_1}"
  data-request-param-{param_2}="{val_2}"
  .
  .
  .
  data-request-param-{param_N}="{val_N}"
>
</amp-ad-custom>

而產生的廣告要求網址會是：http://www.my-ad-network.com?{param_1}={val_1}&{param_2}={val_2}&...&{param_N}={val_N}。