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, 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 перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера.
Маркировка рекламы	Раздел Маркировка рекламы доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически. Примечание Если к конкретному баннеру маркировка не применяется, в этом поле выберите Не передавать данные в ЕРИР.

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

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

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

Была ли статья полезна?

InPage video

Telegram-баннер