Размещается Fly-roll (летающий формат) и 3 внутриконтентных блока (IBV). Инструкция не привязана к CMS и подходит для любого сайта. Логика разделена на глобальную часть и блоки в контенте — так не будет конфликтов и двойных загрузок.
Для ускорения старта и появления рекламы добавьте тег preconnect — браузер заранее откроет соединение с сервером рекламы.
Добавьте этот код в секцию <head> вашего сайта:
<link rel="preconnect" href="https://s.adlook.tv">Важное правило: В атрибут href для преконнекта пишется только сам «корень» сайта (домен с https://), без полных путей к конкретным .js файлам.
Вставьте этот код в общий шаблон сайта, который выводится на всех страницах, в самый низ — желательно прямо перед закрывающим тегом </body>. Здесь живет скрипт Fly-roll и глобальный инициализатор с задержками:
<style>
@media (max-width: 949px) { .adlook-pc-wrapper { display: none !important; } }
@media (min-width: 950px) { .adlook-mob-wrapper { display: none !important; } }
</style>
<script src="https://s.adlook.tv/vast-player/production/adlkPlayerInit.js" defer
data-set-id="da1fi2faimjs73cfrq30"
data-align="lb"></script>
<script src="https://s.adlook.tv/vast-player/production/adLookInit.js" defer
data-delay-pc="800"
data-delay-mob="1500"></script>
Атрибуты data-delay-pc="800" и data-delay-mob="1500" устанавливают задержку инициализации плеера: 800 миллисекунд для компьютеров и 1500 миллисекунд для мобильных устройств. Это позволяет основному контенту сайта загрузиться быстрее, не дожидаясь рекламы.
Важно: Ядро adLookInit.js должно быть на странице строго в одном экземпляре, поэтому мы оставляем его только здесь.
Вставьте следующий блок в то место шаблона страницы, где должна выводиться реклама.
Здесь мы используем CSS-скрытие пустых оберток, чтобы они не ломали сетку сайта на нецелевых устройствах, и вызываем конкретные плееры с таргетингом на девайсы:
<div class="adlook-pc-wrapper" style="display: flex; flex-wrap: nowrap; justify-content: center; gap: 5px; width: 100%; max-width: 1200px; margin: 0 auto; min-height: 225px; overflow-x: hidden;">
<div id="Adlk-1"></div>
<div id="Adlk-2"></div>
</div>
<script src="https://s.adlook.tv/vast-player/production/adlkPlayerInit.js" defer
data-set-id="da1fi4vaimjs73cfrq3g"
data-host="Adlk-1"
data-target="pc"></script>
<script src="https://s.adlook.tv/vast-player/production/adlkPlayerInit.js" defer
data-set-id="da1fi77aimjs73cfrq40"
data-host="Adlk-2"
data-target="pc"></script>
<div class="adlook-mob-wrapper" style="width: 100%; padding: 5px; box-sizing: border-box; min-height: 235px;">
<div id="Adlk-mob"></div>
</div>
<script src="https://s.adlook.tv/vast-player/production/adlkPlayerInit.js" defer
data-set-id="da1fi9naimjs73cfrq4g"
data-host="Adlk-mob"
data-target="mob"></script>Важно: Значения data-host и id контейнеров должны совпадать и быть уникальными на странице. Не копируйте один и тот же id в разные блоки — иначе плеер загрузится только в первый из них.
Атрибуты скрипта adlkPlayerInit.js для Fly-roll (Sticky):
| Атрибут | Назначение | Значения |
|---|---|---|
data-align | Позиция плеера на экране | rb, lb, lt, rt (right/left + bottom/top) |
data-w | Ширина плеера | в пикселях |
data-h | Высота плеера | в пикселях |
data-bg | Фоновое изображение или ролик | URL файла: mp4, jpeg, jpg, png |
data-m-align | Позиция на мобильных | b (снизу) или t (сверху) |
data-m-h | Высота на мобильных | доля экрана от 0 до 1 |
data-target | Ограничение по устройствам | pc или mob; без атрибута — все устройства |
Атрибуты скрипта adlkPlayerInit.js для внутриконтентных блоков (In-Banner Video):
| Атрибут | Назначение | Значения |
|---|---|---|
data-set-id | Идентификатор рекламного места | выдается площадке, у каждого блока свой |
data-host | ID контейнера, в который встраивается плеер | совпадает с id у <div> |
data-w | Ширина плеера | в пикселях |
data-h | Высота плеера | в пикселях |
data-bg | Фоновое изображение или ролик | URL файла: mp4, jpeg, jpg, png |
data-target | Ограничение по устройствам | pc или mob; без атрибута — все устройства |
Атрибуты скрипта инициализации adLookInit.js:
| Атрибут | Назначение |
|---|---|
data-delay-pc | Задержка запуска для экранов от 950px, в миллисекундах |
data-delay-mob | Задержка запуска для экранов уже 950px, в миллисекундах |
На странице два разных файла с похожими именами, у них разные роли — не пугайтесь количества тегов.
adlkPlayerInit.js — объявление рекламного места. Ставится столько раз, сколько рекламных мест: у нас 4. Сам по себе рекламу не грузит, а только передает ядру параметры: data-set-id (какое именно место), data-host (в какой <div> ставить плеер), data-target (на каких устройствах показывать).adLookInit.js — ядро. Ставится ровно один раз перед </body>. Собирает все объявленные места, выжидает задержку, проверяет устройство, запрашивает рекламу и отрисовывает плееры в нужных контейнерах.adlkPlayerInit.js одинаковый URL, поэтому браузер загружает его из сети один раз, остальные вызовы берутся из кэша. Все теги стоят с атрибутом defer и не блокируют отрисовку страницы.Важно: Удаление «лишнего» тега adlkPlayerInit.js отключает соответствующее рекламное место. А второй экземпляр adLookInit.js приведет к повторным запросам рекламы и дублям в статистике.