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 头部中包含可选的元标记作为标识符,格式为 <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">。 这些元标记必须放置在 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 秒钟的时间达到 50% 时,此配置会向 https://example.com/nestedAmpAnalytics URL 发送请求。

样板

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

规则 理由
在素材 CSS 中禁止使用 position:fixedposition:sticky position:fixed 会脱离 shadow DOM,这是 AMPHTML 广告所依赖的。 另外,AMP 中已经不允许广告使用固定位置。
禁止使用 touch-action 可以操纵 touch-action 的广告会干扰用户滚动主机文档的能力。
素材 CSS 限制为 20,000 个字节。 大型 CSS 块会使素材膨胀,增加网络延迟并降低页面性能。
过渡和动画受到其他限制。 AMP 必须能够控制属于广告的所有动画,以便在广告未在屏幕上或系统资源非常低时可以停止它们。
出于验证目的,特定于供应商的前缀被视为与没有前缀的同一符号的别名。 这意味着,如果 CSS 验证规则禁止使用符号 foo,则也将禁止使用符号 -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;
}
可过渡和可动画的属性

可以过渡的唯一属性是不透明度和变换。( 理由 )

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 文档元数据

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 继承。