Нативный дизайн

Внимание. Используя блоки с нативным дизайном, вы принимаете риски, описанные в п. 3.21 Оферты. Перед настройкой дизайна ознакомьтесь с действующим законодательством в сфере рекламы, в том числе с требованиями к обязательным элементам рекламы и их площади.
  1. Шаблон блока
  2. Обязательные элементы рекламы
  3. Дизайн блока
  4. Дизайн отдельных элементов рекламы
  5. Дизайн рекламы мобильных приложений
  6. Видеоурок: Настройка нативной рекламы в аукционе дизайнов
  7. Статистика

Нативная реклама — это формат, который можно гибко подстроить под внешний вид сайта.

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

Добавить нативный дизайн можно при редактировании или создании RTB-блока: в визуальном конструкторе на шаге Рекламные форматы нажмите Добавить дизайн → Нативный дизайн.

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

Примечание. Если у вас нет опыта работы с HTML и CSS, рекомендуем взять за основу готовый шаблон дизайна. На вкладке Общее выберите подходящий шаблон из списка Шаблон дизайна и укажите размер сетки. После этого перейдите на вкладку Код и добавьте стили CSS, используемые на вашем сайте.

Шаблон блока

Шаблон определяет, какие элементы рекламы будут отображаться в объявлении. Все доступные элементы представлены на схеме:

За отображение каждого элемента в объявлении отвечает отдельный HTML-тег. Простейший шаблон с основными элементами:
<div class="wrapper">
  <div class="headline">Читайте также</div>
  <ya-units-grid cols="${grid_columns}" rows="${grid_rows}">
    <div class="image"><ya-unit-image /></div>
    <div class="title"><ya-unit-title /></div>
    <div class="desc"><ya-unit-desc /></div>
    <div class="domain"><ya-unit-domain /></div>
    <div class="meta">
      <span class="category"><ya-unit-category /></span>
    </div>
  <ya-unit-kebab />
  </ya-units-grid>
 </div>

Вы можете:

  • изменить внешний вид блока рекламного блока с сетки (<ya-units-grid />) на слайдер (<ya-units-slider />);
  • добавить в шаблон собственную верстку;
  • поменять местами элементы или вложить элементы в другие HTML-теги;
  • удалить дополнительные элементы, если не хотите, чтобы они отображались в блоке. Например, чтобы скрыть описание, удалите строку <ya-unit-desc />.
Важно.

В шаблоне обязательно должны быть элементы <ya-units-grid /> или <ya-units-slider />. Удалять эти элементы нельзя, иначе блок не будет работать корректно. Все элементы вида <ya-unit-... /> должны находиться внутри <ya-units-grid /> или <ya-units-slider />.

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

Обязательные элементы рекламы

По правилам Рекламной сети Яндекса эти элементы всегда должны быть в рекламном блоке:

Элемент HTML-тег Обязательный элемент рекламы Обязательный элемент рекламы мобильных приложений
Метка «Реклама» <ya-unit-category /> да да
Значок меню <ya-unit-kebab /> да да
Заголовок рекламы <ya-unit-title /> да нет
Домен <ya-unit-domain /> да нет
Цена <ya-unit-price /> нет да
Название приложения <ya-unit-app-name /> нет да
Иконка приложения <ya-unit-app-icon /> нет да
Кнопка действия приложения <ya-unit-mobile-app-button /> нет да
Примечание. Если в объявлении есть возрастная метка и предупреждение, они добавляются автоматически при отрисовке блока.

Дизайн блока

Стили классов CSS
В библиотеке CSS предустановлены стили для классов:
  • grid-row — строка сетки;
  • grid-item — ячейка сетки;
  • grid — сетка;
  • ya-units-slider — слайдер в целом;
  • ya-slider-item — карточка в слайдере;
  • unit-wrapper — рекламное место;
  • unit-image — картинка в рекламе.

Вы также можете создавать свои классы и настраивать стили для них.

Типовые настройки оформления
Формат блока

