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

Дополнительные элементы рекламы делают объявление более привлекательным и могут увеличить конверсию рекламного блока.

Изображения или видео

С помощью элемента <ya-unit-image> можно добавить в объявление карусель изображений, видео или картинку:

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

Как это выглядит
Если по тегу <ya-unit-image> от рекламодателя пришло видео, то оно отобразится в объявлении. Если видео нет, отобразится картинка.
Если в объявлении нет картинки, можно поставить заглушку. Чтобы указать путь к изображению-заглушке, добавьте в тег <ya-unit-image> параметр src.

Редактирование изображений или видео

Чтобы задать соотношение сторон, используйте параметр ratio (отношение высоты к ширине). Можно задать соотношение сторон от от 9 : 16 до 2 : 1.

Как это выглядит
Чтобы указать адаптивное соотношение сторон для блоков с нефиксированной высотой, используйте параметр ratio="adaptive". Изображение или видео будет вставлено без ограничений и займет минимум 180 пикселей, но не более 60% от видимой области окна браузера (без прокрутки).
Ограничить по высоте адаптивные изображения или видео можно с помощью параметра max-height. Максимальная высота задается в пикселях или % от видимой области окна браузера, например max-height="140" или max-height=40vh.
Чтобы полностью вписать картинку или видео в заданную область, без обрезки, используйте атрибут 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>

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

<ya-unit-logo src="https://example.com/image/image.png" />

Логотип

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

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

<ya-unit-logo disabledSubstitution="all" /> — исключается и фавиконка, и картинка. Логотип сразу заменяется на заглушку.
<ya-unit-logo disabledSubstitution="favicon" /> — исключается фавиконка: логотип заменяется на картинку, при ее отсутствии — на заглушку.
<ya-unit-logo disabledSubstitution="image" /> — исключается картинка: логотип заменяется на фавиконку, при ее отсутствии — на заглушку.

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

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

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

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

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

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

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

Уточнения

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

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

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

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

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

Цена

За отрисовку цены отвечает элемент <ya-unit-price />: отображается старая цена, новая цена и символ валюты (рубли, белорусские рубли, тенге, лиры, доллары, евро и пр.). Чтобы отключить показ старой цены, добавьте к элементу атрибут disabled-old-price.

Стилизовать отдельные подэлементы (новую или старую цену) можно с помощью классов .ya-unit-price-current и .ya-unit-price-old соответственно.

При настройке дизайна убедитесь, что старая цена хорошо различима, а ее дизайн указывает на то, что она более не актуальна. Объявление должно выглядеть корректно при разной величине новой и старой цен (от 10 ₽ до 100 000 000 ₽).

Скидка

В объявлении может отображаться скидка на рекламируемый товар — для этого добавьте элемент <ya-unit-discount />.

Чтобы задать минимальное значение скидки, используйте параметр minDiscount c необходимым размером скидки в процентах, например minDiscount="20". Если скидка меньше, чем заданное минимальное значение, она не будет показана в объявлении. Если вы добавили параметр, но не задали минимальный размер скидки, по умолчанию устанавливается значение 5%.

Дизайн скидки не должен противоречить остальным рекламным форматам Рекламной сети Яндекса.

Соблюдайте следующий приоритет отрисовки элементов цены и скидки: новая цена (цена), старая цена, скидка.

Пример отображения цены и скидки

Описание

Чтобы добавить в объявление описание, используйте тег <ya-unit-desc>. Описание влияет на конверсию рекламного объявления. Убедитесь, что объявление одинаково корректно выглядит как при коротком описании (10–12 символов), так и при максимально длинном (75 символов).

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

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

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

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

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

В объявление можно добавить промоакцию — короткое описание акции с выделяющимся дизайном.

Чтобы добавить промоакцию, используйте тег <ya-unit-promo>. Этот тег поддерживает атрибуты:

inline — для того, чтобы текст промоакции выводился в одну строку. Если текст не помещается в одну строку, то по умолчанию будет запущена анимация — автоскролл.
class — для добавления дополнительного класса.
gradient — для добавления градиента. По умолчанию цвет текста промоакции — черный.

Спецификации

С помощью спецификаций в объявление можно добавить сведения о продукте в формате Параметр → Значение. Например, это могут быть характеристики автомобиля или описание квартиры.

Для добавления спецификации используйте тег <ya-unit-specifications>. Тег поддерживает атрибуты:

limit — для ограничения количества пунктов спецификации. По умолчанию максимальное количество пунктов — 6.
class — для добавления дополнительного класса.