Как вставить несколько блоков Яндекс.РТБ на одну страницу

Многие вебмастера сталкиваются с ситуацией, когда нужно разместить несколько рекламных блоков Яндекс.Директ (РТБ) в одной статье - например, перед каждым заголовком H2. При простом копировании кода блока возникает проблема: загружается только последняя копия скрипта. Это происходит из-за дублирования идентификатора контейнера. В этой статье мы разберём, почему так случается, и предложим готовое решение на JavaScript.

Почему не работают множественные копии одного блока Яндекс.РТБ?

Основная причина - одинаковый атрибут id у контейнеров div. Скрипт Яндекс.РТБ ищет элемент по уникальному ID. Если на странице несколько элементов с одинаковым ID, браузер возвращает только первый (или последний, в зависимости от реализации), и реклама рендерится только один раз. Кроме того, повторный вызов Ya.Context.AdvManager.render с тем же renderTo игнорируется.

Рабочий скрипт для множественной вставки рекламы

Чтобы один и тот же код можно было вставлять несколько раз, нужно динамически изменять ID контейнера и передавать уникальный номер для каждого блока. Ниже представлен скрипт, который автоматически нумерует блоки при каждой вставке.

<div id="yandex_rtb_R-A-XXXXXX-1"></div>

<script type="text/javascript">
  if (typeof pageNumber === "undefined") {
    var pageNumber = 1;
  } else {
    pageNumber++;
  }

  var adDiv = document.getElementById("yandex_rtb_R-A-XXXXXX-1");
  adDiv.id = "yandex_rtb_R-A-XXXXXX-1-" + pageNumber;

  (function(w, d, n, s, t) {
    w[n] = w[n] || [];
    w[n].push(function() {
      Ya.Context.AdvManager.render({
        blockId: "R-A-XXXXXX-1",
        renderTo: "yandex_rtb_R-A-XXXXXX-1-" + pageNumber,
        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>

Как это работает: при первой вставке создаётся глобальная переменная pageNumber со значением 1. При каждой следующей вставке она увеличивается на 1. Идентификатор контейнера меняется (например, yandex_rtb_R-A-XXXXXX-1-2), и каждый блок рендерится независимо.

Альтернативный метод: готовые блоки с уникальными ID

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

• yandex_rtb_R-A-123456-1-2
• yandex_rtb_R-A-123456-1-3
• yandex_rtb_R-A-123456-1-4
• yandex_rtb_R-A-123456-1-5

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

Автоматическая вставка перед каждым заголовком H2

Чтобы разместить рекламный блок перед каждым заголовком H2, можно использовать небольшой скрипт на чистом JavaScript, который находит все элементы h2 и вставляет перед ними код контейнера. Пример:

<script>
  var h2Elements = document.querySelectorAll('h2');
  h2Elements.forEach(function(h2, index) {
    var adDiv = document.createElement('div');
    adDiv.id = 'yandex_rtb_R-A-XXXXXX-1-' + (index + 1);
    h2.parentNode.insertBefore(adDiv, h2);
    
    Ya.Context.AdvManager.render({
      blockId: 'R-A-XXXXXX-1',
      renderTo: 'yandex_rtb_R-A-XXXXXX-1-' + (index + 1),
      async: true
    });
  });
</script>

Этот код нужно поместить в конце страницы (перед закрывающим </body>). Он сработает после загрузки всех заголовков и создаст рекламные блоки с уникальными ID.

Важные замечания и ограничения

• Не превышайте лимиты Яндекс.РТБ: на одной странице может быть не более 3-5 блоков (зависит от настроек рекламной сети).
• Убедитесь, что блоки не перекрывают контент и не нарушают правила размещения рекламы.
• Для корректной работы скрипта подключите библиотеку Яндекс.РТБ один раз в начале страницы.

Заключение

Проблема множественных копий рекламного кода Яндекс.РТБ решается динамической сменой ID контейнера и уникальным вызовом render. Используйте предложенные скрипты для автоматической вставки блоков перед заголовками H2 или в любых других местах статьи. Это поможет увеличить количество показов рекламы без ручного копирования кода.