Блок с нативным дизайном может выглядеть как сетка заданного размера или как слайдер (горизонтальная лента объявлений с возможностью прокрутки). За отрисовку сетки отвечает элемент <ya-units-grid />, за отрисовку слайдера — <ya-units-slider />. Использовать оба эти элемента в одном шаблоне нельзя.

Настройка сетки

Элемент <ya-units-grid> рисует сетку по параметрам, заданным в полях Размер сетки. Изменять размер можно только с помощью этих же полей.

Исключение: если для различных размеров экранов нужно отображать разную сетку, задайте соответствия в параметре sizes. Последними обязательно должны идти переменные ${grid_columns}x${grid_rows}. Например:
HTML
<ya-units-grid sizes="(max-width: 1024px) 2x2, (max-width: 600px) 2x1, ${grid_rows}x${grid_columns}">
Соответствие сеток экранам в примере будет следующим:
  • на экране шириной меньше 600 пикселей отобразится сетка 2 × 1;
  • на экране шириной от 601 пикселя до 1024 пикселей — сетка 2 × 2;
  • на экране шириной от 1025 пикселей размер сетки будет определяться значениями в полях Размер сетки на вкладке Общее.
HTML
<ya-units-grid sizes="(max-width: 1024px) 2x2, (max-width: 600px) 2x1, ${grid_rows}x${grid_columns}">
Соответствие сеток экранам в примере будет следующим:
  • на экране шириной меньше 600 пикселей отобразится сетка 2 × 1;
  • на экране шириной от 601 пикселя до 1024 пикселей — сетка 2 × 2;
  • на экране шириной от 1025 пикселей размер сетки будет определяться значениями в полях Размер сетки на вкладке Общее.
Оформление сетки настраивается в CSS, в классах grid, grid-row, grid-item. Например:
CSS
.grid-row {
  margin-top: 10px; /* вертикальное расстояние между ячейками — 10 пикселей */
}
.grid-item {
  margin-left: 20px; /* горизонтальное расстояние между ячейками — 20 пикселей */
}
.grid {
  border: 1px solid #000; /* рамка вокруг всей сетки: толщина — 1 пиксель, тип линии — сплошная, цвет — черный */
}
Важно. Следует учитывать, что в коде HTML задается количество отображаемых ячеек блока. Количество загруженных рекламных объявлений определяют значения в полях Размер сетки. Например, если вы установите Размер сетки 5 × 2, а в элементе <ya-units-grid> для данного размера экрана будет настроена сетка 2 × 2, то отобразятся только 4 объявления из загруженных 10. В обратном случае: сетка 5 × 2, а количество объявлений 2 × 2, — в блоке будет шесть пустых ячеек.
Оформление сетки настраивается в CSS, в классах grid, grid-row, grid-item. Например:
CSS
.grid-row {
  margin-top: 10px; /* вертикальное расстояние между ячейками — 10 пикселей */
}
.grid-item {
  margin-left: 20px; /* горизонтальное расстояние между ячейками — 20 пикселей */
}
.grid {
  border: 1px solid #000; /* рамка вокруг всей сетки: толщина — 1 пиксель, тип линии — сплошная, цвет — черный */
}
Настройка слайдера
За отрисовку блока в виде слайдера отвечает элемент <ya-units-slider />.
Пример шаблона со слайдером:
<div class="block">
  <div class="headline">Читайте также</div>
  <ya-units-slider>
    <div class="unit">
      <ya-unit-kebab />
      <div class="image">
        <ya-unit-image ratio="0.5" />
      </div>
      <div class="body">
        <div class="title">
          <ya-unit-title />
        </div>
        <div class="meta">
          <span class="category">
            <ya-unit-category />
          </span>
          <span class="date">
            <ya-unit-date />
          </span>
        </div>
      </div>
    </div>
  </ya-units-slider>
  <div class="block-label">
    <div class="label">Яндекс рекомендации</div>
  </div>
