Стандартный дизайн

Стандартный дизайн — это рекламный формат для текстово-графических объявлений. Дизайн объявлений создается автоматически.

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

Для десктопной версии сайта в области предпросмотра можно настроить масштаб:

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

Для мобильной версии сайта в области предпросмотра нужно выбрать модель устройства и ориентацию устройства: вертикальную или горизонтальную.

  1. Адаптивный Smart Design
  2. Билборд
  3. Полноэкранный Smart Design

Адаптивный Smart Design

Формат Адаптивный  использует технологию Smart Design — она определяет, какие элементы объявления актуальны для каждого пользователя и вашей площадки, и при необходимости может добавить текст, быстрые ссылки, кнопку действия и другие элементы. В результате каждое объявление в форматах Smart Design будет выглядеть по-разному.

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

Для десктопной версии сайта можно настроить отображение объявления в виде билборда.

Как эффективно размещать адаптивную рекламу

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

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

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

  • Блок органично вписан по ширине: в мобильной версии соответствует ширине контента или 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>
    Дизайн плейсхолдера можно стилизовать под ваш сайт, чтобы до загрузки адаптивной рекламы его фон сочетался с основным дизайном сайта.
Настройки формата Адаптивный 
Основные

Позволяют задать максимальное количество объявлений в блоке. Максимальное количество объявлений зависит от выбранного формата и версии сайта.

Если в блоке больше одного объявления, можно задать их расположение:

  • Авто — автоматически с учетом размеров контейнера;
  • Слева направо — для горизонтального контейнера;
  • Сверху вниз — для вертикального контейнера.

В мобильной версии сайта и на Турбо-страницах, если в блоке больше двух объявлений и настроено расположение слева направо, объявления отображаются в карусели. Но если высота блока меньше 200 пикселей, будет показано одно объявление.
Цвета и заливки Позволяют настроить цвет фона в объявлениях формата Адаптивный .
Размер и расположение Позволяют задать ширину и высоту блока формата.
  • Для блока типа Floor Ad в мобильной версии сайта по умолчанию задана высота, равная 15% ширины экрана. Вы можете задать произвольную высоту, но не менее 50 пикселей. Если выбранная высота в момент показа на устройстве превысит 30% высоты экрана, она автоматически уменьшится до 30%.
  • Для блока Top Ad можно задать высоту не менее 50 и не более 100 пикселей.
Примечание. Мы не рекомендуем фиксировать размеры блока: это ограничивает количество доступных дизайнов, и технологии Smart Design будет сложнее подобрать дизайн, подходящий под конкретного пользователя.
Способ отображения

Показывать в интерскроллере — реклама плавно появляется из-под контента при прокрутке и скрывается под ним с использованием параллакс-эффекта.

Примечание. Эффект параллакса в блоке достигается за счет CSS-свойства position: fixed. Поэтому для корректной работы эффекта на любом из родительских элементов баннера не должны использоваться свойства transform, perspective или filter. Подробнее о CSS-свойстве position: fixed.
Основные

Позволяют задать максимальное количество объявлений в блоке. Максимальное количество объявлений зависит от выбранного формата и версии сайта.

Если в блоке больше одного объявления, можно задать их расположение:

  • Авто — автоматически с учетом размеров контейнера;
  • Слева направо — для горизонтального контейнера;
  • Сверху вниз — для вертикального контейнера.

В мобильной версии сайта и на Турбо-страницах, если в блоке больше двух объявлений и настроено расположение слева направо, объявления отображаются в карусели. Но если высота блока меньше 200 пикселей, будет показано одно объявление.
Цвета и заливки Позволяют настроить цвет фона в объявлениях формата Адаптивный .
Размер и расположение Позволяют задать ширину и высоту блока формата.
  • Для блока типа Floor Ad в мобильной версии сайта по умолчанию задана высота, равная 15% ширины экрана. Вы можете задать произвольную высоту, но не менее 50 пикселей. Если выбранная высота в момент показа на устройстве превысит 30% высоты экрана, она автоматически уменьшится до 30%.
  • Для блока Top Ad можно задать высоту не менее 50 и не более 100 пикселей.
Примечание. Мы не рекомендуем фиксировать размеры блока: это ограничивает количество доступных дизайнов, и технологии Smart Design будет сложнее подобрать дизайн, подходящий под конкретного пользователя.
Способ отображения

Показывать в интерскроллере — реклама плавно появляется из-под контента при прокрутке и скрывается под ним с использованием параллакс-эффекта.

Примечание. Эффект параллакса в блоке достигается за счет CSS-свойства position: fixed. Поэтому для корректной работы эффекта на любом из родительских элементов баннера не должны использоваться свойства transform, perspective или filter. Подробнее о CSS-свойстве position: fixed.

Билборд

Билборд — один из вариантов отображения формата Адаптивный . Он представляет собой большой анимированный текстово-графический баннер с одним объявлением. Анимация привлекает внимание к баннеру и делает его более информативным за счет смены разных элементов рекламы.

Набор элементов объявления, их цвет и цвет фона подбираются автоматически по технологии Smart Design под цветовую гамму изображения.

Как добавить в блок

В интерфейсе Рекламной сети Яндекса выберите десктопную версию сайта, добавьте формат Адаптивный  и в настройках формата в разделе Основные установите Максимальное количество объявлений — 1.

Условия показа
  • Минимальный размер контейнера, при котором Адаптивный  может быть отрисован в виде билборда, — 700 × 180 пикселей.
  • Билборд отображается только в десктопной версии сайта. В мобильной версии сайта будет показан стандартный вариант отображения формата Адаптивный  .
Рекомендации по размещению

Рекомендуемое место для билборда — над или под шапкой сайта.

Билборд сочетается с медийной, видеорекламой и прямыми продажами больших форматов. Медийную и видеорекламу вы можете настроить в интерфейсе Рекламной сети Яндекса. О том, как настроить прямые продажи в Adfox читайте в Справке.

Полноэкранный Smart Design

Ограничение. Формат доступен только для мобильной версии сайта c типом блока Полноэкранный.

Формат Полноэкранный  содержит текстово-графические объявления, которые отображаются на весь экран устройства. Пользователь может закрыть рекламу в любой момент.

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

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

По умолчанию Рекламная сеть сама определяет, отображать таймер или нет, для каждого конкретного показа. Управлять настройками таймера можно в окне Рекламные форматы. Откройте карточку со стандартным дизайном и справа в поле Способ отображения → Закрывать блок по таймеру выберите опцию:

  • Да — чтобы всегда отображать таймер и закрывать блок автоматически. У пользователя остается возможность закрыть блок раньше по клику на кнопку закрытия.
  • Нет — чтобы закрывать блок только по действию пользователя.
  • Авто — чтобы вернуться к настройкам по умолчанию: отображение таймера будет регулироваться алгоритмами Рекламной сети Яндекса.

Обратиться в службу поддержки

Написать письмо

Написать в чат