Screenglide HTML5

Описание

Screenglide HTML5 — интерактивный HTML5-баннер, расхлопывающийся в зависимости от действий пользователя (клик, наведение и т. д.) или автоматически, со сдвигом контента или поверх его. В баннере можно реализовать кнопки с переходом на разные страницы сайта рекламодателя.

Креатив в баннере может быть реализован в виде:

  • изображений;
  • HTML-креатива, подготовленного в редакторе Adobe Animate CC или Google Web Designer по инструкции ниже.

Параметры, настраиваемые при добавлении в Adfox:

  • время показа баннера в расхлопнутом состоянии;
  • сдвиг контента при расхлопе.

Пример баннера

Пример готового проекта в Adobe Animate CC, исходный файл.

Пример готового проекта в Google Web Designer, исходный файл.

Разработка HTML-креатива

Важно

Ознакомьтесь с требованиями к HTML-коду.

  1. Максимально допустимый размер HTML-файла — 65 000 байт.

  2. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, уменьшите его, разместив JavaScript и CSS в отдельных файлах:

    1. Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css.

    2. Файлы по весу не должны превышать 300 КБ.

    3. Загрузите файлы на вкладку Файлы рекламной кампании и подключите в HTML-код полученные ссылки на файлы:

      • Если в проекте прописаны абсолютные ссылки (src="js/script.js", src="css/style.css"), то при загрузке проекта Adfox распознает пути к файлам, автоматически загрузит их на вкладку Файлы и заменит все ссылки на эти файлы в загружаемом проекте.

      • Если в проекте прописаны относительные ссылки (например, src="../js/script.js"), воспользуйтесь одним из способов:

        • замените ссылки на файлы .js и .css на абсолютные — сработает парсинг Adfox и все ссылки будут заменены автоматически;
        • вручную загрузите файлы .js и .css на вкладку Файлы. Затем получите ссылки на эти файлы в Adfox и поменяйте в HTML-коде относительные ссылки на полученные.

      Пример подключения JS и CSS-файлов:

      <script type="text/javascript" src="ССЫЛКА_НА_ФАЙЛ"></script><link rel="stylesheet" type="text/css" href="ССЫЛКА_НА_ФАЙЛ" />

  3. В проекте может находиться только один файл с расширением .html.

  4. Максимально допустимое количество файлов в проекте — 50.

  5. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, MP4, OGV, OGG, WEBM, AVI, SWF.

  6. Максимальный размер каждого файла (действует также для файлов внутри архива):

    • 300 КБ;
    • 1 МБ для видеофайлов.

  7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов.

  8. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере.

  9. Формат готового проекта — ZIP-архив.

При изменении размера canvas, его содержимое очищается в webkit-браузерах, поэтому, если код креатива был создан самостоятельно без помощи таких редакторов как Adobe Animate, перерисовывайте canvas после изменения его размера.

Требования к изображениям

  • Используйте картинки высокого разрешения, это кардинально улучшит качество баннера на мобильном устройстве, хоть и снизит скорость загрузки баннера.
  • Рекомендуется уменьшать размер файла изображения, используя сервисы наподобие TinyPng. Данный сервис работает как с PNG, так и c JPEG.
  • Можно использовать SVG картинки. Они векторные, а значит они будут лучше выглядеть на всех устройствах — мобильных и десктопных. Также они имеют малый размер файла и могут быть с анимацией.
  • Допустимые форматы изображений: PNG, GIF, JPG, SVG.
  • Максимальный вес одного файла: 300 КБ.

Выберите редактор, в котором будете разрабатывать HTML-креатив и кликните на соответствующую ссылку. Подготовьте архив с HTML-креативом по инструкции:

