Banner Interscroller HTML5

Описание

Banner Interscroller HTML5 отображает содержимое с использованием параллакс-эффекта.

Интерактивный баннер, размещенный под контентом сайта. Параллакс эффект при скролле страницы создает впечатление, что баннер, прерывая контент сайта, начинает показываться с нижней части, по мере скролла постепенно раскрываясь вверх, и также плавно скрываясь снова под контентом сайта.

В нижней части баннера расположена плашка с уведомлением, что это реклама. Плашка не показывается, если включена рекламная метка.

С помощью одного шаблона Banner Interscroller HTML5 можно добавить баннер с разным содержимым:

• HTML-креатив;
• изображение.

Формат доступен для десктопа и мобильных устройств и рекомендуется к использованию в контенте сайта, в статьях.

Есть возможность реализовать отображение баннера на весь экран (на середине прокрутки баннера он займет всю ширину и высоту окна браузера). Для этого требуется:

1. Использовать относительные единицы при добавлении баннера в интерфейсе: 100 vw и 100 vh.
2. Добавить код вставки для баннера в верстку сайта так, чтобы он не был ограничен размерами родительского элемента.

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

Код вставки на сайте имеет контейнер для баннера, в который выгружается код баннера. Например:

<div id="adfox_150344285900533152"></div>

Код баннера оборачивается еще в один контейнер-окно, внутри которого показывается креатив (баннер) и плашка со словом «Реклама» высотой 20 px (если не включена рекламная метка).

При добавлении баннера в Adfox необходимо указывать размеры (ширину и высоту) как контейнера-окна, так и самого креатива (баннера).

Если размер креатива больше размера контейнера-окна, креатив будет скроллиться относительно положения контейнера-окна в экране браузера.

Если размер креатива меньше, он будет выровнен по центру контейнера-окна.

На сайте в итоге получается конструкция:

div контейнер для баннера от кода вставки
контейнер-окно для баннера, размеры которого задаются в параметрах баннера
код баннера

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

Для подготовки проекта с HTML5-креативом рекомендуем воспользоваться готовой инструкцией для редакторов:

• Adobe Animate CC;
• Google Web Designer.

Пример готового проекта с одной кнопкой в Adobe Animate CC, исходный файл.

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

Допустимые форматы изображений: PNG, GIF, JPG.

Максимальный вес одного файла: 300 КБ.

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

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

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

1. HTML5 код креатива — загрузите ZIP-архив с проектом.

2. Ссылка на промерочный пиксель — по умолчанию используется пиксель Adfox //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе удалите пиксель Adfox и укажите другую ссылку.

3. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).

4. HTML5 (CSS, HTML, JS) — содержимое HTML-кода из архива с проектом (загружается автоматически из архива). Если HTML5-код не задан, загрузите изображение для баннера.

   Для креатива кликабельная только область внутри креатива.

5. Текст на нижней плашке — текст на плашке внизу баннера. По умолчанию — «Реклама». Высота плашки 20 px. Не показывается при включении новой рекламной метки.

   Для всех параметров ширины и высоты возможно указание следующих величин с указанием размерности:

   • px — значение ширины или высоты в пикселях, например: 400 px;
   • % — значение ширины или высоты в процентах, рассчитывается от размеров элемента-родителя, например: 100%;
   • vw — относительные единицы измерения, вычисляются относительно размеров окна браузера, например: 100 vw — это 100% от ширины экрана браузера;
   • vh — относительные единицы измерения, вычисляются относительно размеров окна браузера, например: 100 vh — это 100% от высоты экрана браузера;
   • number — целочисленные значения, без указания размерности. Размер будет автоматически подобран в указанных пропорциях относительно 100% от ширины элемента контейнера. Например: если указать размеры width=3 height=4 при ширине элемента контейнера в 320 px — то высота контейнера станет равной 426 px.

6. Ширина вьюпорта (px, %, vh, vw, number) — если значение указано в процентах, за 100% принимается ширина контейнера от кода вставки баннера. Если значение не указано, значение будет равно 100% от ширины контейнера.

7. Высота вьюпорта (px, %, vh, vw, number) — укажите высоту контейнера-окна. Учитывая высоту плашки со словом «Реклама» в нижней части контейнера-окна, рекомендуем высоту контейнера-окна указывать на 20 px больше высоты баннера.

8. Ширина баннера (px, %, vh, vw, number) — если значение указано в процентах, за 100% принимается ширина контейнера-окна. Если значение не указано, значение будет равно 100% от ширины контейнера-окна.

9. Высота баннера (px, %, vh, vw, number) — если значение указано в процентах, за 100% принимается высота контейнера-окна.

10. autoScroll (yes|no) — возможность баннера докручиваться на полный экран, если его видимая часть превышает 4/5 экрана:

    • yes — докручивать баннер;
    • no — не докручивать баннер.

11. Расположение изображения (contain, cover) — укажите вариант расположения изображения внутри баннера и как оно будет масштабироваться. Возможные значения:

    • contain — размер баннера будет таким, как его указал рекламодатель, и не зависит от размера контейнера. Если размер изображения больше размера баннера, изображение будет пропорционально отмасштабировано так, чтобы вся площадь баннера была занята изображением. Центр изображения будет расположен по центру блока. Обязательно должна быть указана высота баннера;
    • cover — размер баннера будет таким, как его указал рекламодатель, и не зависит от размера контейнера. Если размер изображения больше размера баннера, изображение будет пропорционально отмасштабировано так, чтобы изображение было полностью видно. Свободные от изображения области будут прозрачными. Центр изображения будет расположен по центру блока. Обязательно должна быть указана высота баннера.

12. Изображение — загрузите изображение или укажите ссылку на файл изображения.

13. Имя атрибута class контейнера баннера — при необходимости укажите имя (или несколько имен через пробел) для атрибута class контейнера с баннером.

14. advStyle — укажите стиль CSS для оформления кнопки «Реклама».

15. Текст на рекламной метке — задайте текст рекламной метки. По умолчанию будет указано «Реклама».

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

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

      Примечание

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

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

    Примечание

    Если вы настроите рекламную метку, то текст «Реклама» на нижней плашке будет отключен.

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

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

    Примечание

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

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

    Примечание

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

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

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

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