Инструкция по установке видео-блоков через наш 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:100%;height:100%"
     xoalt-data-spot="{SPOT}"
     xoalt-data-format="video">
</div>

Параматры:

Атрибут	Описание
`xoalt-data-spot="{SPOT}"`	Обязательный. Уникальный идентификатор рекламного места. Значение предоставляется менеджером SSP
`xoalt-data-format="video"`	Фиксированный формат — видео

3. Отслеживание событий (опционально, но рекомендуется)

<script>
document.addEventListener('adsbyxoalt_onVideoEvent', function (e) {
    const { spot, container, eventName, payload } = e.detail;
    switch (eventName) {
        case 'ready':
            break;
        case 'start':
            break;
        case 'firstQuartile':
        case 'midpoint':
        case 'thirdQuartile':
            break;
        case 'complete':
            break;
        case 'click':
            break;
        case 'error':
            console.warn('[video]', spot, payload);
            break;
    }
});
</script>

События плеера

Все события видео-плеера передаются через единое событие на document.

Поле	Тип	Описание
`spot`	string	Значение атрибута `xoalt-data-spot` блока, для которого сработало событие
`container`	HTMLElement	DOM-элемент блока с классом `.adsbyxoalt`
`eventName`	string	Имя события (полный список см. ниже)
`payload`	optional	Дополнительные данные от менеджера или объект ошибки

Список событий (`eventName`)

Событие	Описание
`ready`	Плеер инициализирован (`AdsManagerLoaded` → `init`)
`start`	Начало воспроизведения (`AdVideoStart`)
`firstQuartile`	25% просмотра
`midpoint`	50% просмотра
`thirdQuartile`	75% просмотра
`complete`	Ролик доигран до конца
`click`	Клик по креативу (`AdClickThru`)
`error`	Ошибка: загрузка скрипта, mount, VAST или воспроизведение

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

Различие нескольких блоков на странице -При наличии нескольких видео-блоков идентифицируйте их по полю spot или container. Не используйте глобальные переменные для хранения «текущего» блока.
Размещение скрипта и кода подписки -Скрипт engine.js должен быть размещён до HTML-блока плеера либо в <head> -Код подписки на события (addEventListener) следует размещать после подключения engine.js
Адаптация под площадку -Значение {SPOT} и при необходимости параметры блока могут отличаться - точный код предоставляется менеджером SSP.

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

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

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

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

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

3. Отслеживание событий (опционально, но рекомендуется)​

События плеера​

Список событий (eventName)​

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