AMP

amp-ad

Контейнер для показа объявлений. amp-embed – это псевдоним тега amp-ad. У них идентичный функционал, но разные названия. Используйте название amp-embed, когда оно больше подходит с точки зрения семантики. В документах AMP теги amp-ad и amp-embed поддерживаются только в рамках протокола HTTPS.

amp-ad / amp-embed

Спецификации amp-ad и amp-embed могут значительно измениться со временем. Текущий подход нацелен на то, чтобы формат AMP обеспечивал показ объявлений.

Описание Контейнер для показа объявлений. amp-embed – это псевдоним тега amp-ad. У них идентичный функционал, но разные названия. Используйте название amp-embed, когда оно больше подходит с точки зрения семантики. В документах AMP теги amp-ad и amp-embed поддерживаются только в рамках протокола HTTPS.
Скрипт <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Примечание: элемент amp-ad может работать без этого скрипта, но мы настоятельно рекомендуем использовать его для последующей совместимости.
Поддерживаемые макеты fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
Примеры Пример amp-ad на сайте AMP By Example.

Поведение

Объявления загружаются подобно остальным ресурсам в документах AMP, но в них есть специальный элемент <amp-ad>. Код JavScript, предоставляемый рекламными сетями, запрещено обрабатывать непосредственно в документах AMP, поэтому среда выполнения AMP загружает iframe из другого источника в тестовую среду iframe и выполняет код JavaScript рекламной сети в этой среде.

В элементе <amp-ad> ширина и высота должны указываться в соответствии с правилом используемого типа компоновки. Для этого требуется аргумент type, который определяет, какая рекламная сеть будет показываться. Все атрибуты data-* в теге автоматически передаются в код, который в конечном итоге показывает объявление. Какие атрибуты data-* обязательны для того или иного типа сети, определяется требованиями рекламной сети, которые должны быть задокументированы.

Пример: показ нескольких объявлений

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>
Open this snippet in playground

Атрибуты

type (обязательно) Указывает идентификатор рекламной сети. Атрибут type определяет шаблон, используемый для тега объявления.
src (необязательно) Используйте этот атрибут, чтобы загрузить тег "script" для указанной рекламной сети. Может использоваться для рекламных сетей, в которых на странице используется единственный тег "script". Значение src должно иметь префикс, занесенный в белый список для указанной рекламной сети, а также должно использовать протокол https.
data-foo-bar Для большинства рекламных сетей требуются дополнительные параметры конфигурации, которые можно передать в сеть с помощью HTML-атрибутов data-. При этом дефисы из имен параметров удаляются и используется "верблюжья" нотация. Например, параметр data-foo-bar передается как fooBar. Подробнее…
data-vars-foo-bar Атрибуты, начинающиеся с data-vars-, зарезервированы для переменных amp-analytics.
json (необязательно) Используйте этот атрибут, чтобы передавать в объявление параметры конфигурации через объект JSON любой сложности. Объект передается в объявление в исходном виде без декорирования имен.
data-consent-notification-id (необязательно) Если этот атрибут указан, то нужно подтверждать атрибут amp-user-notification с помощью идентификатора HTML, пока идентификатор клиента AMP пользователя (он аналогичен файлу cookie) не будет передан в объявление. Это означает, что отображение объявления будет отложено, пока пользователь не даст подтверждение.
data-loading-strategy (необязательно) Загружает объявление, когда оно находится на определенном расстоянии (исчисляется в количестве экранов) от текущей зоны видимости. Если атрибут data-loading-strategy отсутствует, то значение по умолчанию равно 3. Вы можете указать значение с плавающей запятой в диапазоне [0, 3]. Если оно не указано, значение будет равно 1,25). При меньших значениях повышается видимость (т. е. вероятность того, что загруженное объявление увидит пользователь), но может снизиться количество показов (т. е. загружается меньше объявлений). Если этот атрибут указан, но его значение не задано, система присвоит ему значение с плавающей запятой, которое позволит оптимизировать видимость без особого снижения числа показов. Если в качестве значения указано prefer-viewability-over-views, автоматически будет выполняться оптимизация по видимости.
data-ad-container-id (необязательно) Сообщает идентификатор компонента контейнера объявления в случае попытки свернуть свертывания. Компонентом контейнера должен выступать родительский компонент <amp-layout> объявления. Если атрибут data-ad-container-id указан и такой компонент контейнера <amp-layout> обнаружен, библиотека AMP попытается во время заполнения свернуть компонент контейнера, а не объявления. Эта функция может пригодиться, когда в коде есть индикатор объявления.
common attributes Этот элемент содержит распространенные атрибуты, расширенные до компонентов AMP.

Тег

Элемент amp-ad может поддерживать дочерний элемент с атрибутом placeholder. Если такая возможность предусмотрена в рекламной сети, этот элемент показывается до тех пор, пока объявление доступно для просмотра. Подробные сведения о заполнителях и резервных атрибутах можно найти в этой статье.