</div>
Оформление слайдера можно настроить в CSS с помощью классов ya-units-slider (весь контейнер с карточками) и ya-slider-item (отдельная карточка в слайдере):
.ya-units-slider {
  width: 95vw;
}
.ya-slider-item:not(:first-child) {
  margin-left: 1em;
}
В слайдер можно добавить кнопку для прокрутки объявлений. Для этого внутрь элемента <ya-units-slider> добавьте элемент <ya-slider-button>. Направление прокрутки указывается с помощью аттрибута direction:
  • Значение left задает прокрутку влево. Кнопка для прокрутки будет расположена перед объявлениями в слайдере.
  • Значение right задает прокрутку вправо. Кнопка для прокрутки будет расположена после объявлений в слайдере.
Если внутри <ya-slider-button> есть элемент с классом ya-clickable, то прокрутка выполняется по клику на этот элемент. Если такого элемента нет, прокрутка выполняется по клику на саму кнопку.
Например:
<ya-slider-button direction="left">В начало</ya-slider-button>
При прокрутке до крайнего левого или крайнего правого положения элементу <ya-units-slider /> будут добавлены классы ya-slider-leftmost и ya-slider-rightmost соответственно.
Примечание. Если кнопки прокрутки располагаются над ячейкой слайдера, мы не рекомендуем скрывать их по этим классам: это может привести к ошибочным кликам.
Оформление блока
Чтобы задать настройки для всего блока в целом (цвет подложки текста, отступы и др.), заключите весь код блока в тег, задайте класс (например, wrapper) и настройте для этого класса нужные параметры в CSS.
HTML
<div class="wrapper">
  <ya-units-grid cols="${grid_columns}" rows="${grid_rows}">
  ...
  </ya-units-grid>
</div>
CSS
.wrapper {
  background: #fff; /* цвет подложки — белый */
  padding: 10px; /* отступы внутри рамки, со всех сторон — 10 пикселей */
  margin: 5px; /* отступы снаружи рамки, со всех сторон — 5 пикселей */
  border: 2px solid #000; /* рамка: толщина — 1 пиксель, тип линии — сплошная, цвет — черный */
  border-radius: 6px; /* скругление углов рамки с 6 пикселей */
}
Ограничение количества отображаемых строк
Можно применять к заголовку. Чтобы ограничить количество строк, которые будут отображаться в блоке, заключите соответствующий элемент в тег <ya-clamp>. Например:
HTML
Исходный вид элемента заголовка:
<div class="title"><ya-unit-title /></div>
Ограничение отображаемых строк заголовка до двух:
<ya-clamp lines="2" class="title"><ya-unit-title /></ya-clamp>
Или
<div class="title"><ya-clamp lines="2"><ya-unit-title /></ya-clamp></div>
Внешний вид текста
Внешний вид текста настраивается с помощью CSS. Выберите класс нужного элемента и измените значения его параметров.
Настройка шрифта и интервалов
CSS

.headline {
  font-family: Helvetica, sans-serif; /* шрифт */
  font-size: 18px; /* размер шрифта — 18 пикселей */
  font-weight: bold; /* толщина букв — жирный */
  font-style: italic; /* начертание — курсив */
  line-height: 24px; /* межстрочный интервал — 24 пикселя */
  letter-spacing: 1px; /* межбуквенный интервал — 1 пиксель*/
  text-decoration: underline; /* декорирование текста — подчеркнутый */
  text-transform: uppercase; /* регистр — все заглавные */
  text-align: right; /* выравнивание — по правому краю */
  color: #373e44; /* цвет текста — темно-серый */
  background: #fff; /* цвет подложки — белый */
}
                          
.category {
  color: #093; /* цвет текста — зеленый */
  font-size: 12px; /* размер шрифта — 12 пикселей */
  text-transform: uppercase; /* регистр — все заглавные */
}
                        
Настройка отступов
CSS

