Спецификация AMP для рекламы

Если вы хотите предложить изменения в стандарт, оставьте комментарий к задаче Intent to Implement.

«Реклама AMPHTML» — это механизм отображения быстрой и высокоэффективной рекламы на AMP-страницах. Чтобы рекламные документы AMPHTML («AMP-креативы») могли быстро и без проблем отображаться в браузере и не ухудшали пользовательский интерфейс, AMP-креативы должны соблюдать ряд валидационных правил. Подобно AMP (см. правила форматирования AMP), реклама AMPHTML имеет доступ только к ограниченному набору разрешенных тегов, возможностей и расширений.

Правила форматирования рекламы AMPHTML

Креатив должен соблюдать все правила, указанные в правилах форматирования AMP, если иное не указано ниже (например, шаблонный код рекламы AMPHTML отличается от стандартного шаблонного кода AMP).

Кроме того, креативы должны соблюдать следующие правила:

<meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">

Шаблон

Рекламные креативы AMPHTML требуют применения другого, значительно более простого, шаблонного кода, по сравнению с обычными AMP-документами:

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

Обоснование: стиль amp-boilerplate скрывает содержимое элемента body до тех пор, пока среда выполнения AMP не будет готова его отобразить. Если JavaScript отключен или среда выполнения AMP не загружается, стандартный шаблонный код гарантирует, что в конечном итоге содержимое все равно будет отображено. Однако если JavaScript полностью отключен для рекламы AMPHTML, реклама не будет отображаться вовсе, поэтому раздел <noscript> не нужен. В отсутствие времени выполнения AMP большинство механизмов, на которых основывается реклама AMPHTML (например, аналитика для контроля видимости или amp-img для отображения контента), будут недоступны, поэтому лучше не показывать рекламу вовсе, чем показывать ее в частично неработающем виде.

Кроме того, в шаблонном коде рекламы AMPHTML вместо amp-boilerplate используется amp-a4a-boilerplate, — это делается для того, чтобы валидаторы могли с легкостью идентифицировать рекламу и генерировать более точные сообщения об ошибках для помощи разработчикам.

Обратите внимание, что в тексте шаблона допускаются только те же изменения, что и в общем шаблонном коде AMP.

CSS

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;
}

Переходные и анимируемые свойства

Единственными свойствами, которые можно использовать в переходах, являются opacity и 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

Ниже перечислены модули расширения AMP и встроенные теги AMP, которые разрешены в рекламном объявлении AMPHTML. Расширения или встроенные теги, не указанные явно, запрещены.

• 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-ads.
• 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 и загрузки произвольного контента. Рекламные объявления, которые желают использовать такие возможности, должны возвращать значение false из своей записи a4aRegistry и использовать существующий механизм рендеринга рекламы «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 тегов. Подобно ему, данный список упорядочен в соответствии с 4-м разделом спецификации HTML5 («Элементы 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> and <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, поэтому они указаны без номеров разделов.

<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, <noscript> запрещен.
• Обоснование. JSON-LD используется для компоновки структурированных данных на хост-страницах, но рекламные креативы не являются отдельными документами и не содержат структурированных данных. Размещенные в них блоки JSON-LD будут впустую расходовать пропускную способность сети.
• Все остальные исключения и правила для скриптов соответствуют стандартному AMP.