Background HTML5

Описание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Максимально допустимое количество символов в HTML коде — 65 000.

  2. 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="ССЫЛКА_НА_ФАЙЛ" />

  3. В проекте может находиться только один файл с расширением .html.

  4. Максимально допустимое количество файлов в проекте — 50.

  5. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, MP4, OGV, OGG, WEBM, AVI, SWF.

  6. Максимальный размер каждого файла (действует также для файлов внутри архива):

    • 300 КБ;
    • 1 МБ для видеофайлов.

  7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов.

  8. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере.

  9. Формат готового проекта — ZIP-архив.

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

Примечание

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

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

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

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

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

  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. Позиция фона (absolute или fixed) — укажите вариант расположения фона:

    • absolute — положение баннера будет абсолютным относительно контейнера. При скролле будет скролиться;
    • fixed — положение баннера будет фиксированным относительно контейнера. При скролле будет оставаться на месте.

  12. Селектор контейнера для сдвига контента (например, .header) — укажите селектор контейнера, после которого будет добавлен прозрачный блок, сдвигающий контент. Если контейнер не указан, блок будет добавлен в BODY вторым элементом, сразу после рекламного блока.

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

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

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

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

  15. Target для ссылки к фоновому изображению — определите в каком окне открывать ссылку для фонового изображения:

    • _top — в текущем окне;
    • _blank — в новом окне или вкладке, в зависимости от настроек браузера.

  16. {{ container-background-color } — укажите цвет фона для специального контейнера (если задано значение для параметра Селектор контейнера баннера), в который будет вставлен блок с фоном. Формат: rgb в hex, например, fff.

  17. BackgroundPosition — CSS-свойство background-position для контейнера с баннером-картинкой. По умолчанию устанавливается значение '50% 0'.

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

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

  20. По какому краю выравнивать баннер (left или right) — параметр работает, только если ширина баннера указана не в процентах. Принимает значения left (левое позиционирование) или right (правое позиционирование).

  21. Настройка рекламной метки:

    • В списке Метка рекламы выберите «Реклама» или «Соцреклама» — на баннер будет добавлена метка. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение «Отключена».

      Примечание

      Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию Договор социальной рекламы в соответствующем договоре с конечным рекламодателем.

    • В поле Домен укажите домен рекламодателя — он будет добавлен в метку: «Реклама | example.com» или «Соцреклама | example.com» (только если в выпадающем списке выбрано значение Реклама или Соцреклама).

  22. Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню  в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен).

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

    Примечание

    Если баннер некликабельный (поле URL перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера.

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

    Примечание

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

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

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

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

Предыдущая
InPage video
Следующая
Telegram-баннер