Настройка размеров блока

  1. Как настроить размеры в интерфейсе Рекламной сети
  2. Как использовать динамическую адаптивную рекламу в Баннере

Возможность настройки размеров блока зависит от его типа:

  • Баннер — вы можете настраивать размеры баннера в верстке сайта и в интерфейсе Рекламной сети. Рекомендуем настроить размеры контейнера на сайте, а затем выбрать в интерфейсе размер Адаптивный. Так размер баннера будет определяться размером контейнера.

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

  • Floor Ad и Top Ad — размеры блока определяются автоматически в зависимости от размера экрана. Вы можете задать дополнительные ограничения высоты в интерфейсе Рекламной сети: минимальную и максимальную высоту для размера Адаптивный с ограничениями, фиксированную высоту для размера Фиксированный.
  • Полноэкранный и Лента — размеры блока определяются автоматически в зависимости от размера экрана. Настраивать размеры вручную не нужно.

Как настроить размеры в интерфейсе Рекламной сети

Перейдите на вкладку Сайты и блоки → Блоки, выберите нужный блок и нажмите  → Редактировать. В разделе Настройки отображения блока выберите размер:

  • Адаптивный — размер блока ограничен только размерами обрамляющего контейнера на сайте. Размер контейнера зависит от типа блока:

    Размер обрамляющего контейнера нужно указать самостоятельно в верстке сайта — этим определяется, какие форматы рекламы могут быть показаны в блоке. Как определить размеры контейнера, читайте в рекомендациях ниже.

  • Адаптивный с ограничениями — позволяет задать максимальные и минимальные значения для высоты и ширины блока в пикселях. В этом случае при подборе рекламы учитываются как размеры контейнера на сайте, так и ограничения, заданные в интерфейсе Рекламной сети.

    Если минимальное значение не задано, то по умолчанию реклама занимает не менее 40% контейнера по высоте и 70% контейнера по ширине.

  • Фиксированный — позволяет определить точные размеры блока в пикселях. В блоке будет показана реклама только заданного размера (при условии, что размер блока меньше размера контейнера на сайте).

Внимание. Заданные размеры будут применяться ко всем форматам внутри блока.

Выбирая размеры Адаптивный с ограничениями и Фиксированный, учитывайте требования к размерам у фиксированных форматов медийной рекламы. Для показа этих форматов необходимо, чтобы размер блока точно соответствовал размеру медийного баннера или был больше баннера.

Подробнее о требованиях к размерам в зависимости от формата рекламы читайте ниже.

