AMP

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

Important: this documentation is not applicable to your currently selected format stories!

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

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

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

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

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

Правило Обоснование
Должны использовать или в качестве закрывающих тегов. Позволяет валидаторам идентифицировать документ креатива либо как AMP-документ общей направленности, либо как документ рекламы AMPHTML с ограниченным доступом), и обрабатывать его соответствующим образом.
Должны включать скрипт среды выполнения вместо https://cdn.ampproject.org/v0.js. Позволяет гибко настраивать runtime-поведение рекламы AMPHTML, размещаемой в кросс-доменных iframe.
Не должен содержать тег . Рекламные креативы не имеют «канонической версии, не использующей AMP», и не будут независимо индексироваться поиском, поэтому ссылаться на себя же не имеет смысла.
Может содержать в HTML-элементе head опциональные теги meta, используемые в качестве идентификаторов, в формате . Такие теги следует размещать перед скриптом amp4ads-v0.js. Значения vendor и id — строки, содержащие только символы [0-9a-zA-Z_-]. Значение type либо creative-id, либо impression-id. Эти специальные идентификаторы можно использовать для идентификации показа или креатива. Они могут быть полезны для создания отчетов и отладки.

Пример:


Механизм отслеживания видимости с помощью может использовать только селектор, обозначающий все рекламное объявление ( "visibilitySpec": { "selector": "amp-ad" }), как определено в Issue #4018 и PR #4368. Соответственно, он не может использовать селекторы каких-либо элементов, расположенных внутри креатива рекламы. Иногда реклама AMPHTML может выполнять рендеринг креатива в элементе iframe. В таких случаях аналитические функции хост-страницы могут выбирать целью только iframe целиком, не имея доступа к более детальным селекторам.

Пример:


  

Эта конфигурация отправляет запрос на URL https://example.com/nestedAmpAnalytics, после того как 50% площади родительской рекламы непрерывно находилось в видимой области экрана в течение 1 секунды.

Шаблон

Рекламные креативы 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

Правило Обоснование
position:fixed и position:sticky запрещены в CSS креативов. position:fixed выводит процесс из теневого DOM, от которого зависит реклама AMPHTML. Кроме того, реклама в AMP не может использовать фиксированную позицию.
Свойство touch-action запрещено. Реклама, способная манипулировать touch-action, может помешать пользователю прокручивать основной документ.
Размер CSS креатива ограничен 20 000 байт. Большие блоки CSS приводят к разрастанию креатива, увеличивают задержку в сети и снижают производительность страницы.
На переходы и анимации накладываются дополнительные ограничения. AMP должен иметь возможность контролировать все анимации, относящиеся к рекламе, чтобы суметь остановить их, если реклама оказывается вне видимой зоны или системные ресурсы на исходе.
В целях валидации специфичные для поставщика префиксы считаются псевдонимами одного и того же символа без префикса. Это означает, что если символ foo запрещен правилами валидации CSS, то символ -vendor-foo будет также запрещен. Некоторые свойства с префиксом поставщика являются функционально эквивалентными свойствам, которые запрещены или ограничены в соответствии с этими правилами.

Пример: -webkit-transition и -moz-transition являются псевдонимами для transition. Они будут разрешены только в тех случаях, когда разрешен обычный transition (см. Раздел «Селекторы» ниже).

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. Расширения или встроенные теги, не указанные явно, запрещены.

Большинство неуказанных модулей не используются либо из-за влияния на производительность, либо для упрощения анализа рекламы 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.