--- metadata: - name: generator content: Diplodoc Platform v5.57.3 alternate: - https://yandex.com/support/adfox/en/banners/specs/screenglide-html5.md - https://yandex.com/support/adfox/ru/banners/specs/screenglide-html5.md - href: https://yandex.com/support/adfox/ru/banners/specs/screenglide-html5.md type: text/markdown title: Markdown version - href: https://yandex.com/support/adfox/ru/llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/adfox/ru/llms.txt # Screenglide HTML5 ## Описание {#description} Screenglide HTML5 — интерактивный HTML5-баннер, расхлопывающийся в зависимости от действий пользователя (клик, наведение и т. д.) или автоматически, со сдвигом контента или поверх его. В баннере можно реализовать кнопки с переходом на разные страницы сайта рекламодателя. Креатив в баннере может быть реализован в виде: - изображений; - HTML-креатива, подготовленного в редакторе Adobe Animate CC или Google Web Designer по инструкции ниже. Параметры, настраиваемые при добавлении в Adfox: - время показа баннера в расхлопнутом состоянии; - сдвиг контента при расхлопе. > [Пример баннера](https://yandex.ru/promo/yan/adfox-specs/screenglide-html5) > > [Пример готового проекта](https://doc-static.yandex.net/support/Adfox/Adobe_Animate_banner_expand.zip) в Adobe Animate CC, [исходный файл](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_Example_banner_project_for_test_inAA.fla.zip). > > [Пример готового проекта](https://doc-static.yandex.net/support/Adfox/GWD_banner_project.zip) в Google Web Designer, исходный [файл](https://doc-static.yandex.net/support/Adfox/GWD_banner_project_for_test_inGWD.zip). ## Разработка HTML-креатива {#htmlcreative5} {% note warning %} Ознакомьтесь с требованиями к HTML-коду. {% endnote %} 1. Максимально допустимый размер HTML-файла — 65 000 байт. 1. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, уменьшите его, разместив JavaScript и CSS в отдельных файлах: 1. Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css. 1. Файлы по весу не должны превышать 10 МБ. 1. Загрузите файлы на вкладку **Файлы** рекламной кампании и подключите в HTML-код полученные ссылки на файлы: - Если в проекте прописаны абсолютные ссылки (`src="js/script.js"`, `src="css/style.css"`), то при загрузке проекта Adfox распознает пути к файлам, автоматически загрузит их на вкладку **Файлы** и заменит все ссылки на эти файлы в загружаемом проекте. - Если в проекте прописаны относительные ссылки (например, `src="../js/script.js"`), воспользуйтесь одним из способов: - замените ссылки на файлы `.js` и `.css` на абсолютные — сработает парсинг Adfox и все ссылки будут заменены автоматически; - вручную загрузите файлы `.js` и `.css` на вкладку **Файлы**. Затем получите ссылки на эти файлы в Adfox и поменяйте в HTML-коде относительные ссылки на полученные. Пример подключения JS и CSS-файлов: ```html ``` 1. В проекте может находиться только один файл с расширением .html. 1. Максимально допустимое количество файлов в проекте — 50. 1. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, MP4, OGV, OGG, WEBM, AVI, SWF. 1. Максимальный размер каждого файла (действует также для файлов внутри архива): - 10 МБ; - 1 МБ для видеофайлов. 1. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов. 1. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере. 1. Формат готового проекта — ZIP-архив. При изменении размера canvas, его содержимое очищается в webkit-браузерах, поэтому, если код креатива был создан самостоятельно без помощи таких редакторов как Adobe Animate, перерисовывайте canvas после изменения его размера. **Требования к изображениям** - Используйте картинки высокого разрешения, это кардинально улучшит качество баннера на мобильном устройстве, хоть и снизит скорость загрузки баннера. - Рекомендуется уменьшать размер файла изображения, используя сервисы наподобие [TinyPng](https://tinypng.com/). Данный сервис работает как с PNG, так и c JPEG. - Можно использовать SVG картинки. Они векторные, а значит они будут лучше выглядеть на всех устройствах — мобильных и десктопных. Также они имеют малый размер файла и могут быть с анимацией. - Допустимые форматы изображений: PNG, GIF, JPG, SVG. - Максимальный вес одного файла: 10 МБ. Выберите редактор, в котором будете разрабатывать HTML-креатив и кликните на соответствующую ссылку. Подготовьте архив с HTML-креативом по инструкции: {% cut "Редактор Adobe Animate CC" %} 1. На разных слоях разместите два symbol, которые будут соответствовать баннеру в схлопнутом и расхлопнутом состояниях. Если нужна кнопка **Закрыть**, добавьте ее в **Movie clip** расхлопнутого состояния. Укажите instance names. Рекомендуем использовать instance names: **expanded**, **collapsed** и **closed** для расхлопнутого, схлопнутого состояния и кнопки **Закрыть** соответственно. Тогда можно без изменений перенести примеры кодов из этой инструкции в Animate. **См. также:** {% cut "Инструкция по добавлению кнопки и назначению instance name" %} **Кнопка на главной сцене** 1. Создайте на сцене какой-нибудь объект, например, с помощью **Rectangle Tool**. Затем выделите его и в контекстном меню выберите **Convert to Symbol...**. ![](../../_images/banners/1_1.png) 1. В появившемся диалоговом окне выберите **Type: Button**, **Name** можно оставить без изменений, нажмите **Ok**. ![](../../_images/banners/1_2.png) 1. Назначьте этой кнопке **Instance Name**, чтобы работал клик. ![](../../_images/banners/1_3.png) 1. Пропишите в **Actions** для этой кнопки код: ```javascript window.buttons.push( //Пропишите через запятую пути кнопок, добавив вначале this this.button1 //Конец места для кнопок ); ``` ![](../../_images/banners/1_4.png) **Вложенная кнопка** 1. Допустим, что кнопка находится внутри другого символа, например, внутри **Movie Clip**. В данном примере этому **Movie Clip** задано **Instance Name «name»**. ![](../../_images/banners/1_5.png) 1. По двойному клику перейдите внутрь **name**, там будет вложенная кнопка. ![](../../_images/banners/1_6.png) 1. При указании в **Actions** пути до такой кнопки, нужно будет добавить **Instance Name** объекта после **this**, в который она вложена: ```javascript window.buttons.push( //Пропишите через запятую пути кнопок, добавив вначале this **this**.name.button1 //Конец места для кнопок ); ``` {% endcut %} ![](../../_images/banners/1_animate.gif) 1. Выберите один из шаблонов в зависимости от сценария в баннере. Скачайте шаблон и подключите его к проекту: - [одна кликабельная область и расхлоп по наведению](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_screenglide_mouseover_Adfox_template_single_16.html.zip); - [несколько кликабельных областей и расхлоп по наведению](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_screenglide_mouseover_Adfox_template_multiple_16.html.zip); - [одна кликабельная область и расхлоп/схлоп по клику](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_screenglide_onclick_Adfox_template_single_16.html.zip); - [несколько кликабельных областей и расхлоп/схлоп по клику](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_screenglide_onclick_Adfox_template_multiple_16.zip). {% cut "Шаблоны для редактора Animate от 15 версии и ниже:" %} - [одна кликабельная область и расхлоп по наведению](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_screenglide_mouseover_Adfox_template_single_before_16.zip); - [несколько кликабельных областей и расхлоп по наведению](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_screenglide_mouseover_Adfox_template_multiple_before_16.zip); - [одна кликабельная область и расхлоп/схлоп по клику](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_screenglide_onclick_Adfox_template_single_before_16.zip); - [несколько кликабельных областей и расхлоп/схлоп по клику](https://doc-static.yandex.net/support/Adfox/AdobeAnimate_screenglide_onclick_Adfox_template_multiple_before_16.zip). {% endcut %} ![](../../_images/banners/2_animate.gif) 1. В зависимости от сценария работы баннера добавьте один из примеров кода в слой **Actions**: ![](../../_images/banners/3_animate.gif) **Одна кликабельная область и расхлоп по наведению** ```javascript //Поменяйте instance name, если требуется expanded = this.expanded; collapsed = this.collapsed; setAdfox(); ``` **Несколько кнопок и расхлоп по наведению** ```javascript //Поменяйте instance name, если требуется expanded = this.expanded; collapsed = this.collapsed; window.buttons.push( //Пропишите через запятую пути кнопок, добавив вначале this this.expanded.button1, this.expanded.button2, this.expanded.button3, this.expanded.button4 //Конец места для кнопок ); setAdfox(); ``` **Одна кликабельная область и расхлоп или схлоп по клику** ```javascript //Поменяйте instance name, если требуется expanded = this.expanded; collapsed = this.collapsed; close = this.expanded.close; setAdfox(); ``` **Несколько кнопок и расхлоп или схлоп по клику** ```javascript //Поменяйте instance name, если требуется collapsed = this.collapsed; expanded = this.expanded; close = this.expanded.close; window.buttons.push( //Пропишите через запятую пути кнопок, добавив вначале this this.expanded.button1, this.expanded.button2 //Конец места для кнопок ); setAdfox(); ``` 1. Опубликуйте проект и упакуйте его в ZIP-архив. ![](../../_images/banners/4_animate.png) 1. Если вы используете вариант с несколькими кнопками, сохраните соответствие instance name кнопок и их назначение. Эта информация понадобится при добавлении HTML-креатива в интерфейс Adfox. Например: `this.expanded.button1` — ссылка на страницу с товаром; `this.expanded.button2` — ссылка на контакты. В интерфейсе Adfox после добавления баннера ссылки нужно прописать на вкладке **События**. Первый **instance** в строке кода будет соответствовать параметру **Событие № 1** баннера, название у события может быть любое. ![](../../_images/banners/5_animate.png){style="border: solid 1px #cccccc"} {% endcut %} {% cut "Редактор Google Web Designer" %} 1. Скачайте [шаблон баннера для Google Web Designer](https://doc-static.yandex.net/support/Adfox/GWD_Adfox_template.zip). Код данного баннера можно брать за основу при создании креативов в редакторе. Разместите содержимое архива в папке с шаблонами программы, например: ``` /Users/[USER_NAME]/Documents/Google Web Designer/templates ``` ![](../../_images/banners/GoogleWebDesigner_1.png) Шаблон содержит скрипт `adfox_HTML5.js` и набор параметров для корректной работы переходов и подсчета событий: `%request.reference_mrc%, %user1%, %eventN%`, где `N` — номер события от 1 до 30. 1. Обработка клика. Все события назначаются конкретным элементам анимации через вкладку **События**. ![](../../_images/banners/GoogleWebDesigner_event11.png) ![](../../_images/banners/GoogleWebDesigner_event2.png) Для вызова действий используется компонент **Интерактивная область**. Добавьте его и выберите событие **Интерактивная область** → **Касание/нажатие** (или **Tap Area** → **Touch/Click** в английской версии). ![](../../_images/banners/GoogleWebDesigner_click.png) ![](../../_images/banners/GoogleWebDesigner_click2.png) На вкладке **Собственный код** укажите вызов функции клика. - если используется одна кнопка перехода: `callClick();` - если кнопок перехода несколько: `callClick(n);` где `n` — номер события, которое должно быть вызвано. - если необходимо вызвать событие из анимации без перехода используйте следующий код: `callEvent(n);` где `n` — номер события, которое должно быть вызвано. ![](../../_images/banners/GoogleWebDesigner_click3.png) ![](../../_images/banners/GoogleWebDesigner_click4.png) ![](../../_images/banners/GoogleWebDesigner_click5.png) **Особенность реализации тянущегося (резинового) баннера.** Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели **Свойства** для положения и размеров укажите проценты вместо пикселей. ![](../../_images/banners/Google_Web_Designer_3.png) Также используйте опции **Выровнять по контейнеру** и **Резиновый макет** на верхней панели инструментов. Если перед использованием каких-либо инструментов выравнивания включить **Резиновый макет**, при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера. При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные в пикселях. [Пример готового проекта](https://doc-static.yandex.net/support/Adfox/GWD_banner_project.zip) в Google Web Designer, исходный [файл](https://doc-static.yandex.net/support/Adfox/GWD_banner_project_for_test_inGWD.zip). 1. Публикация проекта. Проект должен быть опубликован со следующими настройками: ![](../../_images/banners/GoogleWebDesigner_settings.png) {% note info %} При добавлении баннера в Adfox менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера. {% endnote %} {% endcut %} После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox. ## Добавление баннера в Adfox {#addbanner5} Чтобы добавить баннер в Adfox выберите нужный тип баннера и шаблон **Screenglide HTML5 [context]**. Заполните параметры баннера: #| || **Параметр** | **Описание** || || **Архив с HTML5 креативом** | Загрузите ZIP-архив с проектом, поле **HTML5 код креатива** должно оставаться пустым (оно будет заполнено содержимым HTML-файла вашего проекта уже после добавления баннера). || || **HTML5 код креатива** | Содержимое HTML-кода из архива с проектом (загружается автоматически из архива). || || **URL перехода** | Ссылка на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (`http://` или `https://`). - Если креатив в баннере реализован с помощью изображений и ссылка для перехода не указана, баннер будет некликабельным. - Если в HTML-креативе несколько кнопок для перехода на разные страницы сайта рекламодателя, укажите их на вкладке **События** баннера. Соответствие кнопок и ссылок должны предоставить разработчики HTML-креатива. || || **TARGET ссылки** | Определяет, в каком окне открывать ссылку: - `_top` — в текущем окне; - `_blank` — в новом окне или вкладке, в зависимости от настроек браузера. || || **Ссылка на промерочный пиксель** | Ссылка на промерочный пиксель для подсчета показов в сторонней системе управления рекламой. || || **Изображение №1 (до расхлопа)** | Если баннер состоит из двух изображений, загрузите изображение наименьшего размера (до расхлопа). Также баннер может состоять и из одного изображения № 1 — в этом случае расхлопа не будет. || || **Изображение №2 (после расхлопа)** | Необязательное. Если баннер состоит из двух изображений, загрузите изображение большего размера (после расхлопа). || || **Время жизни расхлопа (секунд)** | Время в секундах, после которого баннер будет автоматически схлопнут после автоматического или вызванного пользователем расхлопа. || || **Сдвигать контент при расхлопе** | Укажите, будет ли баннер сдвигать контент: - `no` — расхлоп происходит поверх контента; - `yes` — расхлоп сдвигает контент как по горизонтали, так и по вертикали. Чтобы сдвигать по горизонтали, надо чтобы контейнер был обтекаемым элементом (например, `display: inline-block или float: left`). || || **Имя атрибута class контейнера баннера** | При необходимости укажите имя (или несколько имен через пробел) для атрибута `class` контейнера с баннером. || || **Ширина до расхлопа (в px или 100%)** | Ширина креатива до расхлопа. || || **Высота до расхлопа (в px или 100%)** | Высота креатива до расхлопа. || || **Ширина после расхлопа (в px или 100%)** | Ширина креатива в расхлопнутом виде. || || **Высота после расхлопа (в px или 100%)** | Высота креатива в расхлопнутом виде. || || **Направление расхлопа** | Укажите, в какую сторону должен расхлопываться баннер: - `bottom` — вниз; - `top` — вверх. || || **Стили для блока баннера** | Произвольные стили для контейнера баннера одной строкой. Кроме стиля: display. Например, `border: 1px solid red;`. Невалидные значения будут отброшены браузером. || || **Настройка рекламной метки**: - **Метка рекламы** - **Домен** | {% include [ad-label-add-menu](../../_includes/labeling/ad-label/ad-tag-settings.md) %} || || **Добавить рекламное меню** | Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию **Добавить рекламное меню**. При показе баннера на нем будет отображаться значок меню ![](../../_images/kebab.png) в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен). В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации». {% note info %} Если баннер некликабельный (поле **URL перехода** не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера. {% endnote %} || || **Маркировка рекламы** | Раздел **Маркировка рекламы** доступен, только если в настройках рекламной кампании выбран порядок маркировки **Передавать данные в ЕРИР**. Заполните поля в этом разделе, чтобы [зарегистрировать креатив в ОРД Яндекса](https://yandex.com/support/adfox/ru/labeling/token.md). Токен будет присвоен креативу автоматически. {% note info %} Если к конкретному баннеру маркировка не применяется, в этом поле выберите **Не передавать данные в ЕРИР**. {% endnote %} || |# ## Обратиться в службу поддержки Написать в чат Написать письмо {% included (../../_includes/labeling/ad-label/ad-tag-settings.md) %} В списке **Метка рекламы** выберите `Реклама` или `Соцреклама` — на баннер будет добавлена метка. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение `Отключена`. {% note info %} Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо выбрать опцию **Договор социальной рекламы с оплатой** или **Договор социальной рекламы по квоте** в соответствующем [договоре с конечным рекламодателем](../../../labeling/token.md#step-2). {% endnote %} В поле **Домен** укажите домен рекламодателя — он будет добавлен в метку: «Реклама \| example.com» или «Соцреклама \| example.com» (только если в выпадающем списке выбрано значение `Реклама` или `Соцреклама`). {% endincluded %}