Интерактивы и сайты

Объявления-сайты и HTML5-объявления доступны начиная с уровня лицензии Professional. В Lite объявление может быть только изображением, видео или программатик-объявлением.

Вебсайты

Вебсайты представляют из себя удаленно открываемые плеером HTML5 документы, размещённые в локальной сети или в сети интернет.

В некоторых случаях, когда рекламный инвентарь может терять подключение к сети или задержки сети не позволяют HTML5 ресурсу загрузиться достаточно быстро, целесообразнее использовать `Интерактивные объявления HTML5 `.

Интерактивные объявления HTML5

HTML5 объявление, в отличие от вебсайта, всё время хранится на плеере и не подвержен проблемам сети. Файл такого объявления представляет собой zip-архив, внутри которого должен находиться как минимум файл index.html, а также могут находиться любые другие файлы, такие как файлы javascript, css, изображения, видео и т.д.

Минималистичный пример zip-архива с HTML5 объявлением:

- html5_package.zip
-- index.html

Отладку HTML5 мы рекомендуем проводить в браузере Chrome.

Системные переменные

В объявлениях типов HTML5 и вебсайт можно показывать разный контент на разных фреймах. При этом чтобы не создавать несколько объявлений под разные экраны, можно создать одно объявление и запрограммировать его на показ разного контента в зависимости от того, на каком экране или фрейме контент отображается. Для этого необходимо получить ID фрейма.

Чтобы иметь возможность получить ID фрейма внутри интерактивного объявления, необходимо внутри страницы разместить следующий код:

<script>
    var csPlayerData = {};
    function onAfterPlayerInit(){
        //код, выполняемый при инициализации класса данных
    }
    function onBeforePlayerShow  (){
        //код, выполняемый до начала отображения текущей страницы на экране
    }
    function onAfterPlayerShow  (){
        //код, выполняемый после начала отображения текущей страницы на экране
    }
</script>

где:

csPlayerData класс данных, получаемый от системы CS Play.В нем csPlayerData .frameId – идентификатор текущего фрейма.
onAfterPlayerInit функция, выполняемая после открытия страницы и инициализации класса csData.
onBeforePlayerShow функция, выполняемая перед началом воспроизведения текущего объявления.
onAfterPlayerShow функция, выполняемая после начала воспроизведения текущего объявления.

Структура `csPlayerData`

displayAddress адрес экрана, взятый из метаданных
displayId id экрана
displayName название экрана
displayLatLong координаты экрана, для экранов на транспорте, имеющих тип экрана mobile, будут переданы координаты GPS/ГЛОНАСС приёмника, при наличии
displayResolution разрешение экрана, содержит объект вида {"width": 600, "height": 300 }
displayPlacementType тип размещения indoor / outdoor, взятый из метаданных
displayInstallationType тип экрана fixed / mobile, взятый из метаданных
displayCriteria массив критериев экрана, содержит объекты вида {"id": 1, "name": "Название" }
frameId id фрейма
frameName название фрейма
gid инвентарный номер фрейма
frameResolution разрешение фрейма, содержит объект вида {"width": 600, "height": 300 }
frameCriteria массив критериев фрейма, содержит объекты вида {"id": 1, "name": "Название" }
campaignId id кампании
campaignName название кампании
advertisementId id объявления
advertisementName название объявления
duration ожидаемая продолжительность слота объявления
categories массив категорий кампании, содержит объекты вида {"id": 1, "name": "Название" }
variables пользовательские переменные, содержит объект вида {"key_1":"value_1", "key_2":"value_2",…, "key_N":"value_N"}, содержащий все пользовательские переменные, заданные для этого объявления, кампании, фрейма, экрана, плейлиста, расписания, файла в медиатеке

Пользовательские переменные

Пользовательские переменные позволяют передавать в содержимое html-страницы в интерактивном объявлении дополнительные данные, для того чтобы многократно использовать одни и те же файлы контента и при этом иметь возможность автоматически менять их внешний вид и/или поведение.

Для использования пользовательских переменных сначала необходимо создать переменную, затем привязать ее к нужной сущности: файлу контента, экрану, фрейму, критерию, кампании, объявлению или плейлисту.

Создание пользовательской переменной

Для создания переменной на странице Переменные нажмите кнопку Создать переменную. В открывшемся диалоге заполните форму.

Здесь:

Название - название переменной в общем списке, в содержимое html-страницы не передается.
Ключ - название переменной, передаваемое в содержимое html-страницы.
Тип переменной - тип значения, которое должно храниться в данной переменной, доступные типы: Строка, Целое число, Число.
Сущности - сущности, к которым данная переменная может применяться.

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

Для привязки переменной к сущности:

В настройках этой сущности нажмите кнопку Задать переменную.
В открывшемся диалоге выберите нужную переменную и нажмите Далее.
На следующем шаге введите значение, которое должно передаваться для этой сущности в этой переменной, и нажмите Сохранить, чтобы завершить привязку переменной к сущности.

Привязать переменную к сущности можно в настройках этой сущености. Например, привязать переменную к экрану можно в настройках экрана на вкладке Переменные. Привязать переменную к объявлению можно в настройках объявления в блоке Переменные объявления и т.д.

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

Переменные с одним и тем же ключом у разных сущностей будут переопределять друг друга в порядке старшинства сущностей:

Файл контента (самый низкий приоритет)
Критерий
Экран
Плеер
Фрейм
Плейлист
Кампания
Объявление (самый высокий приоритет)

Чтение переменной из креатива

Переменные попадают в страницу тем же способом, что и всё остальное, — через объект csPlayerData, в его поле variables.

Креатив сам читает значение по ключу и сам применяет его.

Креатив обращается к переменной по ключу. Название — это подпись для списка в интерфейсе, в страницу оно не передаётся. Обычно ключ и название совпадают, но не всегда, — именно поэтому в таблице переменных у каждой сущности ключ показан рядом с названием.

<script>
    var csPlayerData = {};

    function onAfterPlayerInit() {
        var storeName = csPlayerData.variables['store_name'];
        document.getElementById('store').textContent = storeName || '';
    }
</script>

Читайте значения в onAfterPlayerInit или позже. Плеер заполняет csPlayerData после открытия страницы, поэтому скрипт, который обращается к variables во время загрузки документа, получит пустой объект.

В variables лежат уже разрешённые значения: по одной записи на ключ, и в ней — победитель приведённого выше порядка старшинства. Из какой сущности пришло значение, креатив узнать не может, и это ему не нужно.

Ключ, для которого нигде в цепочке не задано значение, просто отсутствует в объекте: проверяйте его наличие, а не считайте, что он там есть. Переменная, привязанная к сущности, но не запрошенная ни одним креативом, на экране ничего не меняет.