AdLoader

Модуль для загрузки и воспроизведения рекламы «по месту» (на готовом видеотеге в любой момент времени). API модуля реализует интерфейсы для загрузки, предзагрузки и проигрывания рекламы. Контроль над запуском этих процессов осуществляется из внешнего кода (со стороны кода вставки).

Основные понятия

Загрузка рекламы

Процесс получения информации о том, какие рекламные креативы нужно проиграть — в какой последовательности и с какими параметрами.

Предзагрузка рекламы

Процесс подготовки данных к запуску рекламы для ускорения последующего запуска рекламных креативов.

Проигрывание рекламы

Процесс показа рекламного креатива на стороне пользователя.

Способы загрузки рекламы

Модуль AdLoader позволяет загружать рекламу разными способами:

• загрузка с привязкой к рекламной кампании РСЯ (с использованием параметров partnerId,category). В этом случае параметры загрузки и проигрывания рекламы берутся из VMAP;
• загрузка рекламы по ссылке. В этом случае VMAP может быть загружен для получения параметров проигрывания рекламы, но сама реклама будет грузиться по предоставленной ссылке vastUrl;
• инициализация VAST по месту. В этом случае в параметре vast может быть передана строка, содержащая в себе VAST XML. Дополнительная подгрузка рекламы будет осуществлена, если VAST XML содержит в себе Wrapper элементы (ссылки на другие VAST). Параметры проигрывания рекламы могут быть получены из VMAP.

Создание и проигрывание рекламы

1. Создайте экземпляр AdLoader. Для этого вызовите метод .create(adConfig) у объекта AdLoader.
2. После создания экземпляра AdLoader можно загрузить рекламу с помощью метода adLoader.loadAd();. В качестве результата вернется promise, отдающий экземпляр AdStore.
3. После создания экземпляра AdStore предзагрузите файлы рекламных креативов с помощью метода .preload(preloadParams) для ускорения последующего запуска рекламы. Либо сразу запустите проигрывание контента с помощью метода .showAd(videoSlot, slot, playbackParameters).
4. Если вам необходим гибкий контроль над процессом воспроизведения рекламы, AdStore предоставляет метод .createPlaybackController(videoSlot, slot, playbackParameters), который возвращает объект AdPlaybackController.AdPlaybackController позволяет подписываться на события и вызывать методы во время проигрывания рекламы.

Пример кода вставки

ya.videoAd
    .loadModule('AdLoader')
    // 1)  Создаем экземпляр AdLoader с рекламными параметрами
    .then(function(module) {
        return module.AdLoader.create(
            {
                partnerId: partnerId,
                category: category,
                // Опциональный параметр идентификатора блока. 
                // Если параметр не указан, используется блок типа preroll.
                impId: impId,
            },
        );
    })
    // 2) Загружаем рекламу
    .then(function(adLoader) {
        return adLoader.loadAd();
    })
    // 3) Предзагружаем рекламу
    // Этот пункт пропускается, если рекламу необходимо запустить сразу
    .then(function(adStore) {
        // Запускаем предзагрузку
        return adStore.preload({
            videoSlot: video,
            desiredBitrate: 1000,
        })
        .then(function() {
            return adStore;
        })
        .catch(function() {
            // Игнорируем, если в предзагрузке что-то пошло не так.
            // Не является блокером для проигрывания
            return adStore;
        });
    })
    // 4) Запускаем рекламу
    .then(function(adStore) {
        // Создаем контроллер воспроизведения
        const adPlaybackController = adStore.createPlaybackController(video, slot);
        // Подписываемся на событие окончания рекламы
        adPlaybackController.subscribe('AdStopped', function() {
            console.log('Ad stopped playing');
        });
        // Запускаем проигрывание рекламы
        adPlaybackController.playAd();
    })
    // Если что-то пошло не так, логируем ошибку в консоль
    .catch(function(error) {
        console.error(error);
    });        

Тестовые данные

Для тестирования можно использовать настройки:

{
  partnerId: 291193,
  category: 0,
}

Пример тестовой страницы