Руководство по внедрению

Реклама на страницах AMP

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

Как показывать рекламу на страницах AMP с помощью amp-ad, автоматической рекламы и закреплённой полосы в AdSense и Ad Manager.

AdSense
Ad Manager
телефон и компьютер (на страницах AMP)

Изучить формат Проверить на моём сайте

Десктоп

Мобильный

Понять за 1 минуту

Что такое реклама на страницах AMP

AMP, это способ создавать очень лёгкие и быстрые страницы, разработанный как открытый проект. Представьте ланчбокс с перегородками: у каждой вещи своё место, и нельзя бросить туда что попало. На странице AMP то же самое. Нельзя вставлять любой рекламный код. Вместо этого используются готовые детали, называемые компонентами, которые уже умеют запрашивать и показывать рекламу, не утяжеляя страницу.

Основных деталей три. amp-ad, это обычное рекламное место, как баннер: вы указываете тип сети, adsense для AdSense или doubleclick для Ad Manager, а также ширину и высоту. amp-auto-ads, это автоматический режим: он получает настройки от сети и сам выбирает, где разместить рекламу, соблюдая максимальное число и минимальное расстояние между объявлениями. amp-sticky-ad, это полоса, закреплённая внизу экрана, как якорь, с кнопкой закрытия.

Код рекламной сети не выполняется прямо на странице. Он работает в отдельном контейнере, называемом iframe, которым управляет сам AMP. Если реклама не пришла, AMP пытается скрыть пустое место, но не скрывает место, находящееся на экране, чтобы страница не прыгала. Реклама AMP также не может находиться внутри блоков с фиксированным положением, кроме собственных закреплённых объявлений AMP и amp-lightbox.

Google объясняет, что AMP это открытый проект для быстрых и хорошо работающих страниц на любом устройстве. В AdSense вы создаете рекламный блок и выбираете код AMP или включаете Автоматическую рекламу для AMP. В Ad Manager вы создаете теги AMP прямо в панели, и Google рекомендует использовать HTML-рекламу для AMP. Это оправдано, если на вашем сайте уже есть версии страниц AMP и вы хотите, чтобы они тоже показывали рекламу.

Пошаговая инструкция

Как внедрить

Загрузите компоненты в headВставьте в head страницы AMP скрипт amp-ad. Если используете автоматическую рекламу или закреплённую полосу, добавьте также скрипты amp-auto-ads и amp-sticky-ad.
AdSense: создайте блок AMPВ AdSense нажмите Реклама, По рекламным блокам и Медийная реклама. Укажите название, оставьте Адаптивный, нажмите Сохранить и получить код и затем AMP. Скрипт вставляется в head, а код рекламы в body.
AdSense: включите автоматическую рекламу для AMPВ разделе Реклама нажмите У вас есть сайт AMP?, включите Автоматическую рекламу для AMP и нажмите Получить код AMP. Вставьте скрипт в head, а код сразу после открывающего тега body на каждой странице. Затем нажмите Готово и Применить.
Ad Manager: создайте тег AMPНажмите Инвентарь, затем Рекламные блоки, откройте блок и перейдите на вкладку Теги. Выберите Тег AMP и нажмите Продолжить. Отметьте Заполнители AMP, чтобы добавить резервное место и запасные варианты, и выберите размеры блока.
Свяжите страницу AMP с обычнойНа обычной странице укажите ссылку на AMP-версию с помощью разметки amphtml. На странице AMP укажите ссылку обратно на обычную с помощью разметки canonical.
Подождите и проверьтеРеклама может появиться через несколько минут, а иногда через час.

Пример внедрения

Код и как это выглядит на экране

Скрипты компонентов вставляются в head, amp-auto-ads сразу после открытия body, а остальная реклама в body, там, где она должна показываться.

<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>

На компьютереamp-ad занимает место с заданными шириной и высотой, как обычный баннер. Закреплённая полоса amp-sticky-ad прикрепляется внизу, на всю ширину и высотой не более 100 пикселей.

На мобильныхАдаптивный блок AdSense занимает всю ширину экрана. Закреплённая полоса находится внизу, её можно закрыть, а в конце страницы AMP добавляет дополнительное место, чтобы она не закрывала контент.

Что рекомендует Google

Что можно и что нельзя

Можно

Использовать amp-ad с типом adsense или doubleclick, указав ширину и высоту.
Использовать адаптивные блоки AdSense: Google рекомендует оставлять их выбранными.
Использовать amp-auto-ads с AdSense и отключать в кабинете форматы, которые не нужны на страницах AMP.
Размещать на странице одну закреплённую полосу amp-sticky-ad с единственным amp-ad внутри.
Показывать заглушку, пока реклама загружается, и запасной вариант, если она не пришла.
В Ad Manager обновлять рекламу AMP, использующую Fast Fetch, с минимальным интервалом 30 секунд.

Нельзя

Размещать amp-ad внутри блоков с фиксированным положением, кроме закреплённых объявлений и amp-lightbox.
Размещать больше одного amp-sticky-ad на одной странице.
Использовать прозрачный или полупрозрачный фон у закреплённой полосы. AMP заменит его сплошным цветом.
Показывать рекламу или встроенный контент без HTTPS.
В Ad Manager включать обновление вместе с единым запросом (SRA). Обновление отключается, и появляется ошибка.
Использовать amp-ad прямо в Web Story. В Web Stories используется amp-story-auto-ads.

Советы

Как сделать правильно

Размещайте amp-auto-ads первым элементом внутри body.
Максимальная высота закреплённой полосы 100 пикселей, а ширина всегда 100 процентов.
В обновляемых блоках с несколькими размерами Ad Manager запрашивает только размеры, равные текущему или меньше него, поэтому реклама со временем может уменьшаться.
Чтобы следить за результатами в AdSense, используйте в отчётах разбивку «Платформа контента».

Осторожно

Частые ошибки

Скрипт вне head

Скрипт каждого компонента вставляется в head, а реклама в body. Без нужного скрипта компонент не работает.

Копировать пример кода

AdSense выдаёт готовый код AMP, когда вы выбираете опцию AMP. Копируйте код из своего аккаунта, с вашим ID издателя.

Неправильно собранная закреплённая полоса

amp-sticky-ad требует макет nodisplay и один amp-ad внутри.

Страница AMP сама по себе

AdSense просит, чтобы обычная страница и страница AMP ссылались друг на друга с помощью разметки amphtml и canonical.

Частые вопросы

Можно ли использовать обычный код AdSense на странице AMP?

Используйте код AMP. На страницах AMP JavaScript рекламной сети выполняется не прямо на странице, а в iframe, которым управляет AMP.

Что происходит, если реклама не пришла?

AMP пытается скрыть место. Если не получается, показывает запасной вариант. Закреплённая полоса без рекламы не показывается.

Обновляет ли Ad Manager рекламу в AMP?

Да, для рекламы с Fast Fetch. Вы добавляете в head разметку с интервалом не менее 30 секунд для страницы или для слота. Вместе с SRA не работает.

Сколько времени нужно, чтобы реклама появилась?

Обычно несколько минут, иногда до часа.

Библиотека

Официальный источник Google

Всё на этой странице основано на официальной документации Google. Читайте прямо в источнике:

Ваш сайт правильно использует этот формат?

Аудит читает сайт как посетитель, ничего не нажимая, и показывает, что исправить.

Запустить аудит