AMP for Ads 規格
重要事項:本文件不適用於您目前選取的格式 stories!
如果您想提議變更標準,請在 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 腳本之前。vendor 和 id 的值是僅包含 [0-9a-zA-Z_-] 的字串。type 的值為 creative-id 或 impression-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 #4018 和 PR #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> 當封閉廣告的 50% 在螢幕上持續可見 1 秒時,此配置會向 |
樣板
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:fixed 和 position:sticky 在素材 CSS 中被禁止。 | position:fixed 會脫離 shadow DOM,而 AMPHTML 廣告依賴於 shadow DOM。此外,AMP 中的廣告已經不允許使用固定位置。 |
touch-action 被禁止。 | 可以操縱 touch-action 的廣告可能會干擾使用者滾動託管文件的能力。 |
素材 CSS 限制為 20,000 位元組。 | 大型 CSS 區塊會使素材膨脹、增加網路延遲並降低頁面效能。 |
轉場和動畫受到額外限制。 | AMP 必須能夠控制屬於廣告的所有動畫,以便在廣告不在螢幕上或系統資源非常低時停止它們。 |
為了驗證目的,供應商特定的前綴被視為沒有前綴的相同符號的別名。這表示如果符號 foo 被 CSS 驗證規則禁止,則符號 -vendor-foo 也將被禁止。 | 某些供應商前綴屬性提供與這些規則下以其他方式禁止或限制的屬性等效的功能。 範例: |
CSS 動畫和轉場效果
選擇器
transition
和 animation
屬性僅允許在滿足以下條件的選擇器上使用
-
僅包含
transition
、animation
、transform
、visibility
或opacity
屬性。理由: 這允許 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; }
可轉場和可動畫化的屬性
唯一可以轉場的屬性是不透明度和 transform。(理由)
良好
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 內建標籤。未明確列出的擴充功能或內建標籤是被禁止的。
- amp-accordion
- amp-ad-exit
- amp-analytics
- amp-anim
- amp-animation
- amp-audio
- amp-bind
- amp-carousel
- amp-fit-text
- amp-font
- amp-form
- amp-img
- amp-layout
- amp-lightbox
- amp-mraid,在實驗性基礎上。如果您正在考慮使用它,請在 wg-monetization 開啟一個 issue。
- amp-mustache
- amp-pixel
- amp-position-observer
- amp-selector
- amp-social-share
- amp-video
大多數省略都是為了效能或使 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 文件元數據
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 廣告中沒有任何用途,只會耗費網路頻寬。
- 理由: 由於 AMPHTML 廣告需要啟用 Javascript 才能完全運作,因此
- 與一般 AMP 不同,禁止使用
<script type="application/ld+json">
。- 理由: JSON LD 用於託管頁面上的結構化資料標記,但廣告素材不是獨立文件,也不包含結構化資料。其中的 JSON LD 區塊只會耗費網路頻寬。
- 所有其他腳本規則和排除都從一般 AMP 繼承而來。