РСЯ: как управлять размером медийных баннеров?

Добрый день! Формат Директ «Настраиваемый» позволяет управлять шириной контейнера в таблице стилей сайта — https://yandex.ru/support/partner2/web/products-rtb/partner-code.html#partner-code__adaptive-css

В конструкторе Директ выберите:

• тип - фиксированный,
• ориентация - указать размеры вручную (свой размер),
• формат - Настраиваемый.

Данная настройка будет распространяться только на Директ, но не на Медийную рекламу.

Если вы хотите гибко управлять размерами и настройками блоков в зависимости от ширины вьюпорта, лучше использовать адаптивный скрипт. Для реализации адаптивного показа (без лишних запросов к блокам) рекомендую использовать адаптивный скрипт.

Для того, чтобы рекламный блок, отображался на мобильной версии сайта (при ширине экрана менее 768px) одним образом, а на десктопе (например, при ширине экрана устройства свыше 1000px) другим образом, нужно в интерфейсе РСЯ создать два блока с подходящими для этих версий сайта настройками (например, блок с небольшими размерами для мобильного сайта и большой блок для десктопа). Перед установкой на сайт стандартный javascript-код этих блоков (полученный по кнопке "Получить код") нужно заменить на адаптивный Javascript, который учитывает ширину вьюпорта и в зависимости от нее загружает или не загружает RTB-блок на страницу сайта.

Коды этих двух блоков нужно установить рядом в html-код страницы.

Если вы хотите, чтобы блок отображался только на мобильной версии сайта (до 768px), можно использовать следующий код (добавив его на место блока и заменив «ID блока» на нужный ID):

<div id="yandex_ad1" style="margin:0 auto;"></div>

<script type="text/javascript">

(function(w, d, n, s, t){

if (window.matchMedia("only screen and (max-device-width: 768px)").matches){

w[n] = w[n] || [];

w[n].push(function() {

Ya.Context.AdvManager.render({

blockId: ID блока ,

renderTo: "yandex_ad1",

async: true

});

});

t = d.getElementsByTagName("script")[0];

s = d.createElement("script");

s.type = "text/javascript";

s.src = "//an.yandex.ru/system/context.js";

s.async = true;

t.parentNode.insertBefore(s, t);

}

})(this, this.document, "yandexContextAsyncCallbacks");

</script>

Этот блок будет пропадать на десктопной версии (свыше 768px).

id="yandex_ad1" так же должен быть уникальным на странице (то есть, для нескольких блоков нужно использовать id="yandex_ad1", id="yandex_ad2" и т.д.)

Для добавления другого блока для десктопной версии нужно создать другой блок. Если использовать следующий код, данный блок будет отображаться только на десктопной версии ("ID блока" так же необходимо заменить на ID нужного блока):

<div id="yandex_ad2" style="margin:0 auto;"></div>

<script type="text/javascript">

(function(w, d, n, s, t){

if (window.matchMedia("only screen and (min-device-width: 1000px)").matches){

w[n] = w[n] || [];

w[n].push(function() {

Ya.Context.AdvManager.render({

blockId: ID блока ,

renderTo: "yandex_ad2",

async: true

});

});

t = d.getElementsByTagName("script")[0];

s = d.createElement("script");

s.type = "text/javascript";

s.src = "//an.yandex.ru/system/context.js";

s.async = true;

t.parentNode.insertBefore(s, t);

}

})(this, this.document, "yandexContextAsyncCallbacks");

</script>