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-кода баннера.
  3. Если итоговый HTML-код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы. Для этого сохраните js и css код в отдельные файлы с расширением .js или .css.
  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. Исключение составляет только текст на баннере.
  11. Формат готового проекта — zip-архив.

    Для центрирования креатива необходимо в настройках редакторов выставить расположение по центру. Например, в Adobe Animate CC перейдите в 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) — укажите цвет фона страницы, если баннер размещен в BODY (то есть не задан параметр Селектор контейнера баннера).
  8. Селектор дополнительных кликабельных элементов (например, #content) — укажите селекторы элементов, которые находятся в области контента сайта, но являются прозрачными (сквозь них видно креатив), и при клике на них, так же должен осуществиться переход по ссылке. Разделитель для селекторов — запятая.

    Описание селекторов должно соответствовать синтаксису CSS. Например:

    • #content — указание одного селектора по идентификатору content;
    • #content,.clickable-block — указание двух селекторов через разделитель.
  9. Селектор контейнера баннера (Например, .ya-ad-container) — специальный контейнер, в который будет вставлен блок с фоном. Если не указать, то контейнером будет BODY. Описание селекторов должно соответствовать синтаксису CSS.
  10. Сдвиг левой стороны баннера (px или %) — сдвиг левого края баннера. Положительные значения сдвигают фон вправо, отрицательные — влево.
  11. Сдвиг верхней стороны баннера (px или %) — сдвиг верхнего края баннера. Положительные значения сдвигают баннер вниз, отрицательные — вверх.
  12. Позиция фона (absolute или fixed) — укажите вариант расположения фона:
    • absolute — положение баннера будет абсолютным относительно контейнера. При скролле будет скролиться;
    • fixed — положение баннера будет фиксированным относительно контейнера. При скролле будет оставаться на месте.
  13. Селектор контейнера для сдвига контента (Например, .header) — укажите селектор контейнера, после которого будет добавлен прозрачный блок, сдвигающий контент. Если контейнер не указан, блок будет добавлен в BODY вторым элементом, сразу после рекламного блока.

    Описание селекторов должно соответствовать синтаксису CSS.

    Этот параметр требует положительного значения в параметре Количество пикселей сдвига контента (px).

  14. Количество пикселей сдвига контента (px) — количество пикселей, на которое нужно сдвинуть контент. Число должно быть положительным.
  15. Z-index баннера — z-index блока с баннером. По умолчанию не указан.
  16. Target для ссылки к фоновому изображению — определите в каком окне открывать ссылку для фонового изображения:
    • _top — в текущем окне;
    • _blank — в новом окне или вкладке, в зависимости от настроек браузера.
  17. ImageRendering css — CSS-свойство image-rendering сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.

    Значение применится в том случае, если оно поддерживается браузером, иначе будет использовано значение по умолчанию или свойство не применится, если оно полностью не поддерживается браузером.

    По умолчанию: -moz-crisp-edges в Firefox, pixelated в Chrome, в остальных поддерживающих браузерах — crisp-edges.

    Возможные значения:

    • auto — браузер автоматически подбирает алгоритм интерполяции, сглаживает изображение;
    • crisp-edges — сохраняет контраст и контуры изображения, не допуская размытия цветов и контуров. Firefox поддерживает значение -moz-crisp-edges. Chrome вместо crisp-edges поддерживает значение -webkit-optimize-contrast. Opera поддерживает значение -o-crisp-edges;
    • pixelated — при увеличении размера картинки сохраняет контраст и контуры изображения, не допуская размытия цветов и контуров. При уменьшении размеров аналогичен auto. Поддерживается только в Chrome.
  18. ContainerBackgroundColor — укажите цвет фона для специального контейнера (если задано значение для параметра Селектор контейнера баннера), в который будет вставлен блок с фоном. Формат: rgb в hex, например, fff.
  19. BackgroundPosition — CSS-свойство background-position для контейнера с баннером-картинкой. По умолчанию устанавливается значение '50% 0'.
  20. Изображение фона — загрузите фоновое изображение, которое будет показано как самостоятельный баннер (если не задан HTML5-креатив).
  21. Дополнительные стили для тега body — css-стили, которые будут добавлены к элементу body на странице (стили будут применены для body, вне зависимости от того, какой элемент задан в качестве главного элемента для размещения background).