Настройка дизайна

Шаблон виджета

Шаблон определяет, какие элементы рекламы или рекомендации будут отображаться в ячейке виджета. За каждый элемент отвечает отдельный 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">
                      <ya-unit-category class="category"/>
                      <ya-unit-date class="date"/></div>
    <ya-unit-kebab />
  </ya-units-grid>
  <ya-recommendation-label />
</div>

Вы можете:

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

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

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

Стили классов CSS

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

Дизайн виджета

Формат виджета

Виджет может выглядеть как сетка заданного размера или как слайдер (горизонтальная лента рекомендаций с возможностью прокрутки). За отрисовку сетки отвечает элемент <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 пикселей размер сетки будет определяться значениями в полях Размер сетки на вкладке Общее.

Оформление сетки настраивается в 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, то отобразятся только четыре рекомендации из загруженных десяти. В обратном случае (сетка 5 × 2, а количество рекомендаций 2 × 2) в виджете будет шесть пустых ячеек.

Настройка слайдера

За отрисовку виджета в виде слайдера отвечает элемент <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="desc"><ya-unit-desc /></div>

Ограничение отображаемых строк описания предложения до двух:

<ya-clamp lines="2" class="desc"><ya-unit-desc /></ya-clamp>

Или

<div class="desc"><ya-clamp lines="2"><ya-unit-desc /></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 пикселей */
}

Адаптация внешнего вида под тему оформления сайта

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

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

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

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

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

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

Меню в объявлении также изменяется в зависимости от темы. Но мы не рекомендуем использовать media queries для стилизации темы в рекламных блоках, так как в этом случае меню не адаптируется под тему оформления.

Примечание. Ранее для адаптации рекламы под тему сайта мы использовали параметры additionalClasses и nativeAdditionalClasses: в будущем они перестанут поддерживаться.

Открытие рекомендации в новой вкладке

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

В HTML-шаблоне можно задать открытие всех ссылок в новой вкладке, добавив атрибут target-blank к тегу <ya-units-grid> или <ya-units-slider>. Например:

<ya-units-grid target-blank cols="${grid_columns}" rows="${grid_rows}">

Лейбл виджета

В HTML-шаблоне за лейбл отвечает элемент <ya-recommendation-label>. Если его удалить из шаблона, лейбл не будет отображаться в виджете. В параметре text вы можете задать свой текст лейбла. Например:

HTML

<ya-recommendation-label text="Рекомендации" />

По умолчанию лейбл выводится серым цветом и выравнивается по правому краю виджета. Изменить эти настройки можно в CSS, в параметрах класса recommendation-label. Например:

CSS

.recommendation-label {
  color: black; /* цвет текста — черный */
  text-align: left; /* выравнивание по левому краю */
}

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

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

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

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

Редактирование значка меню

Значок меню по умолчанию белый с полупрозрачной подложкой. Для отрисовки на белом фоне можно поменять цвет значка на черный и убрать подложку: для этого используйте класс ya-unit-kebab_contrast.

<ya-unit-kebab class="ya-unit-kebab_contrast" />

Задать любой другой цвет значка можно помощью параметра backgroundColor:

<ya-unit-kebab backgroundColor="#000000"/>

Категория рекомендации или объявления

Чтобы скрыть категорию в рекомендациях, добавьте в элемент <ya-unit-category /> параметр ad-only. В рекламных ячейках вместо категории отображается метка «Реклама» и скрывать ее нельзя — это обязательный элемент.

В элементе <ya-unit-category /> класс CSS указывайте не для самого элемента, а для оборачивающего тега. Это нужно, чтобы к метке «Реклама» корректно применялись стили, когда категория отсутствует (не прописана в метатегах рекомендаций или добавлен параметр ad-only).

Изображения или видео в рекомендации или объявлении

В HTML-шаблоне за изображения или видео отвечает элемент <ya-unit-image>. Если по тегу <ya-unit-image> от рекламодателя пришло несколько картинок, то они отобразятся в объявлении в виде карусели изображений. Если карусели изображений нет, отобразится видео или картинка.

