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

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

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

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

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

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

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

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

<div id="yandex_rtb_R-A-123456-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-123456-1",
                renderTo: "yandex_rtb_R-A-123456-1",
                statId: 34567, // идентификатор среза
                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>

Идентификатор среза для блока R-A-123456-1 в примере — 34567. Его можно указывать и в других блоках, тогда вы сможете просмотреть для этих блоков сгруппированную статистику. Размещая блок R-A-123456-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) {       
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-2",
                async: true,
                onRender: function (data) {
                    console.log(data.product);
                }
            });
        });
        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-блока не нашлось подходящего предложения, вы можете показывать в нем свою рекламу. Для этого код вызова своей рекламы следует добавить к коду RTB-блока.
  1. Получите код RTB-блока в интерфейсе РСЯ (RTB-блоки → Получить код → Скопировать в буфер обмена).
  2. Разместите код RTB-блока на сайте.
  3. В функцию Ya.Context.AdvManager.render добавьте код своей рекламы в качестве последнего параметра.
Ограничение.

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

Пример асинхронного кода для вставки кода своей рекламы
<div id="rtb-3"></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-3",
                async: true,
                },
                function altCallback () {
                // код вызова своей рекламы в блоке
             });
        });
        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, n) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-4",
                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) {
        console.log("altCallback");
        // код вызова своей рекламы в блоке
    }
</script>

Если на аукционе не нашлось подходящего предложения, выполнится альтернативный код, и своя реклама будет показана на месте рекламного блока (не через iFrame). Показы своей рекламы не будут учитываться в статистике РСЯ.

Есть еще один способ настройки показа своей рекламы: вы можете указать ее код в интерфейсе РСЯ. Часть кода, необходимая для показа своей рекламы, будет сформирована и добавлена в код RTB-блока автоматически. При таком способе настройки своя реклама показывается через iFrame, и ее показы учитываются в статистике РСЯ.

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

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

Пример кода вызова для первого блока
<div id="rtb-5-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-5-1",
                pageNumber: 1
            });
        });
        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) {      
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-5-2",
                pageNumber: 2
            });
        });
        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: 700px) {
        .yandex-adaptive {
            width:200px;
            height:300px;
        }
    }
    
    @media screen and (min-width: 701px) {
        .yandex-adaptive {
            width:336px;
            height:280px;
        }
    }

    Таким образом, на экранах шириной до 700 пикселей реклама будет показываться в блоке 200×300, а на экранах шириной от 701 пикселя — в блоке 336×280.

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