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

Баннер Ad Manager

Display ad slots (Google Publisher Tag)

Классическое рекламное место Ad Manager, созданное с помощью Google Publisher Tag: с фиксированным размером, несколькими размерами или адаптивное.

Ad Manager
телефон и компьютер

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

Десктоп

Мобильный

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

Что такое баннер Ad Manager

Баннер Ad Manager, это тот самый рекламный прямоугольник, который неподвижно находится на странице: посреди текста, вверху или сбоку. Представьте плакат, висящий на стене школы. У него есть своё место и свой размер, и каждый, кто проходит мимо, может его увидеть. В Ad Manager это зарезервированное место называется slot, то есть просто «рекламное место» по-английски. Запрашивает и показывает рекламу в этом месте GPT, сокращение от Google Publisher Tag, библиотека кода Google, которую вы подключаете к сайту.

Работает это так: сначала вы сообщаете GPT, какой рекламный блок Ad Manager использовать, какие размеры там помещаются и в каком окошке на странице он должен появиться. Это окошко div, фрагмент HTML с уникальным именем. Затем GPT запрашивает рекламу и рисует ее в окошке. Имя окошка должно совпадать в обоих местах. Если не совпадает, реклама не появится. Сам Google советует проверить именно это, когда реклама не появляется.

Размер можно выбрать тремя способами. При фиксированном размере подходят только объявления такого размера, например 300 на 250. При нескольких размерах вы перечисляете несколько вариантов, и Ad Manager может выбрать любой из них. В адаптивном варианте вы составляете таблицу, называемую mapping размеров, которая говорит, какие размеры допустимы для каждой ширины экрана: один список для больших экранов и другой для маленьких. Есть ещё гибкий (fluid) размер, который растягивается по ширине страницы, но Google поясняет, что сейчас он используется только для нативной рекламы.

Google создал такой способ работы, чтобы сайт мог всё контролировать: вы сами решаете, где находится каждое объявление, какие размеры принимает и когда загружается. В документации описано, как сделать так, чтобы реклама в конце страницы загружалась только когда человек приближается к ней, это называется отложенной загрузкой. Там же объясняется, как обновить объявление без перезагрузки всей страницы, соблюдая правила по времени и декларации. Баннер стоит использовать, если у вас уже есть аккаунт Ad Manager и вы хотите внимательно выбирать место и размер каждого рекламного места.

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

Как внедрить

Создайте тег в Ad ManagerВ Ad Manager нажмите Инвентарь, затем Рекламные блоки. Откройте блок, перейдите на вкладку Теги, выберите Google Publisher Tag (GPT) и нажмите Продолжить. Сделайте остальные выборы и скопируйте теги в разделе Результаты тега.
Загрузите GPT в headВставьте скрипт GPT в часть head страницы. Именно он подключает к сайту рекламные инструменты Google.
Определите слотТам же, в head, сообщите GPT путь рекламного блока, допустимые размеры и имя div. Для адаптивного слота добавьте mapping размеров. В конце включите рекламный сервис.
Создайте div с зарезервированным местомВ body создайте div с тем же именем, которое использовано в определении. Задайте ему высоту и ширину в CSS с расчётом на самое большое объявление, чтобы ничего не прыгало на экране, когда придёт реклама.
Запросите рекламуСразу после div вызовите показ с именем div. Чтобы появилась реклама из вашего собственного инвентаря, нужна активная позиция со статусом Готово.
Отложенная загрузка и обновлениеПри желании включите отложенную загрузку для мест в конце страницы. Если собираетесь обновлять рекламу, объявите это в Ad Manager в разделе «Инвентарь», «Правила инвентаря», «Декларации издателя» и используйте то же правило на странице.

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

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

GPT и определение слота размещаются в head, а div с вызовом показа в body, там, где должен быть баннер.

<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>

На компьютереПоказывается как неподвижный прямоугольник в выбранном вами месте, например 728 на 90 или 300 на 250. Он прокручивается вместе со страницей, как любая часть текста.

На мобильныхПоказывается посреди контента в размерах, которые помещаются на экран, например 300 на 250. С mapping размеров телефон получает только те размеры, которые вы разрешили для маленьких экранов.

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

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

Можно

Задать фиксированный размер, список нескольких размеров или mapping размеров по ширине экрана.
Зарезервировать в CSS место под самый большой размер, который может появиться. Google говорит, что это самый эффективный способ не давать странице прыгать.
Определять в head места, которые видны сразу, чтобы у них был приоритет.
Использовать отложенную загрузку для мест ниже первого экрана, которые видны только при прокрутке страницы.
Обновлять рекламу функцией обновления GPT вместо перезагрузки всей страницы, если обновление объявлено в Ad Manager.
Обновлять по действию человека без минимального интервала: Google требует минимальный интервал только для обновления по времени или по событию.

Нельзя

Использовать в div имя, отличающееся от того, что передано в определении слота.
Обновлять рекламу, не объявив это в Ad Manager, или объявить неправильно. Google считает это нарушением.
Обновлять по времени или по событию с интервалом меньше 30 секунд в вебе.
Очищать место перед обновлением. Обновление и так заменяет объявление, а очистка лишь дольше оставляет место пустым.
Обновлять места, которые человек никогда не видит. Google предупреждает, что это может сильно снизить показатель видимости.
Оставлять div без зарезервированных размеров: из-за этого контент прыгает, когда приходит реклама.

Советы

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

Для слота нескольких размеров Google требует, чтобы у div была высота самой высокой рекламы и ширина самой широкой.
В mapping размеров GPT выбирает самый большой подходящий диапазон экрана, сначала по ширине, потом по высоте. Если в mapping есть ошибка, он возвращается к размерам из определения слота.
В официальном примере отложенной загрузки Google запрашивает рекламу на расстоянии 5 экранов, отрисовывает на расстоянии 2 экранов и удваивает эти значения на телефоне.
Чтобы обновлять рекламу только после того, как её увидели, документация советует дождаться события видимого показа impressionViewable.

Осторожно

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

Другое имя div

Имя, переданное в определении слота и при показе, должно совпадать с именем div. Если нет, реклама просто не появится.

Div не того размера, что реклама

Google требует, чтобы ширина, высота и имя div совпадали с тем, что указано в теге. Если они не совпадают, реклама может не появиться.

Нет готовой рекламной позиции

Без активной рекламной позиции со статусом Ready ваш собственный инвентарь не покажет рекламу, даже при правильном коде.

Mapping, оставляющий телефон пустым

В примере Google экраны меньше 640 на 480 получают пустой список и остаются без рекламы. Если скопировать без изменений, телефоны в вертикальном положении могут остаться без баннера.

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

Чем несколько размеров отличаются от адаптивного варианта?

При нескольких размерах любой размер из списка может появиться на любом экране. В адаптивном варианте mapping размеров определяет, какие размеры допустимы для каждой ширины экрана.

Можно ли использовать гибкий размер в обычном баннере?

Google поясняет, что сейчас единственный гибкий тип, который принимает Ad Manager, это нативная реклама. Для обычного баннера используйте фиксированный размер, несколько размеров или mapping.

Какой минимальный интервал для обновления рекламы?

В вебе для обновления по времени или по событию нужно не менее 30 секунд. Для обновления по действию человека минимума нет. Во всех случаях оно должно быть объявлено в Правилах инвентаря.

Стоит ли использовать отложенную загрузку?

Google рекомендует откладывать загрузку мест ниже первого экрана, что особенно помогает на телефоне, где ресурсов меньше. Места вверху страницы должны иметь приоритет.

Библиотека

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

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

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

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

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