--- metadata: - name: generator content: Diplodoc Platform v5.52.0 alternate: - https://yandex.com/support/adfox/en/banners/specs/background-html5.md - https://yandex.com/support/adfox/ru/banners/specs/background-html5.md - href: ru/banners/specs/background-html5.md type: text/markdown title: Markdown version - href: ../../llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/adfox/ru/llms.txt # Background HTML5 ## Описание {#description15} Background HTML5 — баннер, который позволяет заменить фон сайта на HTML-креатив или изображение. С помощью шаблона **Banner Background HTML5** можно добавить background на сайт двумя способами: 1. Подготовить только фоновое изображение и ссылку для перехода. Важно, чтобы вес фонового изображения не превышал допустимое ограничение в аккаунте. 1. Подготовить HTML-креатив. При использовании редакторов Adobe Animate CC и Google Web Designer рекомендуем воспользоваться готовой [инструкцией](https://yandex.com/support/adfox/ru/banners/specs/fullscreen-html5.md#codedequirements9). Возможности баннера, доступные при добавлении в Adfox: - показ фонового изображения по краям сайта, а также со сдвигом контента сайта; - добавление нескольких кнопок для перехода на разные страницы сайта рекламодателя (только для HTML-креатива); - гибкая настройка дополнительных элементов на сайте, перекрывающих фоновое изображение; - настройка положения фонового изображения в момент скролла контента сайта; - можно указывать ширину и высоту баннера как в пикселях, так и в процентах (100%); - код HTML-креатива может быть адаптивным, для этого необходимо указывать размеры баннера в процентах; - наличие URL перехода в параметрах баннера регулирует кликабельность баннера с изображением. Особенности формата: - проверка видимости формата Background HTML5 засчитывается только в случае, если хотя бы один пиксель баннера находится в активном окне браузера не менее двух секунд; - данный формат не рекомендуется использовать на мобильных устройствах, так как зачастую часть с фоновым изображением остается за пределами экрана мобильного устройства. > [Пример баннера](https://yandex.ru/project/yan/adfox-formats/example/background) ## Требования к изображениям {#imagerequirements} Подготовьте фоновое изображение, которое по ширине должно быть равно ширине сайта + ширина боковых полей бэкграунда. Вес фонового изображения не должен превышать допустимое ограничение в аккаунте (по умолчанию 10 МБ). Фоновое изображение может быть самостоятельным баннером, в таком случае HTML-креатив подготавливать не нужно, либо фоновое изображение может быть заглушкой, которая покажется в случае, если браузер пользователя не поддерживает HTML5-код креатива. ## Требования к HTML-креативу (для разработчиков кода) {#coderequirements15} Подготовьте ваш проект с HTML-креативом, соблюдая следующие требования: 1. Максимально допустимое количество символов в HTML коде — 65 000. 1. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, уменьшите его, разместив JavaScript и CSS в отдельных файлах: 1. Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css. 1. Файлы по весу не должны превышать 10 МБ. 1. Загрузите файлы на вкладку **Файлы** рекламной кампании и подключите в HTML-код полученные ссылки на файлы: - Если в проекте прописаны абсолютные ссылки (`src="js/script.js"`, `src="css/style.css"`), то при загрузке проекта Adfox распознает пути к файлам, автоматически загрузит их на вкладку **Файлы** и заменит все ссылки на эти файлы в загружаемом проекте. - Если в проекте прописаны относительные ссылки (например, `src="../js/script.js"`), воспользуйтесь одним из способов: - замените ссылки на файлы `.js` и `.css` на абсолютные — сработает парсинг Adfox и все ссылки будут заменены автоматически; - вручную загрузите файлы `.js` и `.css` на вкладку **Файлы**. Затем получите ссылки на эти файлы в Adfox и поменяйте в HTML-коде относительные ссылки на полученные. Пример подключения JS и CSS-файлов: ```html ``` 1. В проекте может находиться только один файл с расширением .html. 1. Максимально допустимое количество файлов в проекте — 50. 1. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, MP4, OGV, OGG, WEBM, AVI, SWF. 1. Максимальный размер каждого файла (действует также для файлов внутри архива): - 10 МБ; - 1 МБ для видеофайлов. 1. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов. 1. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере. 1. Формат готового проекта — ZIP-архив. Для центрирования креатива необходимо в настройках редакторов выставить расположение по центру. Например, в Adobe Animate CC перейдите в **Publish Settings** → **Center Stage**: ![](../../_images/banners/Animate_center.png) {% note info %} При подготовке HTML-креатива для фона по краям сайта рекомендуем использовать две картинки: одну для левого края, вторую для правого. Часть фона, которая будет находится под контентом сайта, должна быть равна ширине контента сайта, ее необходимо сделать прозрачной, для этого установите `background-color=alpha 0`. {% endnote %} ## Добавление баннера в Adfox {#addbannertoadfox15} Чтобы добавить баннер в 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` (правое позиционирование). || || **Настройка рекламной метки**: - **Метка рекламы** - **Домен** | {% include [ad-label-add-menu](../../_includes/labeling/ad-label/ad-tag-settings.md) %} || || **Добавить рекламное меню** | Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию **Добавить рекламное меню**. При показе баннера на нем будет отображаться значок меню ![](../../_images/kebab.png) в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен). В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации». {% note info %} Если баннер некликабельный (поле **URL перехода** не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера. {% endnote %} || || **Маркировка рекламы** | Раздел **Маркировка рекламы** доступен, только если в настройках рекламной кампании выбран порядок маркировки **Передавать данные в ЕРИР**. Заполните поля в этом разделе, чтобы [зарегистрировать креатив в ОРД Яндекса](https://yandex.com/support/adfox/ru/labeling/token.md). Токен будет присвоен креативу автоматически. {% note info %} Если к конкретному баннеру маркировка не применяется, в этом поле выберите **Не передавать данные в ЕРИР**. {% endnote %} || |# ## Обратиться в службу поддержки Написать в чат Написать письмо {% included (../../_includes/labeling/ad-label/ad-tag-settings.md) %} В списке **Метка рекламы** выберите `Реклама` или `Соцреклама` — на баннер будет добавлена метка. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение `Отключена`. {% note info %} Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо выбрать опцию **Договор социальной рекламы с оплатой** или **Договор социальной рекламы по квоте** в соответствующем [договоре с конечным рекламодателем](../../../labeling/token.md#step-2). {% endnote %} В поле **Домен** укажите домен рекламодателя — он будет добавлен в метку: «Реклама \| example.com» или «Соцреклама \| example.com» (только если в выпадающем списке выбрано значение `Реклама` или `Соцреклама`). {% endincluded %}