Рекомендации по настройке размеров блока

  • Для блока типа Баннер рекомендуем выбирать размер Адаптивный и задавать ширину и высоту блока в верстке сайта — через размеры контейнера, в который будет вписана реклама. Для безразмерных контейнеров можно задать максимальную высоту в процентах от области просмотра (viewport height — vh). Как это сделать, читайте в разделе Ограничение высоты в баннерах.

    Также вы можете настроить динамическую адаптивность баннера: так блок сможет изменять размеры в зависимости от его содержимого, устройства пользователя и контента на сайте. Это особенно важно, если вы планируете использовать один и тот же блок для разных версий сайта. Подробнее о динамической адаптивности читайте ниже.

  • При определении размера контейнера в верстке или при установке ограничений в интерфейсе Рекламной сети учитывайте те рекламные форматы, которые вы хотите размещать в блоке. Чтобы получать максимальный доход, рекомендуем показывать все доступные форматы: текстово-графические объявления, медийную рекламу и видеорекламу.
  • Учитывайте требования к размерам у разных форматов рекламы:
    Медийная реклама (фиксированная)

    Фиксированные медийные баннеры имеют строго установленные размеры.

    Список размеров медийных баннеров
    Горизонтальные Вертикальные С адаптивной шириной
    • 300 × 250
    • 320 × 50
    • 320 × 100
    • 320 × 480
    • 336 × 280
    • 480 × 320
    • 728 × 90
    • 970 × 90
    • 970 × 250
    • 1000 × 120
    • 160 × 600
    • 240 × 400
    • 240 × 600
    • 300 × 300
    • 300 × 500
    • 300 × 600
    • 320 × 480
    • 100% × 90
    • 100% × 120
    • 100% × 180
    • 100% × 200
    • 100% × 250
    Горизонтальные Вертикальные С адаптивной шириной
    • 300 × 250
    • 320 × 50
    • 320 × 100
    • 320 × 480
    • 336 × 280
    • 480 × 320
    • 728 × 90
    • 970 × 90
    • 970 × 250
    • 1000 × 120
    • 160 × 600
    • 240 × 400
    • 240 × 600
    • 300 × 300
    • 300 × 500
    • 300 × 600
    • 320 × 480
    • 100% × 90
    • 100% × 120
    • 100% × 180
    • 100% × 200
    • 100% × 250

    Рекламодатели особенно часто используют баннеры следующих размеров:

    300 × 250 320 × 50 240 × 400
    300 × 300 320 × 100
    300 × 250 320 × 50 240 × 400
    300 × 300 320 × 100

    Рекомендуем задавать размеры контейнера и блока таким образом, чтобы в заданные размеры вписывался хотя бы один из этих баннеров.

    Фиксированный баннер должен полностью вписываться в размеры контейнера или блока:

    • Если настройках блока указан размер Адаптивный, то при подборе баннера учитываются только размеры контейнера на сайте. Из всего списка доступных баннеров будут показаны те, которые точно вписываются в контейнер или занимают большую его часть (не менее 40% по высоте и 70% по ширине).

      Пример
      В контейнере размера 300 × 300 могут быть показаны фиксированные баннеры 300 × 300 и 300 × 250. Баннеры других размеров не подбираются.

    • Если в настройках блока указан размер Адаптивный с ограничениями, то при подборе баннера учитываются как размеры контейнера на сайте, так и ограничения, заданные в интерфейсе Рекламной сети. Из всего списка доступных баннеров будут показаны те, которые полностью вписываются в итоговый диапазон размеров.

      Пример
      В настройках блока заданы ограничения: ширина блока — от 100 до 320 пикселей, высота блока — от 50 до 300 пикселей.В этом случае в блоке могут быть показаны баннеры 300 × 250, 300 × 300, 320 × 50, 320 × 100 пикселей.

      Если минимальные размеры не заданы, то при подборе баннера применяется условие: баннер должен занимать не менее 40% по высоте и 70% по ширине контейнера. Это необходимо, чтобы избежать показа слишком маленьких баннеров в блоке.

      Пример
      В настройках блока заданы только максимальные значения: ширина — до 320 пикселей, высота — до 300 пикселей. В этом случае в блоке могут быть показаны только баннеры 300 × 250, 300 × 300 пикселей.

    • Если в настройках блока указан размер Фиксированный, будут показаны только те баннеры, размер которых точно соответствует заданному размеру блока. Например, если задан размер блока 320 × 300, фиксированные баннеры не будут показаны (так как баннеров такого размера нет).

    Адаптивная медийная реклама и текстово-графические объявления

    Могут быть показаны в блоке любого размера. Подробнее о размещении адаптивной рекламы читайте в разделе Как разместить баннер на сайте.
    Видеореклама

    Может быть показана, если размер блока не меньше 320 × 180 пикселей. Для отображения дополнительных элементов видеорекламы (фавиконка, логотип, домен, заголовок, кнопка действия) требования к размеру контейнера выше:

    • 320 × 220 пикселей — для горизонтального видео;
    • 240 × 280 пикселей — для квадратного видео;
    • 180 × 360 пикселей — для вертикального видео.
    Медийная реклама (фиксированная)

    Фиксированные медийные баннеры имеют строго установленные размеры.

    Список размеров медийных баннеров
    Горизонтальные Вертикальные С адаптивной шириной
    • 300 × 250
    • 320 × 50
    • 320 × 100
    • 320 × 480
    • 336 × 280
    • 480 × 320
    • 728 × 90
    • 970 × 90
    • 970 × 250
    • 1000 × 120
    • 160 × 600
    • 240 × 400
    • 240 × 600
    • 300 × 300
    • 300 × 500
    • 300 × 600
    • 320 × 480
    • 100% × 90
    • 100% × 120
    • 100% × 180
    • 100% × 200
    • 100% × 250
    Горизонтальные Вертикальные С адаптивной шириной
    • 300 × 250
    • 320 × 50
    • 320 × 100
    • 320 × 480
    • 336 × 280
    • 480 × 320
    • 728 × 90
    • 970 × 90
    • 970 × 250
    • 1000 × 120
    • 160 × 600
    • 240 × 400
    • 240 × 600
    • 300 × 300
    • 300 × 500
    • 300 × 600
    • 320 × 480
    • 100% × 90
    • 100% × 120
    • 100% × 180
    • 100% × 200
    • 100% × 250

    Рекламодатели особенно часто используют баннеры следующих размеров:

    300 × 250 320 × 50 240 × 400
    300 × 300 320 × 100
    300 × 250 320 × 50 240 × 400
    300 × 300 320 × 100

    Рекомендуем задавать размеры контейнера и блока таким образом, чтобы в заданные размеры вписывался хотя бы один из этих баннеров.

    Фиксированный баннер должен полностью вписываться в размеры контейнера или блока:

    • Если настройках блока указан размер Адаптивный, то при подборе баннера учитываются только размеры контейнера на сайте. Из всего списка доступных баннеров будут показаны те, которые точно вписываются в контейнер или занимают большую его часть (не менее 40% по высоте и 70% по ширине).

      Пример
      В контейнере размера 300 × 300 могут быть показаны фиксированные баннеры 300 × 300 и 300 × 250. Баннеры других размеров не подбираются.

    • Если в настройках блока указан размер Адаптивный с ограничениями, то при подборе баннера учитываются как размеры контейнера на сайте, так и ограничения, заданные в интерфейсе Рекламной сети. Из всего списка доступных баннеров будут показаны те, которые полностью вписываются в итоговый диапазон размеров.

      Пример
      В настройках блока заданы ограничения: ширина блока — от 100 до 320 пикселей, высота блока — от 50 до 300 пикселей.В этом случае в блоке могут быть показаны баннеры 300 × 250, 300 × 300, 320 × 50, 320 × 100 пикселей.

      Если минимальные размеры не заданы, то при подборе баннера применяется условие: баннер должен занимать не менее 40% по высоте и 70% по ширине контейнера. Это необходимо, чтобы избежать показа слишком маленьких баннеров в блоке.

      Пример
      В настройках блока заданы только максимальные значения: ширина — до 320 пикселей, высота — до 300 пикселей. В этом случае в блоке могут быть показаны только баннеры 300 × 250, 300 × 300 пикселей.

    • Если в настройках блока указан размер Фиксированный, будут показаны только те баннеры, размер которых точно соответствует заданному размеру блока. Например, если задан размер блока 320 × 300, фиксированные баннеры не будут показаны (так как баннеров такого размера нет).

    Адаптивная медийная реклама и текстово-графические объявления

    Могут быть показаны в блоке любого размера. Подробнее о размещении адаптивной рекламы читайте в разделе Как разместить баннер на сайте.
    Видеореклама

    Может быть показана, если размер блока не меньше 320 × 180 пикселей. Для отображения дополнительных элементов видеорекламы (фавиконка, логотип, домен, заголовок, кнопка действия) требования к размеру контейнера выше:

    • 320 × 220 пикселей — для горизонтального видео;
    • 240 × 280 пикселей — для квадратного видео;
    • 180 × 360 пикселей — для вертикального видео.

