Работа с кодом вызова рекламных блоков 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
<div id="rtb-0"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-0",
                async: true,
                directSettings: {
                    titleColor: "#f00",
                    urlColor: "#00a",
                    hoverColor: "#00f",
                    bgColor: "#0f0",
                    siteBgColor: "#000",
                    borderColor: "#f00"
                }
            });
        }
        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");
</script>

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

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

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

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

<div id="rtb-1"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-1",
                statId: 34567, // идентификатор среза
                async: true
            });
        }
        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");
</script>

Идентификатор среза для блока 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
<div id="rtb-2"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-2",
                async: true,
                onRender: function (data) {
                    console.log(data.product);
                }
            });
        }
        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");
</script>

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

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

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

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

Пример асинхронного кода для вставки кода своей рекламы
            <div id="rtb-3"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-3",
                async: true,
            }, function altCallback () {
                // код вызова своей рекламы в блоке
            });
        }
        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");
</script>
Пример синхронного кода для вставки кода своей рекламы
         <div id="rtb-4"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-4",
                async: false
            });
        }
        w[n] = w[n] || [];
        w[n].push(renderRtb);
        document.write('<sc'+'ript type="text/javascript" src="//an.yandex.ru/system/context.js"></sc'+'ript>');
    })(this, this.document, "yandexContextSyncCallbacks");
</script>
<script type="text/javascript">
    if (!window.yandex_rtb_is_displayed) {
        console.log("altCallback");
        // код вызова своей рекламы в блоке
    }
</script>

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

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

Пример кода вызова для первого блока
<div id="rtb-5-1"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-5-1",
                pageNumber: 1
            });
        }
        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");
</script>
Пример кода вызова для второго блока
<div id="rtb-5-2"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-5-2",
                pageNumber: 2
            });
        }
        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");
</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 пикселей, блок будет использовать заданные в интерфейсе размеры.

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