Background HTML5

Описание

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

С помощью шаблона Banner Background HTML5 можно добавить background на сайт двумя способами:

Подготовить только фоновое изображение и ссылку для перехода. Важно, чтобы вес фонового изображения не превышал допустимое ограничение в аккаунте.
Подготовить HTML-креатив в редакторе. Для работы с редакторами Adobe Animate CC и Google Web Designer можно воспользоваться готовой инструкцией.

Возможности баннера, доступные при добавлении в Adfox:

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

Особенности формата:

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

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

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

Подготовьте фоновое изображение, которое по ширине должно быть равно ширине сайта + ширина боковых полей бэкграунда.

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

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

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

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

Максимально допустимое количество символов в HTML коде — 65 000.
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="ССЫЛКА_НА_ФАЙЛ" />
```
В проекте может находиться только один файл с расширением .html.
Максимально допустимое количество файлов в проекте — 50.
Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, SWF.
Максимальный размер каждого файла (действует также для файлов внутри архива):
- 300 КБ;
- 1 МБ для видеофайлов.
Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов.
В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере.
Формат готового проекта — ZIP-архив.

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

Примечание

При подготовке HTML-креатива для фона по краям сайта рекомендуем использовать две картинки: одну для левого края, вторую для правого.

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

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

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

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

Архив с HTML5-креативом — загрузите ZIP-архив с проектом, поле HTML5 код креатива должно оставаться пустым (оно будет заполнено содержимым HTML-файла вашего проекта уже после добавления баннера).
Ссылка на промерочный пиксель — по умолчанию используется пиксель Adfox //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель Adfox и укажите другую ссылку.
URL перехода — укажите ссылку на сайт рекламодателя, которая будет применяться к фоновому изображению. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).
HTML5-код креатива — оставьте поле пустым, так как содержимое HTML-кода будет автоматически загружено из архива с проектом.
Ширина баннера (px или 100%) — укажите ширину баннера, которая включает в себя ширину контента сайта и ширину двух боковых изображений. Можно указывать ширину в 100%, которая равна ширине окна браузера.

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

Если высота в % указывается для HTML-креатива, он должен быть подготовлен тянущимся (резиновым).
Общий цвет фона (rgb в hex, например fff) — укажите цвет фона страницы, если баннер размещен в BODY (то есть не задан параметр Селектор контейнера баннера).
Селектор дополнительных кликабельных элементов (например, #content) — укажите селекторы элементов, которые находятся в области контента сайта, но являются прозрачными (сквозь них видно креатив), и при клике на них также должен осуществиться переход по ссылке. Разделитель для селекторов — запятая.

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

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

Этот параметр требует положительного значения в параметре Количество пикселей сдвига контента (px).
Количество пикселей сдвига контента (px) — количество пикселей, на которое нужно сдвинуть контент. Число должно быть положительным.
z-index блока с баннером — z-index блока с баннером. По умолчанию не указан.
Target для ссылки к фоновому изображению — определите в каком окне открывать ссылку для фонового изображения:
- _top — в текущем окне;
- _blank — в новом окне или вкладке, в зависимости от настроек браузера.
ContainerBackgroundColor — укажите цвет фона для специального контейнера (если задано значение для параметра Селектор контейнера баннера), в который будет вставлен блок с фоном. Формат: rgb в hex, например, fff.
BackgroundPosition — CSS-свойство background-position для контейнера с баннером-картинкой. По умолчанию устанавливается значение '50% 0'.
Изображение фона — загрузите фоновое изображение, которое будет показано как самостоятельный баннер (если не задан HTML5-креатив).
Дополнительные стили для тега body — CSS-стили, которые будут добавлены к элементу body на странице (стили будут применены для body вне зависимости от того, какой элемент задан в качестве главного элемента для размещения background).
По какому краю выравнивать баннер (left или right) — параметр работает, только если ширина баннера указана не в процентах. Принимает значения left (левое позиционирование) или right (правое позиционирование).
Настройка рекламной метки:
- В списке Метка рекламы выберите «Реклама» или «Соцреклама» — на баннер будет добавлена метка. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение «Отключена».
  
  Примечание
  
  Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию Договор социальной рекламы в соответствующем договоре с конечным рекламодателем.
- В поле Домен укажите домен рекламодателя — он будет добавлен в метку: «Реклама | example.com» или «Соцреклама | example.com» (только если в выпадающем списке выбрано значение Реклама или Соцреклама).
Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен).

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

Примечание

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

Примечание

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

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

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

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