<amp-ad width=300 height=250
    type="foo">
    <div placeholder>Loading ...</div>
</amp-ad>

Нет доступных объявлений

Если для рекламного места нет доступных объявлений, AMP пытается свернуть элемент amp-ad (display: none). AMP определяет, можно ли выполнить эту операцию, не меняя позицию прокрутки, выбранную пользователем. Если объявление находится в зоне видимости, оно не будет свернуто, потому что это изменит позицию прокрутки; в противном же случае оно будет свернуто.

Что происходит, если свернуть объявление не удалось? Компонент amp-ad поддерживает дочерний элемент с атрибутом fallback. Если такой резервный элемент настроен, он будет показан. В противном случае AMP покажет резервный элемент, используемый по умолчанию.

Пример:

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

Показ видеорекламы

Есть 3 способа монетизации роликов в AMP с помощью видеорекламы

  1. В AMP встроена поддержка некоторых видеопроигрывателей (таких, как BrightCove, DailyMotion и др.), с помощью которых можно монетизировать объявления. Полный список можно найти здесь.

  2. Используйте компонент amp-ima-video, который доступен с со встроенным видеопроигрывателем IMA SDK и HTML5.

  3. Если вы используете видеопроигрыватель, который не поддерживается в AMP, вы можете показывать его с помощью amp-iframe. При этом следует соблюдать следующие требования:``

    • при загрузке видеопроигрывателя в первую область просмотра следует использовать статическое изображение, созданное на основе видео (подробнее…);
    • видео и изображение нужно размещать на серверах HTTPS.

Показ объявлений из пользовательского домена

AMP поддерживает загрузку bootstrap iframe, которая используется для показа объявлений из пользовательского домена (например, из вашего).

Чтобы включить эту функцию, скопируйте файл remote.html в свой веб-сервер, а затем добавьте в свои файлы AMP следующий метатег:

<meta name="amp-3p-iframe-src" content="https://assets.vash-domen.com/path/to/remote.html">

Атрибут content метатега – это абсолютный URL вашей копии файла remote.html, размещенного на вашем веб-сервере. В этом URL должна использоваться схема HTTPS. Он не может находиться там же, где находятся ваши файлы AMP. Например, если ваши AMP-файлы размещены на www.example.com, то этот URL должен отличаться от www.example.com (например, это может быть xxx.example.com). Подробнее…

Защита

Подтвердите входящие данные, прежде чем передавать их в функцию draw3p, чтобы обеспечить корректную работу тега iframe. Это, в частности, касается рекламных сетей, в которых разрешено пользовательское внедрение JavaScript.

В случае с тегами iframe также следует убедиться, что они встраиваются только в совместимые источники, к числу которых относятся:

  • ваши собственные источники;
  • https://cdn.ampproject.org для кеша AMP.

В случае кеша AMP вам также нужно убедиться, что оригинал источника (т. е. документа, отправляемого сервером cdn.ampproject.org) относится к вашим источникам.

Применение оригиналов может быть обеспечено с помощью 3-го аргумента функции draw3p и должно быть дополнительно обеспечено с помощью директивы allow-from для поддержки на уровне браузера.

Улучшение входящей конфигурации объявления

Иногда возникает необходимость улучшить запрос объявления перед отправкой его на сервер объявлений (необязательно).

Если в вашей рекламной сети поддерживается Fast Fetch (быстрый запрос), используйте Real Time Config (RTC). Например Fast Fetch и RTC поддерживаются в интеграциях DoubleClick и AdSense.

Если в рекламной сети используются стандартные запросы, вы можете передать обратный вызов в вызов функции draw3p в файле remote.html. Обратный вызов получает входящую конфигурацию в первом аргументе, а затем получает ещё один обратный вызов во втором аргументе (done в примере ниже). Этот обратный вызов должен вызываться с обновленным параметром "config", чтобы отображение объявления не прерывалось.

Пример:

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  //Здесь не нужно вызывать setTimeout: Это используется как пример,
  //который показывает, что обратный вызов done в асинхронном режиме допускается.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['razreshenny-tip-obyavleniya'], ['vash-domen.com']);

Поддержка стилей

Элементы <amp-ad> можно не добавлять в контейнеры, в которых задан параметр CSS position: fixed (за исключением amp-lightbox). Это связано с удобством использования при показе оверлеев на всю страницу. В будущем, возможно, будут разрешены подобные форматы объявлений внутри управляемых контейнеров AMP, в которых используются определенные инварианты пользовательского интерфейса.

Проверка

С правилами для компонента amp-ad можно ознакомиться в спецификации валидатора AMP.

Поддерживаемые рекламные сети

Поддерживаемые типы встраивания

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub