Работа с кодом вызова рекламных блоков Директа

В настоящее время создание новых блоков Яндекс.Директа недоступно. Создавайте блоки RTB и управляйте показами контекстной и медийной рекламы с помощью стратегий.

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

За вызов рекламы в коде отвечает функция Ya.Context.AdvManager.render.

Внимание. Мы не рекомендуем неопытным пользователям самостоятельно вносить изменения в код вызова рекламных блоков. Изменение любых переменных и функций, кроме описанных на данной странице, может привести к ошибкам в работе блоков Рекламной сети и, следовательно, к снижению дохода.

Callback-функция, вызываемая после отрисовки рекламы

Callback-функция onRender позволяет получить информацию о том, произошла ли отрисовка рекламы (удалось ли подобрать рекламу по запросу к RTB-системе) и какая именно реклама была показана. Функция принимает параметр data.product с одним из двух значений:

  • direct — в блоке RTB были показаны объявления Директа;

  • rtb — в блоке RTB было показано медийное рекламное объявление.

Сallback-функцию onRender нужно добавить в качестве последнего параметра функции Ya.Context.AdvManager.render. Функцию возможно использовать только в асинхронном коде вызова рекламы.

Пример асинхронного кода вызова рекламы с функцией onRender
function renderRtb () {
    Ya.Context.AdvManager.render({
        blockId: "R-A-12345-1",
        renderTo: 'rtb',
        async: true,
        onRender: function(data) {
            console.log(data.product);
        }
    });
};

(function(w, d, n, s, t) {
    w[n] = w[n] || [];
    w[n].push(renderRtb);
    t = d.getElementsByTagName("script")[0];
    s = d.createElement("script");
    s.type = "text/javascript";
    s.src = "http://an.yandex.ru/system/context.js";
    s.async = true;
    t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");

Показ рекламы в лентах с бесконечной прокруткой

Для показа рекламы в лентах с бесконечной прокруткой можно использовать один и тот же рекламный блок, в котором изменяется параметр pageNumber и название контейнера renderTo. Уникальный идентификатор блока blockId, полученный в конструкторе, остается неизменным.

Пример кода вызова для первого блока
<div id="yandex_rtb_1"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "yandex_rtb_1",
                async: true,
                pageNumber: 1
            });
        });
        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>
Пример кода вызова для второго блока
<div id="yandex_rtb_2"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "yandex_rtb_2",
                async: true,
                pageNumber: 2
            });
        });
        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>

Размеры контейнера для размещения адаптивного блока

Адаптивный блок подстраивается под размеры контейнера и подходит для сайтов с адаптивной версткой. Для задания размеров контейнера на сайтах с адаптивной версткой используйте таблицы стилей.

  1. В коде вызова, полученном в интерфейсе, добавьте тегу div CSS-класс yandex-adaptive.

    Пример
    <div id="yandex_direct_R-A-12345-1" class="yandex-adaptive"></div>
  2. Чтобы контейнер принимал разные размеры в зависимости от разрешения экрана, используйте media-queries.

    Пример
    @media screen and (max-width: 800px) {
        .yandex-adaptive {
            width:200px;
            height:300px;
        }
    }
    
    @media screen and (max-width: 1024px) {
        .yandex-adaptive {
            width:240px;
            height:400px;
        }
    }

    Таким образом, на экранах шириной до 800 пикселей реклама будет показываться в блоке 200×300, а на экранах шириной от 800 до 1024 пикселей — в блоке 240×400. При ширине экрана больше 1024 пикселей, блок будет использовать заданные в интерфейсе размеры.

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