AMP

amp-auto-ads

說明

透過使用遠端伺服器提供的設定檔,將廣告動態注入 AMP 頁面。

 

必要指令碼

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

用法

透過使用遠端伺服器提供的設定檔,將廣告動態注入 AMP 頁面。

在有足夠數量的有效版位 (在設定中提供) 的情況下,amp-auto-ads 會嘗試插入額外廣告,同時遵守廣告聯播網指定的一組限制。這些限制會限制

  • 可插入的廣告總數
  • 任何相鄰廣告之間應有的最小距離

除此之外,廣告只會插入在頁面上不會導致無法接受的重新排版 (由 attemptChangeSize 判斷) 的位置。

<amp-auto-ads> 標記應放置為 <body> 的第一個子項。

廣告聯播網類型和任何額外資訊 (廣告聯播網要求) 應在標記上指定。

<amp-auto-ads type="adsense" data-ad-client="ca-pub-5439573510495356">
</amp-auto-ads>

支援的廣告聯播網

設定規格

設定定義 <amp-auto-ads> 可在頁面上放置廣告的位置。設定是從協力廠商廣告聯播網在 ad-network-config.js 中定義的 URL 擷取。設定應為序列化的 JSON 物件,符合下方描述的 ConfigObj 定義。

設定範例

以下範例指定廣告應立即定位在頁面上第三個 <DIV id='domId'> 內的所有 <P class='paragraph'> 元素之後的位置。放置在任何這些位置的廣告應為 BANNER 類型,且頂部邊界為 4px,底部邊界為 10px。

{
  "placements": [
    {
      "anchor": {
        "selector": "DIV#domId",
        "index": 2,
        "sub": {
          "selector": "P.paragraph",
          "all": true
        }
      },
      "pos": 4,
      "type": 1,
      "style": {
        "top_m": 5,
        "bot_m": 10
      }
    }
  ]
}

物件定義

ConfigObj

要在設定物件中指定的欄位

欄位名稱 類型 說明
placements Array<!PlacementObj> 一個必要欄位,指示可以在頁面上插入廣告的潛在位置。
attributes Object<string, string> 一個選用欄位,指定從屬性名稱到屬性值的對應,以套用至使用此設定注入的所有 <amp-ad> 元素。僅允許以下屬性名稱
  • type
  • layout
  • data-* (即任何 data 屬性)
