Skip to main content

Инструкция по установке баннерных блоков через наш JS

Общие сведения​

Данная инструкция предназначена для интеграции баннерных креативов на площадке паблишера. Код вставки предоставляется менеджером SSP и может отличаться в зависимости от площадки и расположения блока.

Установка блоков​

Код состоит из трёх частей: подключение загрузчика, код блока и обработчик рекламных мест.

1. Подключение скрипта​

<script async type="text/javascript" src="https://static.xoalt.com/engine/engine.js"></script>

Скрипт необходимо установить один раз на странице. Рекомендуется размещать его в <head> или перед закрывающим тегом </body>.

2. Код вставки блока​

<div class="adsbyxoalt"
     style="display:inline-block;width:{W}px;height:{H}px"
     xoalt-data-spot="{SPOT}">
     xoalt-data-format="auto">
</div>

Параметры:

Атрибут / ЭлементОписание
style="width:{W}px;height:{H}px"Обязательный. {W} и {H} — ширина и высота блока в пикселях (например, 728px и 90px)
xoalt-data-spot="{SPOT}"Обязательный. Уникальный идентификатор рекламного места. Значение предоставляется менеджером SSP
xoalt-data-format="auto"Обязательный. Указывает, что формат блока определяется автоматически (включает поддержку xoalt-data-maxheight)

3. Обработчик рекламных мест​

<script type="text/javascript">
    (adsbyxoalt = window.adsbyxoalt || []).push({});
</script>

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

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

Автоматический подбор высоты с ограничением​

Если блоку одновременно заданы два атрибута:

  • xoalt-data-maxheight="{MAX_HEIGHT}" (например, xoalt-data-maxheight="400")
  • xoalt-data-format="auto"

то значение из xoalt-data-maxheight передаётся в запрос к SSP как максимальная высота в параметре format. Фактическая высота креатива будет подобрана автоматически, но не превысит указанное значение.

Пример кода с заданной высотой для резинового блока (когда размеры 0x0):

<div class="adsbyxoalt"
     style="display:inline-block;width:0px;height:0px"
     xoalt-data-spot="12345"
     xoalt-data-maxheight="400">
</div>

Загрузка блока: только при видимости​

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

xoalt-data-load-policy="viewable"

Критерий видимости: Блок считается видимым, если 50% или более его площади попадают в видимую область окна браузера.

Пример кода с политикой видимости:

<div class="adsbyxoalt"
     style="display:inline-block;width:300px;height:250px"
     xoalt-data-spot="12345"
     xoalt-data-load-policy="viewable">
</div>

Важные правила и рекомендации​

  1. Различие нескольких блоков на странице — каждый блок должен иметь уникальное значение xoalt-data-spot в рамках страницы.
  2. Размещение скрипта и кода подписки — скрипт engine.js должен быть размещён до HTML-кода баннерных блоков (рекомендуется в <head>). Команда (adsbyxoalt = window.adsbyxoalt || []).push({}) должна быть размещена перед закрывающим тегом </body>.
  3. Комбинация атрибутов — атрибуты xoalt-data-maxheight и xoalt-data-format="auto" должны использоваться вместе. Если используется только один из них, автоматический подбор высоты не гарантируется.
  4. Адаптация под площадку — значение {SPOT} и при необходимости параметры блока могут отличаться; точный код предоставляется менеджером SSP.

При возникновении вопросов обращайтесь к вашему менеджеру в Xoalt.