Как использовать динамическую адаптивную рекламу в Баннере

Динамическая адаптивность — это свойство рекламного блока менять размеры в зависимости от его содержимого и параметров контейнера. Ширина блока обычно полностью занимает ширину контейнера, а высота блока определяется не только высотой контейнера, но также дизайном объявления и количеством элементов. Это позволяет показывать рекламные видео и изображения, не обрезая их, и гибко комбинировать элементы объявления в зависимости от пользователя.

Чем шире диапазон размеров, который контейнер предоставляет блоку, тем более адаптивной будет реклама. За счет этого можно показывать объявления разного размера для разных устройств и избегать несоответствий между размерами рекламы и экрана.

Базовые критерии динамической адаптивности в Яндексе:

  • Блок органично вписан по ширине: в мобильной версии соответствует ширине контента или 100% экрана, в десктопной — размещается на боковых панелях справа и слева от контента.
  • Рекламный блок имеет нефиксированную (динамическую) высоту и вписан в вертикальный контейнер (ширина меньше высоты) — именно это определяет адаптивность рекламы.

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

Рекомендации по использованию динамических адаптивных блоков

Чтобы блоки с динамической адаптивной рекламой корректно отображались и минимально влияли на восприятие сайта пользователем, следуйте рекомендациям:

  • Размещайте динамическую адаптивную рекламу там, где она с меньшей вероятностью вызовет сдвиги в контенте:

    • Не добавляйте динамическую адаптивную рекламу на первый экран. В крайнем случае разместите ее в нижней части экрана, чтобы рекламный блок заканчивался вне видимой области. Мы рекомендуем устанавливать динамические адаптивные блоки на втором и последующих экранах.
    • Не добавляйте динамическую адаптивную рекламу над шапкой страницы. В этом случае используйте фиксированные контейнеры.
  • Ширина динамического адаптивного блока должна соответствовать ширине контента в верстке (при этом ширина контента в верстке должна приближаться к 100%).
  • Не фиксируйте высоту динамических адаптивных блоков. Задавайте максимальную высоту max-height в коде блока не менее 70 vh и не более 90 vh. Это поможет избежать ситуаций, когда по высоте реклама превышает размеры экрана или, наоборот, сильно уменьшается на больших дисплеях. Подробнее об ограничении высоты блока.
  • Добавляйте плейсхолдер. Плейсхолдер — это контейнер внутри рекламного блока, который занимает место в верстке, пока не отобразилась реклама. Чтобы место бронировалось сразу, добавьте плейсхолдер в код вызова рекламы. Его рекомендуемая высота рассчитывается по формуле: max-height рекламного блока × 0,9. Это позволит избежать сдвигов контента при загрузке рекламы и минимизировать ее влияние на CLS вашего сайта.
    Пример кода вызова динамической адаптивной рекламы с плейсхолдером
    <!-- Yandex.RTB R-I-677833-1 динамический адаптивный блок с максимальной высотой --> 
<div id="yandex_rtb_R-I-677833-1" style="max-height: 80vh;"> 
  <!-- плейсхолдер -->
  <div style="height: 72vh;"></div>
 </div> 
<script>window.yaContextCb.push(()=>{ 
  Ya.Context.AdvManager.render({ 
    renderTo: 'yandex_rtb_R-I-677833-1', 
    blockId: 'R-I-677833-1' 
  })
})</script>

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