Screenglide HTML5

Описание

Примечание. Шаблон работает только на кодах вставок, использующих библиотеку loader.js — в инструкции такие коды имеют пометку NEW.

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

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

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

  • расхлоп двух видов:
    • авторасхлоп — расхлоп при инициализации, настраивается параметром Авторасхлоп всегда;
    • cессионный расхлоп — баннер будет показан в расхлопнутом состоянии при инициализации такое количество раз, которое указано в параметре Кол-во авторасхлопов, но время из параметра Время сессии для авторасхлопа индивидуально для каждого пользователя.
  • время показа баннера в расхлопнутом состоянии;
  • 10 вариантов направлений расхлопа баннера;
  • сдвиг контента при расхлопе;
  • скорость анимации расхлопа и схлопа.

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

Ознакомьтесь с требованиями к HTML-коду.
  1. Максимально допустимый размер HTML-файла — 65 000 байт.
  2. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
    • сохраните js и css код в отдельные файлы с расширением .js или .css;
    • файлы по весу не должны превышать 300Кб;
    • загрузите файлы во вкладку Файлы рекламной кампании и полученные ссылки на файлы подключите в HTML-код.
  3. Пример подключения js и css файлов:
    <script type="text/javascript" src="ССЫЛКА_НА_ФАЙЛ"></script>
    <link rel="stylesheet" type="text/css" href="ССЫЛКА_НА_ФАЙЛ" />
    Примечание. В HTML-коде не допускается использование относительных путей к файлам.
  4. В проекте может находиться только один файл с расширением .html.
  5. Максимально допустимое количество файлов в проекте — 50.
  6. Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf.
  7. Максимальный размер каждого файла (действует также для файлов внутри архива):
    • 300 Кб;
    • 1Мб для видеофайлов.
  8. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов.
  9. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере.
  10. Формат готового проекта — zip-архив.

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

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

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

Рекомендуется уменьшать размер файла изображения, используя сервисы наподобие 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. В зависимости от сценария работы баннера добавьте один из примеров кода в слой 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();
  3. Опубликуйте проект и упакуйте его в zip-архив.

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

    Например:

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

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

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

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

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

    Код данного баннера можно брать за основу при создании креативов в редакторе.

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

    %reference%, %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 [loader].

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

  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. Направление расхлопа — в какую сторону должен расхлопываться баннер:
    Значение Описание
    overhead_left_corner из левого верхнего угла открывать вправо — вниз
    overhead_right_cornerиз верхнего правого угля открывать влево — вниз
    lower_left_cornerиз нижнего левого угла открывать вправо — вверх
    lower_right_cornerиз нижнего правого угла открывать влево — вверх
    central_pointиз центральной точки открывать по центру
    rightвправо
    leftвлево
    bottomвниз
    topвверх
    fullscreen на весь экран
  18. Кол-во авторасхлопов — укажите число сессионных авторасхлопов для одного пользователя. При достижении указанного числа расхлопов, в следующие инициализации баннер будет показан в схлопнутом состоянии.
  19. Время сессии для авторасхлопа — время сессионного авторасхлопа в часах. По прошествию этого времени, начиная с момента первого расхлопа, баннер будет отображаться снова в расхлопнутом состоянии, если параметр Кол-во авторасхлопов больше 0.
  20. Авторасхлоп всегда — будет ли баннер расхлопнут при инициализации. Параметр имеет приоритет над сессионным расхлопом. Возможные значения:
    • no — баннер начинает показ с меньшего размера;
    • yes — авторасхлоп баннера.
  21. Время анимации (секунд) — время анимации схлопа и расхлопа в секундах.
  22. Стили для блока баннера — произвольные стили для контейнера баннера одной строкой. Кроме стиля: display. Например, border: 1px solid red;. Невалидные значения будут отброшены браузером.