AMP

AMP for Ads 規格

重要事項:本文件不適用於您目前選取的格式:網站

如果您想提議變更此標準,請在Intent to Implement上留言.

AMPHTML 廣告是一種在 AMP 頁面中呈現快速高效能廣告的機制。為了確保 AMPHTML 廣告文件 (「AMP 素材」) 能夠在瀏覽器中快速且流暢地呈現,且不會降低使用者體驗,AMP 素材必須遵守一組驗證規則。與AMP 格式規則精神上類似,AMPHTML 廣告可以存取一組有限的允許標籤、功能和擴充功能。

AMPHTML 廣告格式規則

除非另有明確說明,否則素材必須遵守AMP 格式規則所規定的所有規則,在此作為參考納入。例如,AMPHTML 廣告樣板偏離了 AMP 標準樣板。

此外,素材必須遵守以下規則

規則 理由
必須使用 <html ⚡4ads><html amp4ads> 作為其外層標籤。 允許驗證器將素材文件識別為一般 AMP 文件或受限的 AMPHTML 廣告文件,並適當處理。
必須包含 <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> 作為執行階段腳本,而不是 https://cdn.ampproject.org/v0.js 允許為在跨來源 iframe 中提供的 AMPHTML 廣告量身定制執行階段行為。
不得包含 <link rel="canonical"> 標籤。 廣告素材沒有「非 AMP 標準版本」,也不會獨立進行搜尋索引,因此自我參照將毫無用處。
可以在 HTML head 中包含選用的 meta 標籤作為識別符,格式為 <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">。這些 meta 標籤必須放置在 amp4ads-v0.js 腳本之前。vendorid 的值是僅包含 [0-9a-zA-Z_-] 的字串。type 的值為 creative-idimpression-id 這些自訂識別符可用於識別曝光或素材。它們對於報告和除錯可能很有幫助。

範例

<meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">
<amp-analytics> 可見度追蹤可能僅以完整廣告選擇器為目標,透過 "visibilitySpec": { "selector": "amp-ad" }Issue #4018PR #4368 中定義。特別是,它可能不會以廣告素材內元素的任何選擇器為目標。 在某些情況下,AMPHTML 廣告可能會選擇在 iframe 中呈現廣告素材。在這些情況下,託管頁面分析無論如何都只能以整個 iframe 為目標,並且無法存取任何更精細的選擇器。

範例

<amp-analytics id="nestedAnalytics">
  <script type="application/json">
  {
    "requests": {
      "visibility": "https://example.com/nestedAmpAnalytics"
    },
    "triggers": {
      "visibilitySpec": {
      "selector": "amp-ad",
      "visiblePercentageMin": 50,
      "continuousTimeMin": 1000
      }
    }
  }
  </script>
</amp-analytics>

此設定會在包圍廣告在螢幕上持續可見 1 秒後,向 https://example.com/nestedAmpAnalytics URL 發送請求,可見度達 50%。

樣板

AMPHTML 廣告素材需要的樣板樣式行與一般 AMP 文件不同,且簡潔許多

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

理由: amp-boilerplate 樣式會隱藏 body 內容,直到 AMP 執行階段準備就緒並可以取消隱藏它。如果 Javascript 已停用或 AMP 執行階段載入失敗,預設樣板可確保內容最終都會顯示,無論如何。然而,在 AMPHTML 廣告中,如果 Javascript 完全停用,AMPHTML 廣告將不會執行,並且永遠不會顯示廣告,因此不需要 <noscript> 區段。在缺乏 AMP 執行階段的情況下,AMPHTML 廣告所依賴的大部分機制 (例如,用於可見度追蹤的分析或用於內容顯示的 amp-img) 將不可用,因此最好不顯示廣告,而不是顯示故障的廣告。

最後,AMPHTML 廣告樣板使用 amp-a4a-boilerplate 而不是 amp-boilerplate,以便驗證器可以輕鬆識別它,並產生更準確的錯誤訊息來協助開發人員。

請注意,關於樣板文字變更的相同規則適用於一般 AMP 樣板

CSS

規則 理由
position:fixedposition:sticky 在素材 CSS 中禁止使用。 position:fixed 會突破 shadow DOM,而 AMPHTML 廣告依賴於 shadow DOM。此外,AMP 中的廣告已不允許使用固定位置。
touch-action 已禁止。 可以操控 touch-action 的廣告可能會干擾使用者捲動託管文件的能力。
素材 CSS 限制為 20,000 位元組。 大型 CSS 區塊會使素材膨脹、增加網路延遲並降低頁面效能。
轉場效果和動畫受限於額外限制。 AMP 必須能夠控制屬於廣告的所有動畫,以便在廣告不在螢幕上或系統資源非常低時停止它們。
供應商特定的前綴被視為沒有前綴的相同符號的別名,用於驗證目的。這表示如果符號 foo 被 CSS 驗證規則禁止,則符號 -vendor-foo 也將被禁止。 某些供應商前綴的屬性提供與在這些規則下否則會被禁止或限制的屬性等效的功能。

