Background HTML5

Описание

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

Background HTML5 - баннер, который позволяет заменить фон сайта на HTML креатив или изображение.

С помощью шаблона "Banner Background HTML5" можно добавить background на сайт двумя способами:
1. подготовить только фоновое изображение и ссылку для перехода. Важно, чтобы вес фонового изображения не превышал допустимое ограничение в аккаунте.
2. подготовить HTML креатив в редакторе. Для работы с двумя редакторами можно воспользоваться готовой инструкцией: Adobe Animate CC или Google Web Designer.

Возможности баннера, доступные при добавлении в ADFOX:
- показ фонового изображения по краям сайта, а также со сдвигом контента сайта;
- добавление нескольких кнопок для перехода на разные страницы сайта рекламодателя (только для HTML креатива);
- гибкая настройка дополнительных элементов на сайте, перекрывающих фоновое изображение;
- настройка положения фонового изображения в момент скролла контента сайта;
- можно указывать ширину и высоту баннера как в пикселях, так и в процентах (100%);
- код HTML креатива может быть адаптивным, для этого необходимо указывать размеры баннера в процентах;
- наличие URL перехода в параметрах баннера регулирует кликабельность баннера с изображением.

Особенности формата:
- проверка видимости формата Background HTML5 засчитывается только в случае, если хотя бы 1px баннера находится в активном окне браузера не менее 2 секунд.
- данный формат не рекомендуется использовать на мобильных устройствах, так как зачастую часть с фоновым изображением остается за пределами экрана мобильного устройства.

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

Подготовьте фоновое изображение, которое по ширине должно быть равно ширине сайта + ширина боковых полей бекграунда.
Вес фонового изображения не должен превышать допустимое ограничение в аккаунте (по умолчанию - 300Кб).

Фоновое изображение может быть как самостоятельным баннером, в таком случае HTML креатив подготавливать не нужно, либо фоновое изображение может быть заглушкой, которая покажется в случае, если браузер пользователя не поддерживает HTML5 код креатива.

Требования к HTML креативу (для разработчиков кода)

Подготовьте ваш проект с HTML креативом, соблюдая следующие требования:

1. Максимально допустимое количество символов в HTML коде — 65 000;
2. JavaScript и CSS предпочтительнее размещать внутри HTML кода баннера;
Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
- сохраните js и css код в отдельные файлы с расширением .js или .css;
3. В проекте может находиться только один файл с расширением .html;
4. Максимально допустимое количество файлов в проекте — 50;
5. Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
6. Максимальный размер каждого файла (действует также для файлов внутри архива):
- 300Кб;
- 1Мб для видео файлов.
7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
8. В названиях переменных и объектов нельзя использовать русские буквы.
Исключение составляет только текст на баннере.
9. Формат готового проекта — zip архив.

Для центрирования креатива необходимо в настройках редакторов выставить расположение по центру. Например, в AdobeAnimateCC перейдите в "Publish Settings — Center Stage":

При подготовке HTML креатива для фона по краям сайта рекомендуем использовать две картинки: одну для левого края, вторую для правого.
Часть фона, которая будет находится под контентом сайта, должна быть равна ширине контента сайта и ее необходимо сделать прозрачной, для этого установите background-color=alpha 0.

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

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон "Background HTML5 [loader]".

Укажите параметры баннера:

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

  2. Ссылка на промерочный пиксель — по умолчанию используется пиксель ADFOX //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель ADFOX и укажите другую ссылку.

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

  4. HTML5 код креатива — оставьте поле пустым, так как содержимое html-кода будет автоматически загружено из архива с проектом.

  5. Ширина баннера (px или 100%) — укажите ширину баннера, которая включает в себя ширину контента сайта и ширину двух боковых изображений. Можно указывать ширину в 100%, которая равна ширине окна браузера.
    Если ширина в % указывается для HTML креатива, то он должен быть подготовлен тянущимся (резиновым).

  6. Высота баннера (px или 100%) — укажите высоту баннера. Можно указывать высоту в 100%, которая равна высоте окна браузера.
    Если высота в % указывается для HTML креатива, то он должен быть подготовлен тянущимся (резиновым).

  7. Общий цвет фона (rgb в hex, например fff) — укажите цвет фона страницы.

  8. Селектор дополнительных кликабельных элементов (например, #content) — укажите селекторы элементов, которые находятся в области контента сайта, но являются прозрачными (сквозь них видно креатив), и при клике на них, так же должен осуществиться переход по ссылке. Разделитель для селекторов - запятая.
    Описание селекторов должно соответствовать синтаксису CSS. Например:
    #content - указание одного селектора по идентификатору content;
    #content,.clickable-block - указание двух селекторов через разделитель.

  9. Селектор контейнера баннера (Например, .ya-ad-container) — специальный контейнер, в который будет вставлен блок с фоном. Если не указать, то контейнером будет BODY. Описание селекторов должно соответствовать синтаксису CSS.

  10. Сдвиг левой стороны баннера (px или %) — сдвиг левого края баннера. Положительные значения сдвигают фон вправо, отрицательные - влево.

  11. Сдвиг верхней стороны баннера (px или %) — высота сдвига контента сайта для показа фонового изображения над контентом сайта. По умолчанию задано: 0px;

  12. Позиция фона (absolute или fixed) — укажите вариант расположения фона:
    absolute - положение баннера будет абсолютным относительно контейнера. При скролле будет скролиться;
    fixed - положение баннера будет фиксированным относительно контейнера. При скролле будет оставаться на месте.

  13. Селектор контейнера для сдвига контента (Например, .header) — укажите селектор контейнера, после которого будет добавлен прозрачный блок, сдвигающий контент. Если контейнер не указан, блок будет добавлен в BODY вторым элементом, сразу после рекламного блока.
    Описание селекторов должно соответствовать синтаксису CSS.
    Этот параметр требует положительного значения в параметре "Количество пикселей сдвига контента (px)".

  14. Количество пикселей сдвига контента (px) — количество пикселей, на которое нужно сдвинуть контент. Число должно быть положительным.

  15. z-index баннера — z-index блока с баннером. По умолчанию не указан.

  16. target для ссылки к фоновому изображению — определите в каком окне открывать ссылку для фонового изображения:
    _top - в текущем окне;
    _blank - в новом окне или вкладке, в зависимости от настроек браузера.

  17. Изображение фона — загрузите фоновое изображение, которое будет показано как самостоятельный баннер (если не задан HTML5 креатив).

  18. Дополнительные стили для тега body — css-стили, которые будут добавлены к элементу body на странице (стили будут применены для body, вне зависимости от того, какой элемент задан в качестве главного элемента для размещения background).