Редактор Adobe Animate CC

  1. На разных слоях разместите два symbol, которые будут соответствовать баннеру в схлопнутом и расхлопнутом состояниях.

    Если нужна кнопка Закрыть, добавьте ее в Movie clip расхлопнутого состояния.

    Укажите instance names.

    Рекомендуем использовать instance names: expanded, collapsed и closed для расхлопнутого, схлопнутого состояния и кнопки Закрыть соответственно. Тогда можно без изменений перенести примеры кодов из этой инструкции в Animate.

    См. также:

    Инструкция по добавлению кнопки и назначению instance name

    Кнопка на главной сцене

    1. Создайте на сцене какой-нибудь объект, например, с помощью Rectangle Tool. Затем выделите его и в контекстном меню выберите Convert to Symbol....

    2. В появившемся диалоговом окне выберите Type: Button, Name можно оставить без изменений, нажмите Ok.

    3. Назначьте этой кнопке Instance Name, чтобы работал клик.

    4. Пропишите в Actions для этой кнопки код:

      window.buttons.push(
//Пропишите через запятую пути кнопок, добавив вначале this
this.button1
//Конец места для кнопок
);

    Вложенная кнопка

    1. Допустим, что кнопка находится внутри другого символа, например, внутри Movie Clip. В данном примере этому Movie Clip задано Instance Name «name».

    2. По двойному клику перейдите внутрь name, там будет вложенная кнопка.

    3. При указании в Actions пути до такой кнопки, нужно будет добавить Instance Name объекта после this, в который она вложена:

      window.buttons.push(
//Пропишите через запятую пути кнопок, добавив вначале this
**this**.name.button1
//Конец места для кнопок
);

  2. Выберите один из шаблонов в зависимости от сценария в баннере.

    Скачайте шаблон и подключите его к проекту:

    Шаблоны для редактора Animate от 15 версии и ниже:

  3. В зависимости от сценария работы баннера добавьте один из примеров кода в слой Actions:

    Одна кликабельная область и расхлоп по наведению

    //Поменяйте instance name, если требуется
expanded = this.expanded;
collapsed = this.collapsed;
setAdfox();

    Несколько кнопок и расхлоп по наведению

    //Поменяйте 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();

    Одна кликабельная область и расхлоп или схлоп по клику

    //Поменяйте instance name, если требуется
expanded = this.expanded;
collapsed = this.collapsed;
close = this.expanded.close;
setAdfox();

    Несколько кнопок и расхлоп или схлоп по клику

    //Поменяйте instance name, если требуется
collapsed = this.collapsed;
expanded = this.expanded;
close = this.expanded.close;
window.buttons.push(
//Пропишите через запятую пути кнопок, добавив вначале this
this.expanded.button1, this.expanded.button2
//Конец места для кнопок
);
setAdfox();

  4. Опубликуйте проект и упакуйте его в ZIP-архив.

  5. Если вы используете вариант с несколькими кнопками, сохраните соответствие instance name кнопок и их назначение. Эта информация понадобится при добавлении HTML-креатива в интерфейс Adfox.

    Например:

    this.expanded.button1 — ссылка на страницу с товаром;

    this.expanded.button2 — ссылка на контакты.

    В интерфейсе Adfox после добавления баннера ссылки нужно прописать на вкладке События.

    Первый instance в строке кода будет соответствовать параметру Событие 1 баннера, название у события может быть любое.

Редактор Google Web Designer

  1. Скачайте шаблон баннера для Google Web Designer.

    Код данного баннера можно брать за основу при создании креативов в редакторе. Разместите содержимое архива в папке с шаблонами программы, например:

    /Users/[USER_NAME]/Documents/Google Web Designer/templates

    Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:

    %request.reference_mrc%, %user1%, %eventN%, где N — номер события от 1 до 30.

  2. Обработка клика.

    Все события назначаются конкретным элементам анимации через вкладку События.

    Для вызова действий используется компонент Интерактивная область.

    Добавьте его и выберите событие Интерактивная область → Касание/нажатие (или Tap Area → Touch/Click в английской версии).

    На вкладке Собственный код укажите вызов функции клика.

    • если используется одна кнопка перехода:

      callClick();

    • если кнопок перехода несколько:

      callClick(n);

      где n — номер события, которое должно быть вызвано.

    • если необходимо вызвать событие из анимации без перехода используйте следующий код:

      callEvent(n);

      где n — номер события, которое должно быть вызвано.

    Особенность реализации тянущегося (резинового) баннера.

    Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели Свойства для положения и размеров укажите проценты вместо пикселей.

    Также используйте опции Выровнять по контейнеру и Резиновый макет на верхней панели инструментов.

    Если перед использованием каких-либо инструментов выравнивания включить Резиновый макет, при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.

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

    Пример готового проекта в Google Web Designer, исходный файл.

  3. Публикация проекта.

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