adConstraints AdConstraintsObj 一個選用欄位,指定在頁面上放置廣告時應使用的限制。如果未指定,則 amp-auto-ads 將嘗試使用 [ad-network-config.js](https://github.com/ampproject/amphtml/blob/main/extensions/amp-auto-ads/0.1/ad-network-config.js) 中指定的預設限制。
PlacementObj

要在 placements 設定物件中指定的欄位

欄位名稱 類型 說明
anchor AnchorObj 一個必要欄位,提供用於查詢頁面上版位位置所錨定的元素的資訊。
pos RelativePositionEnum 一個必要欄位,指示版位相對於其錨定元素的位置。
type PlacementTypeEnum 一個必要欄位,指示版位的類型。
style PlacementStyleObj 一個選用欄位,指示應套用至在此版位位置插入的廣告的任何樣式。
attributes Object<string, string> 一個選用欄位,用於從屬性名稱到值的對應,以套用至使用此版位注入的所有 <amp-ad> 元素。此處指定的屬性會覆寫在父 ConfigObj 上也指定的任何同名屬性。僅允許以下屬性名稱
  • type
  • layout
  • data-* (即任何 data 屬性)
stickyAdAttributes Object<string, string> 一個選用欄位,用於從屬性名稱到值的對應,以套用至使用此版位注入的所有 <amp-sticky-ad> 元素。僅允許以下屬性名稱
  • data-* (即任何 data 屬性)
AnchorObj

要在 anchor 設定物件中指定的欄位

欄位名稱 類型 說明
selector string 一個必要欄位,定義 CSS 選擇器,以選取此錨定定義層級的元素。
index number 一個選用欄位,用於指定選擇器選取的元素索引,此錨定定義層級應限制為該索引。預設情況下,值設定為 0 (如果 all 欄位為 false)。
all boolean 如果指定了 index 欄位,則會忽略。如果設定為 true,則表示應包含選擇器選取的所有元素;否則設定為 false
min_c number 一個選用欄位,指定元素 textContent 屬性的最小長度,才能將其包含在內。預設值為 0。
sub AnchorObj 一個選用欄位,指定遞迴 AnchorObj,它將選取在此錨定定義層級選取的任何元素內的元素。
PlacementStyleObj

要在 style 設定物件中指定的欄位

欄位名稱 類型 說明
top_m number 一個選用欄位,指示在此位置插入的廣告應具有的頂部邊界 (以像素為單位)。預設值:0。
bot_m number 一個選用欄位,指示在此位置插入的廣告應具有的底部邊界 (以像素為單位)。預設值:0。
RelativePositionEnum

placements 設定物件中 pos 欄位的 ENUM 值

名稱 說明
BEFORE 1 廣告應作為錨定的同層級元素緊鄰其前插入。
FIRST_CHILD 2 廣告應作為錨定的第一個子項插入。
LAST_CHILD 3 廣告應作為錨定的最後一個子項插入。
AFTER 4 廣告應作為錨定的同層級元素緊鄰其後插入。
AttributesEnum

ENUM 值指示來自不同廣告格式設定物件的屬性

名稱 說明
BASE_ATTRIBUTES attributes 指示設定物件中的 `attributes` 欄位。
STICKY_AD_ATTRIBUTES stickyAdAttributes 指示設定物件中的 `stickyAdAttributes` 欄位。
PlacementTypeEnum

placements 設定物件中 type 欄位的 ENUM 值

名稱 說明
BANNER 1 版位描述橫幅廣告位置。
AdConstraintsObj

要在 adConstraints 設定物件中指定的欄位

欄位名稱 類型 說明
initialMinSpacing string 一個必要欄位,指示廣告與頁面上已有的任何廣告 (手動放置或先前由 amp-auto-ads 放置) 在插入時應有的最小距離。值表示為帶有單位字首的數字。例如,「10px」表示 10 像素,或「0.5vp」表示半個視口高度。負值無效。支援的單位為
  • px - 像素
  • vp - 視口高度的倍數
此值僅在頁面上已有的廣告數量少於 subsequentMinSpacing 欄位中指定的任何 adCount 比對器時適用。
subsequentMinSpacing Array<!SubsequentMinSpacingObj> 一個選用欄位,指定應根據在插入時頁面上已有的廣告數量套用的廣告間距。
maxAdCount number 一個必要欄位,指定 amp-auto-ads 可導致頁面上出現的最大廣告數量。手動放置的廣告以及由 amp-auto-ads 放置的廣告都計入此總數。例如,如果此欄位設定為 5,且頁面上有 3 個手動放置的廣告,則 amp-auto-ads 最多會額外放置 2 個廣告。
SubsequentMinSpacingObj

要在 subsequentMinSpacing 設定物件中指定的欄位。subsequentMinSpacing 條目可用於根據頁面上已有的廣告數量來變更任何額外廣告之間所需的間距。例如,考慮以下情境

  • 頁面上有 2 個現有廣告
  • subsequentMinSpacing 欄位為: [ {adCount: 3, spacing: "500px"}, {adCount: 5, spacing: "1000px"}, ]

最初頁面上有 2 個現有廣告,因此沒有比對的對應。因此,最小間距預設為 AdConstraints 物件中的 initialMinSpacing。amp-auto-ads 將以遞迴方式嘗試放置廣告,直到版位用盡且無法在不違反 adContraints 的情況下使用。在 amp-auto-ads 放置其第一個廣告後,頁面上現在有 3 個廣告,因為 subsequentMinSpacing 中有 3 個 (或更多) 廣告的對應,因此最小間距現在變為 500px。這適用於頁面上有 5 個廣告的情況,因為有 5 個廣告的規則。插入第 6 個以上的廣告則需要它與其他廣告至少間隔 1000px。

欄位名稱 類型 說明
adCount number 一個必要欄位。已在頁面上的最小廣告數量,導致此規則套用 (假設沒有其他規則更符合)。如需更詳細的說明,請參閱以上描述。
spacing string 一個必要欄位,指定當根據 adCount 比對到此規則時套用的最小廣告間距。值表示為帶有單位字首的數字。例如,「10px」表示 10 像素,或「0.5vp」表示半個視口高度。負值無效。支援的單位為
  • px - 像素
  • vp - 視口高度的倍數

屬性

type (必要)

廣告聯播網的識別碼。

data-foo-bar

大多數廣告聯播網都需要進一步設定,這可以使用 HTML data– 屬性傳遞到聯播網。參數名稱會受到標準資料屬性破折號到駝峰式大小寫轉換的影響。例如,「data-foo-bar」會作為「fooBar」傳送到廣告以進行設定。請參閱 廣告聯播網 的文件,以了解可以使用哪些屬性。

通用屬性

此元素包含擴充至 AMP 元件的通用屬性

驗證

請參閱 AMP 驗證器規格中的 amp-auto-ads 規則

需要更多協助嗎?

您已閱讀此文件十幾次,但它並未真正涵蓋您的所有問題?也許其他人也有同樣的感覺:在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow
發現錯誤或缺少功能?

AMP 專案強烈鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的持續參與者,但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

前往 GitHub