Вы можете:

• задать соотношение сторон — параметр ratio (отношение высоты к ширине);
• указать адаптивное соотношение сторон для блоков с нефиксированной высотой — параметр ratio="adaptive". Изображение или видео будет вставлено без ограничений и займет минимум 180 пикселей, но не более 60% от видимой области окна браузера (без прокрутки);
• ограничить по высоте адаптивные изображения или видео в пикселях или % от видимой области окна браузера — параметр max-height (например, max-height="140" или max-height="40vh");
• указать путь к изображению-заглушке (будет показано в блоке, если в объявлении изображений нет) — параметр src;
• полностью вписать картинку или видео в заданную область, без обрезки — атрибут variant="contain" (например, <ya-unit-image ratio="0.5625" variant="contain" />).

Информация о рекламодателе в объявлении

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

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

Вы можете добавить фавиконку сайта рекламодателя с помощью элемента <ya-unit-favicon />. В этом случае под фавиконкой должен находиться сплошной белый фон (во избежание проблем с полупрозрачными фавиконками на темном и сложном фоне).

Фавиконка имеет фиксированный размер, который можно задать в параметре size. Допустимые размеры: 32 × 32 и 120 × 120 пикселей. По умолчанию указывается размер 32 × 32.

Если фавиконку отрисовать не удалось, можно вместо нее показывать картинку объявления. Для этого укажите атрибут allowImageFallback.

<ya-unit-favicon size="32" allowImageFallback></ya-unit-favicon>

Логотип

Вы можете добавить логотип рекламодателя, который будет отображаться на объявлениях в виджете, с помощью элемента <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" /> — исключается картинка: логотип заменяется на фавиконку, при ее отсутствии — на заглушку.

Уточнения

Вы можете добавить до 8 уточнений с помощью элемента <ya-unit-callouts />.

Возможно отображение только нескольких первых уточнений — их количество можно ограничить с помощью параметра limit.

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

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

Уточнения не кликабельны.

Быстрые ссылки на сайт

Быстрые ссылки добавляются с помощью элемента <ya-unit-sitelinks />. Объявление может содержать до 8 быстрых ссылок, ограничить их количество можно с помощью параметра limit.

<ya-unit-sitelinks limit="2" />

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

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

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

Добавляется с помощью элемента <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-date />. Вы можете изменить формат даты:

<ya-unit-date format="HH:MM dd-mm-yyyy" />

Динамическое дополнение

Вы можете добавить динамическое дополнение с помощью элемента <ya-unit-line-asset>. В нем будет показан один из элементов, следуя очередности: цена, быстрые ссылки на сайт, уточнения или рейтинг, если они добавлены. Например, если рекламодатель не добавил цену, но добавил быстрые ссылки и уточнения, то в динамическом дополнении будут показаны только быстрые ссылки, сколько поместится в одну строку.

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

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

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

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

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

Название приложения

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

Иконка приложения

За иконку приложения отвечает элемент <ya-unit-app-icon />. Соотношение сторон иконки 1:1. Также можно указать изображение-заглушку для случаев, когда в рекламе нет иконки, например: <ya-unit-app-icon src="https://someurl" />.

Цена (с символом валюты)

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

Дополнительные элементы

Рейтинг приложения

Добавляется с помощью элемента <ya-unit-rating />. В диапазоне от 0 до 5. Выглядит как пять звезд серого цвета, часть которых закрашена желтым. Количество закрашенных звезд соответствует рейтингу приложения. Также отображаются дробные значения (например, рейтинг 3,5 отображается как 3,5 желтых звезды).

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

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

Выглядит как кнопка с текстом: «Установить», «Скачать» и т.п. Добавляется с помощью элемента <ya-unit-mobile-app-button />, который в браузере пользователя отрисуется как <div /> с заданным текстом.

Количество оценок в рейтинге приложения

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

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

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