Примечание

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

После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox.

Добавление баннера в Adfox

Чтобы добавить баннер в Adfox выберите нужный тип баннера и шаблон Screenglide HTML5 [context].

Заполните параметры баннера:

  1. Архив с HTML5 креативом — загрузите ZIP-архив с проектом, поле HTML5 код креатива должно оставаться пустым (оно будет заполнено содержимым HTML-файла вашего проекта уже после добавления баннера).

  2. HTML5 код креатива — содержимое HTML-кода из архива с проектом (загружается автоматически из архива).

  3. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).

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

  5. Если в HTML-креативе несколько кнопок для перехода на разные страницы сайта рекламодателя, укажите их на вкладке События баннера. Соответствие кнопок и ссылок должны предоставить разработчики HTML-креатива.

  6. TARGET ссылки — в каком окне открывать ссылку:

    • _top — в текущем окне;
    • _blank — в новом окне или вкладке, в зависимости от настроек браузера.

  7. Ссылка на промерочный пиксель — укажите ссылку на промерочный пиксель для подсчета показов в сторонней системе управления рекламой.

  8. Изображение №1 (до расхлопа) — если баннер состоит из двух изображений, загрузите изображение наименьшего размера (до расхлопа). Также баннер может состоять и из одного изображения №1 — в этом случае расхлопа не будет.

  9. Изображение №2 (после расхлопа) — необязательное. Если баннер состоит из двух изображений, загрузите изображение большего размера (после расхлопа).

  10. Время жизни расхлопа (секунд) — время в секундах, после которого баннер будет автоматически схлопнут после автоматического или вызванного пользователем расхлопа.

  11. Сдвигать контент при расхлопе — будет ли баннер сдвигать контент:

    • no — расхлоп происходит поверх контента;
    • yes — расхлоп сдвигает контент как по горизонтали, так и по вертикали. Чтобы сдвигать по горизонтали, надо чтобы контейнер был обтекаемым элементом (например, display: inline-block или float: left).

  12. Имя атрибута class контейнера баннера — при необходимости укажите имя (или несколько имен через пробел) для атрибута class контейнера с баннером.

  13. Ширина до расхлопа (в px или 100%) — ширина креатива до расхлопа.

  14. Высота до расхлопа (в px или 100%) — высота креатива до расхлопа.

  15. Ширина после расхлопа (в px или 100%) — ширина креатива в расхлопнутом виде.

  16. Высота после расхлопа (в px или 100%) — высота креатива в расхлопнутом виде.

  17. Направление расхлопа — в какую сторону должен расхлопываться баннер:

    • bottom — вниз;
    • top — вверх.

  18. Стили для блока баннера — произвольные стили для контейнера баннера одной строкой. Кроме стиля: display. Например, border: 1px solid red;. Невалидные значения будут отброшены браузером.

  19. Настройка рекламной метки:

    • В списке Метка рекламы выберите «Реклама» или «Соцреклама» — на баннер будет добавлена метка. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение «Отключена».

      Примечание

      Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию Договор социальной рекламы в соответствующем договоре с конечным рекламодателем.

    • В поле Домен укажите домен рекламодателя — он будет добавлен в метку: «Реклама | example.com» или «Соцреклама | example.com» (только если в выпадающем списке выбрано значение Реклама или Соцреклама).

  20. Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню  в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен).

    В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации».

    Примечание

    Если баннер некликабельный (поле URL перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера.

  21. Маркировка рекламы — раздел доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически.

    Примечание

    Если к конкретному баннеру маркировка не применяется, в этом поле выберите Не передавать данные в ЕРИР.

Обратиться в службу поддержки

Написать в чат

Написать письмо

Предыдущая
Проброс кода Adfox
Следующая
Banner Interscroller HTML5