範例:-webkit-transition-moz-transition 都被視為 transition 的別名。它們僅在允許裸 transition 的情況下才被允許 (請參閱下方的選擇器章節)。

CSS 動畫與轉場效果

選擇器

transitionanimation 屬性僅允許在符合以下條件的選擇器上使用

  • 僅包含 transitionanimationtransformvisibilityopacity 屬性。

    理由: 這允許 AMP 執行階段從上下文中移除此類別以停用動畫,當頁面效能需要時。

良好

.box {
  transform: rotate(180deg);
  transition: transform 2s;
}

CSS 類別中不允許的屬性。

.box {
  color: red; // non-animation property not allowed in animation selector
  transform: rotate(180deg);
  transition: transform 2s;
}
可轉換和可動畫屬性

唯一可以轉換的屬性是 opacity 和 transform。(理由:http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)

良好

transition: transform 2s;

transition: background-color 2s;

良好

@keyframes turn {
  from {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(90deg);
  }
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

允許的 AMP 擴充功能與內建功能

以下是在 AMPHTML 廣告素材中允許的 AMP 擴充功能模組和 AMP 內建標籤。未明確列出的擴充功能或內建標籤均被禁止。

大部分的省略不是為了效能,就是為了讓 AMPHTML 廣告更易於分析。

範例: 此列表中省略了 <amp-ad>。明確禁止使用它是因為允許在 <amp-ad> 內部使用 <amp-ad> 可能會導致廣告載入的無限瀑布,這不符合 AMPHTML 廣告效能目標。

範例: 此列表中省略了 <amp-iframe>。禁止使用它是因為廣告可能會使用它來執行任意 Javascript 和載入任意內容。想要使用此類功能的廣告應從其 a4aRegistry 條目傳回 false,並使用現有的「3p iframe」廣告呈現機制。

範例: <amp-facebook><amp-instagram><amp-twitter><amp-youtube> 都因為與 <amp-iframe> 相同的原因而被省略:它們都會建立 iframe,並可能在其中消耗無限資源。

範例: 此列表中省略了 <amp-ad-network-*-impl><amp-ad> 標籤會處理委派給這些實作標籤;素材不應嘗試直接包含它們。

範例: <amp-lightbox> 尚未包含,因為即使某些 AMPHTML 廣告素材也可能在 iframe 中呈現,而且目前沒有機制讓廣告擴展到 iframe 之外。未來可能會為此新增支援,如果證明有此需求。

HTML 標籤

以下是在 AMPHTML 廣告素材中允許的標籤。未明確允許的標籤均被禁止。此列表是一般AMP 標籤附加允許清單的子集。與該列表一樣,其排序方式與 HTML5 規格第 4 節HTML 元素一致。

大部分的省略不是為了效能,就是因為標籤不符合 HTML5 標準。例如,省略了 <noscript> 是因為 AMPHTML 廣告依賴於 JavaScript 已啟用,因此 <noscript> 區塊永遠不會執行,因此只會使素材膨脹並耗費頻寬和延遲。類似地,禁止使用 <acronym><big> 等,因為它們不符合 HTML5 相容性。

4.1 根元素

4.1.1 <html>

  • 必須使用類型 <html ⚡4ads><html amp4ads>

4.2 文件 metadata

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

  • 不允許使用 <link rel=...> 標籤,但 <link rel=stylesheet> 除外。
  • 注意: 與一般 AMP 不同,禁止使用 <link rel="canonical"> 標籤。

    4.2.5 <style> 4.2.6 <meta>

4.3 區段

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1><h2><h3><h4><h5><h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 內容分組

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 文字層級語意

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub><sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 編輯

4.6.1 <ins> 4.6.2 <del>

4.7 嵌入內容

  • 嵌入內容僅透過 AMP 標籤支援,例如 <amp-img><amp-video>

4.7.4 <source>

4.7.18 SVG

SVG 標籤不在 HTML5 命名空間中。它們在下方列出,不含章節 ID。

<svg> <g> <path> <glyph> <glyphref> <marker> <view> <circle> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> <clippath> <filter> <lineargradient> <radialgradient> <mask> <pattern> <vkern> <hkern> <defs> <use> <symbol> <desc> <title>

4.9 表格資料

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 表單

4.10.8 <button>

4.11 腳本

  • 與一般 AMP 文件一樣,素材的 <head> 標籤必須包含 <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> 標籤。
  • 與一般 AMP 不同,禁止使用 <noscript>
    • 理由: 由於 AMPHTML 廣告需要啟用 Javascript 才能完全運作,因此 <noscript> 區塊在 AMPHTML 廣告中沒有任何用途,只會耗費網路頻寬。
  • 與一般 AMP 不同,禁止使用 <script type="application/ld+json">
    • 理由: JSON LD 用於託管頁面上的結構化資料標記,但廣告素材不是獨立文件,也不包含結構化資料。其中的 JSON LD 區塊只會耗費網路頻寬。
  • 所有其他腳本規則和排除項都從一般 AMP 繼承而來。