In-Image

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

In-Image привязывается к изображению внутри контента страницы. Пользователь может закрыть рекламу в любой момент.

Доступные форматы

Стандартные размеры блока: 100% по ширине изображения и 100 px в высоту.

Минимальный размер изображения:

ширина — 320 px;
высота — 190 px.

Если один из параметров будет меньше, блок не отрисуется.

В баннере могут быть показаны следующие форматы рекламы:

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

Пример отображения блока In-Image

Как создать блок In-Image

В интерфейсе Рекламной сети Яндекса перейдите на вкладку Реклама на сайтах → Блоки и нажмите Добавить блок.
Выберите сайт, для которого вы создаете блок, и нажмите Дальше.
Выберите тип блока In-Image.
Введите название блока для использования в интерфейсе Рекламной сети Яндекса.
Установите порог CPM:
- Максимальный доход — минимальная стоимость показа рекламы будет определяться автоматически. Эта опция позволяет оптимально заполнить рекламные места и максимизировать доход владельца сайта.
- Порог CPMV — вы самостоятельно определяете минимальную стоимость тысячи показов с учетом проверки видимости. Порог CPMV устанавливается в рублях, долларах или евро. Изменить валюту порога можно в настройках аккаунта.
  
  Внимание
  
  Установка порога CPMV может снизить заполняемость блока рекламой и, соответственно, ваш доход.
Выберите Тип интеграции, по которому будет распределена реклама:
- Автоматический (по умолчанию) — на всех изображениях, которые подходят под минимальные размеры.
- Разрешенные классы — на изображениях с выбранными классами. Укажите классы изображений, на которых может отображаться реклама. Для добавления класса введите его название в появившемся поле и нажмите Enter.
  Пример кода вставки изображения
  <img src="example.ru/image.jpg" class="adv">
  Где:
  - example.ru/image.jpg — путь к изображению на хостинге;
  - adv — название класса, по которому скрипт определяет возможность отрисовки рекламы на изображении.
- Разрешенный идентификатор — на изображениях, размеченных выбранными идентификаторами (id). Укажите идентификаторы изображений, на которых может отображаться реклама. Для добавления идентификатора введите его название в появившемся поле и нажмите Enter.
  Пример кода вставки изображения
  <img src="example.ru/image.jpg" id="adv">
  Где:
  - example.ru/image.jpg — путь к изображению на хостинге;
  - adv — название идентификатора, по которому скрипт определяет возможность отрисовки рекламы на изображении.
Также вы можете дополнительно установить:
- Лимит на страницу — максимальное количество рекламных блоков, которое отобразится на одной странице сайта;
- Ограничение для изображений — размер изображений, на которых будет показана реклама. Указанные значения должны быть больше минимальных.
Важно

При смене типа интеграции, изменении лимита блоков и установке новых ограничений обновляется код вставки рекламного блока. Если вы внесли изменения для блока, который уже размещен на сайте, получите новый код вставки.
Выберите тему: Темная или Светлая. По умолчанию выбрана светлая тема. Блоки в темной теме отличаются не только фоном, но и цветом текста, рамки, кнопок и других элементов рекламы. Выбранная тема применяется ко всем форматам в блоке.
Выберите способ настройки рекламных форматов:
- Использовать стандартные настройки — при выборе этой опции в блоке будут показаны все доступные форматы рекламы: текстово-графические объявления, медийная и видеореклама. Дизайн и параметры показа рекламы определяются автоматически.
- Настроить форматы самостоятельно — в этом случае вы можете посмотреть, как блок будет отображаться на экранах разного размера:
  
  Основной дизайн
  
  Медийная реклама
  
  Видеореклама
  
  Основной дизайн — это текстово-графические объявления формата Адаптивный .
  
  Выберите возможное количество объявлений на изображении в поле Максимум объявлений. По умолчанию установлено максимальное значение — 2. В области предпросмотра можно смоделировать, как блок будет выглядеть с одним или двумя объявлениями на разных устройствах.
  
  Медийная реклама подбирается автоматически с учетом размеров блока.
  
  Отключить формат не получится.
  
  Видеореклама подбирается автоматически с учетом размеров изображения. Минимальная площадь изображения — 360 × 560 пикселей. На изображениях меньшего размера видеореклама не будет показана.
Нажмите Создать. Откроется окно с кодом вставки. Используйте этот код для размещения блока на страницах сайта.

После сохранения блоку будет присвоен уникальный идентификатор (ID). Он состоит из идентификатора продукта (R-A), идентификатора площадки (site_id) и порядкового номера блока.

Как разместить блок In-Image на сайте

Получите код вставки: создайте новый блок или в настройках существующего блока нажмите Получить код.
Скопируйте код загрузчика рекламы в буфер обмена и вставьте его внутрь тега <head> на той странице, где вы планируете показывать блок In-Image. Код загрузчика устанавливается на страницу один раз и используется для вызова всех блоков Рекламной сети Яндекса.

Разместите код блока In-Image перед закрывающим тегом </body> в конце страницы. Он будет работать на десктопных и мобильных устройствах.

Пример кода с автоматической интеграцией для показа In-Image на сайте

<!-- Yandex.RTB R-A-77777-77 -->
<script>
(function renderInImage(adImagesCounter, images) {
    if (adImagesCounter <= 0 || !images.length) {
        return
    }
    const image = images.shift()
    image.id = `yandex_rtb_R-A-77777-77-${Math.random().toString(16).slice(2)}`
    window.yaContextCb.push(() => {
        Ya.Context.AdvManager.render({
            "renderTo": image.id,
            "blockId": "R-A-77777-77",
            "type": "inImage",
            "onRender": () => {
                renderInImage(adImagesCounter-1, images)
            },
            "altCallback": () => {
                renderInImage(adImagesCounter, images)
            },
            "onError": () => {
                renderInImage(adImagesCounter, images)
            }
        })
    })
})(9, Array.from(document.querySelectorAll("img")))
</script>