.headline {
  padding-top: 10px; /* отступ сверху — 10 пикселей */
  padding-right: 10px; /* отступ справа — 10 пикселей */
  padding-bottom: 10px; /* отступ снизу — 10 пикселей */
  padding-left: 10px; /* отступ слева — 10 пикселей */
}
Создание рамки вокруг текста
CSS

.headline {
  border: 1px solid #000; /* рамка: толщина — 1 пиксель, тип линии — сплошная, цвет — черный */
}
Внешний вид ячейки

Задать цвет подложки или рамку для каждой ячейки можно с помощью класса unit-wrapper. Например:

CSS
.unit-wrapper {
  background: #fff; /* цвет подложки — белый */
  border: 1px solid #666; /* рамка: толщина — 1 пиксель, тип линии — сплошная, цвет — серый */
  padding: 5px; /* отступы внутри ячейки — 5 пикселей */
  border-radius: 6px; /* скругление углов с 6 пикселей */
}
Задать отдельное оформление для ячейки, в которую загружается объявление без изображения, можно с помощью класса <unit-wrapper.unit-without-image>. Например:
CSS
.unit-wrapper.unit-without-image {
  background: #fff; /* цвет подложки — белый */
  border: 1px solid #666; /* рамка: толщина — 1 пиксель, тип линии — сплошная, цвет — серый */
  padding: 5px; /* отступы внутри ячейки — 5 пикселей */
  border-radius: 6px; /* скругление углов с 6 пикселей */
}
Адаптация внешнего вида под разный дизайн сайта

Вы можете динамически менять внешний вид объявлений для разных разделов сайта или тем оформления (например, светлой или темной). Для этого добавьте в код вставки параметр additionalClasses и перечислите в нем массив классов, например:

<script>
    (yaads = window.yaads || []).push({
        id: "123456-7",
        render: "div",
        additionalClasses: ["dark", "light"]
    });
</script>

При вызове кода эти классы будут добавлены корневому элементу <ya-units-grid> или <ya-units-slider>:

<ya-units-grid cols="1" rows="1"> <!-- при вызове кода классы добавляются корневому элементу -->
  <div class="image">
    <ya-unit-image ratio="1" />
  </div>
</ya-units-grid>

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

.dark .image {
  background-color: black;
}
                
.light .image {
  background-color: white;
}

Дизайн отдельных элементов рекламы

Значок меню в объявлении

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

В HTML-шаблоне за значок меню отвечает элемент <ya-unit-kebab />. Он должен находиться непосредственно в <ya-units-grid /> или <ya-units-slider />.

Редактирование значка меню
Значок меню по умолчанию белый с полупрозрачной подложкой. Для отрисовки на белом фоне можно поменять цвет значка на черный и убрать подложку: для этого используйте класс ya-unit-kebab_dark.
<ya-unit-kebab class="ya-unit-kebab_dark" />
Задать любой другой цвет значка можно помощью параметра backgroundColor:
<ya-unit-kebab backgroundColor="#000000"/>
Картинка в объявлении

Добавить картинку в шаблон можно с помощью элемента <ya-unit-image>.

Редактирование картинки
Вы можете:
  • задать соотношение сторон — параметр ratio;
  • отключить показ видео (если оно есть в рекламе) — параметр disable-video;
  • указать путь к изображению-заглушке (будет показано в блоке, если в объявлении изображений нет) — параметр src.
HTML
<ya-unit-image ratio="0.5" disable-video src="https://example.com/image/image.png">
Другие характеристики, например, максимальная высота изображения или скругление углов, настраиваются в CSS в параметрах класса unit-image. Например:
CSS
.unit-image {
  max-height: 200px; /* максимальная высота — 200 пикселей */
  border-radius: 4px; /* скругление углов с 4 пикселей */
}
Информация о рекламодателе

Вы можете добавить в объявления данные рекламодателей:

Фавиконка сайта

Добавить фавиконку можно с помощью элемента <ya-unit-favicon />.

Фавиконка имеет фиксированный размер, который можно задать в параметре size. Допустимые размеры 16, 32 и 120 (по умолчанию — 16). Например:

<ya-unit-favicon size="32" />
Логотип

Логотип рекламодателя, который будет отображаться на объявлениях в блоке, можно добавить с помощью элемента <ya-unit-logo />.

Для случаев, когда в объявлении нет логотипа, установите изображение-заглушку в параметре src. По умолчанию изображение-заглушка имеет нулевую высоту.

<ya-unit-logo src="https://example.com/image/image.png" />
Если в объявлении нет логотипа, он заменяется на другие элементы в таком порядке: фавиконка — картинка — заглушка. Можно изменить этот порядок в параметре disabledSubstitution:
  • <ya-unit-logo disabledSubstitution="all" /> — исключается и фавиконка, и картинка. Логотип сразу заменяется на заглушку.
  • <ya-unit-logo disabledSubstitution="favicon" /> — исключается фавиконка: логотип заменяется картинку, при ее отсутствии — на заглушку.
  • <ya-unit-logo disabledSubstitution="image" /> — исключается картинка: логотип заменяется на фавиконку, при ее остутствии — на заглушку.
Быстрые ссылки на сайт

Добавляются с помощью элемента <ya-unit-sitelinks />. Количество быстрых ссылок можно ограничить параметром limit:.

Физический адрес

Добавляется с помощью элемента <ya-unit-address />.

Кнопка действия

В объявление можно добавить кнопку действия, нажатие которой переведет пользователя по рекламной ссылке. Для этого добавьте элемент <ya-unit-direct-button />.

Текст на кнопке задается рекламодателем в Яндекс.Директе. Чтобы этот текст появился при отрисовке объявления, укажите внутри <ya-unit-direct-button /> специальное значение {BUTTON_CAPTION}, например:

<ya-unit-direct-button><div>{BUTTON_CAPTION}</div></ya-unit-direct-button>

Браузер пользователя отрисует элемент как <div />:

<div class="ya-unit-direct-button"><div>Получить скидку</div></div>

Дизайн рекламы мобильных приложений

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

Обязательные элементы
Название приложения
Добавляется с помощью элемента <ya-unit-app-name />.
Иконка приложения
За иконку приложения отвечает элемент <ya-unit-app-icon />. Соотношение сторон иконки 1:1. Также можно указать изображение-заглушку для случаев, когда в рекламе нет иконки, например: <ya-unit-app-icon src="https://someurl" />.
Кнопка действия приложения
Выглядит как кнопка с текстом: «Установить», «Скачать» и т.п. Добавляется с помощью элемента <ya-unit-mobile-app-button />, который в браузере пользователя отрисуется как <div /> с заданным текстом.
Цена (с символом валюты)
Добавляется с помощью элемента <ya-unit-price />.
Дополнительные элементы
Рейтинг приложения
Добавляется с помощью элемента <ya-unit-rating />. В диапазоне от 0 до 5. Выглядит как пять звезд серого цвета, часть которых закрашена желтым. Количество закрашенных звезд соответствует рейтингу приложения. Также отображаются дробные значения (например, рейтинг 3,5 отображается как 3,5 желтых звезды).

Чтобы отрисовать рейтинг в короткой форме, можно указать параметр isShort: <ya-unit-rating isShort /> — тогда пользователь увидит одну желтую звезду и рядом значение рейтинга в виде числа.

Количество оценок в рейтинге приложения
Добавляется с помощью элемента <ya-unit-review-count />. Рекомендуем добавлять вместе с рейтингом приложения.

При отрисовке рекламы мобильных приложений элементам объявления присваивается класс .ya-unit-item-rmp — используйте его, чтобы настроить дизайн такой рекламы в CSS.

Видеоурок: Настройка нативной рекламы в аукционе дизайнов

Примечание. В видеоролике упоминается устаревший обязательный элемент «крестик закрытия». Вместо крестика закрытия используйте элемент «значок меню».

Статистика

Для просмотра отчета по показам нативного дизайна в блоке раскройте меню его карточки и нажмите Статистика.