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

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

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

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

Визуальное оформление объявлений Директа

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

Имя переменной Описание Тип данных
bgColor Цвет фона объявления. Hex-код цвета
siteBgColor Фон сайта. Hex-код цвета
headerBgColor Цвет фона плашки. Hex-код цвета
borderColor Цвет фона рамки. Hex-код цвета
titleColor Цвет заголовка объявления. Hex-код цвета
textColor Цвет текста объявления. Hex-код цвета
sitelinksColor Цвет быстрых ссылок. Hex-код цвета
urlColor Цвет URL рекламодателя и/или ссылки «Адрес и телефон». Hex-код цвета
hoverColor Цвет заголовка при наведении курсора мышки. Hex-код цвета
Пример кода вызова рекламы с переменными directSettings
Ya.Context.AdvManager.render({
    blockId: "R-A-12345-1",
    renderTo: 'rtb',
    async: true,
    directSettings: {
        titleColor: '#f00',
        urlColor: '#00a',
        hoverColor: '#00f',
        bgColor: '#0f0',
        siteBgColor: '#000',
        borderColor: '#f00'
    }
});

Срезы статистики для блоков RTB

В коде блока RTB вы можете дополнительно задать идентификатор среза и собирать отдельную статистику по срезам. Идентификатор среза задается в отдельной переменной:

Имя переменной Описание Тип данных
statId Идентификатор среза Число от 1 до 1000000000

Задайте идентификатор среза, в коде вызова рекламы при размещении на сайте, например:

<div id="yandex_rtb_R-A-12345-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: "rtb",
                statId: 34567,
                async: true
            });
        });

Идентификатор среза для блока R-A-12345-1 в примере — 34567. Его можно указывать и в других блоках, тогда вы сможете просмотреть для этих блоков сгруппированную статистику. Размещая блок R-A-12345-1 на других страницах, вы можете указать другой идентификатор среза, чтобы просматривать статистику отдельно для каждого места размещения.

Статистические отчеты с группировкой по срезам можно построить с помощью конструктора.

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");

Функция вызова своей рекламы в блоке RTB

Если на аукционе не было подходящего предложения для показа, вы можете показать в блоке свою рекламу. Если в качестве кода своей рекламы вы хотите указать код сторонних баннерных систем, необходимо вставить код вручную. Получите код в визуальном конструкторе в интерфейсе и добавьте функцию вызова своей рекламы в качестве последнего параметра Ya.Context.AdvManager.render.

Ограничение.

Код вызова блока RTB может быть синхронным или асинхронным, но в самой функции вызова своей рекламы необходимо использовать только асинхронный JavaScript-код.

Пример асинхронного кода для вставки кода своей рекламы
            Ya.Context.AdvManager.render({
                blockId: R-A-12345-1,
                renderTo: "rtb",
                async: true
            },
         function () {
//          ВСТАВЬТЕ КОД ВЫЗОВА СВОЕЙ РЕКЛАМЫ СЮДА
         }
            );
Пример синхронного кода для вставки кода своей рекламы
            Ya.Context.AdvManager.render({
                blockId: R-A-12345-1,
                renderTo: "rtb",
                async: false
                            });
            });
                    document.write('<sc'+'ript type="text/javascript" src="//an.yandex.ru/system/context.js"></sc'+'ript>');
            })(this, "yandexContextSyncCallbacks");

    </script>
    <script type="text/javascript">

            if (!window.yandex_rtb_is_displayed) {
                    // ВСТАВЬТЕ КОД ВЫЗОВА СВОЕЙ РЕКЛАМЫ СЮДА
            }

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

Для показа рекламы в лентах с бесконечной прокруткой можно использовать один и тот же рекламный блок, в котором изменяется параметр 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 пикселей, блок будет использовать заданные в интерфейсе размеры.

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