BannerLine с расхлопом до FullScreen

Описание

BannerLine с расхлопом до FullScreen — баннер-перетяжка, который показывается внизу экрана и при скроллинге не меняет своего положения. При наведении на перетяжку или с помощью авторасхлопа показывается баннер FullScreen.

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

Возможности баннера:

  • возможность для портретной и альбомной ориентации устройства загрузить разные изображения FullScreen;
  • установить цвет фона для баннера-перетяжки и отдельно для баннера-Fullscreen;
  • установить собственную кнопку закрыть, располагаемую в верхнем правом углу FullScreen-баннера;
  • установить количество авторасхлопов, то есть число показов баннера FullScreen сразу при загрузке страницы сайта;
  • установить время сессии для авторасхлопа, в течении которого будет действовать количество авторасхлопов для уникального пользователя. По истечении времени сессия начнется заново;
  • установить авторасхлоп всегда при открытии страницы сайта или только при наведении указателя мыши на баннер-перетяжку.

Подготовка (для разработчиков)

Что необходимо подготовить:

  • картинку FullScreen для портретной ориентации — вертикальное изображение (*.png, *.jpg, *.gif);
  • картинку FullScreen для альбомной ориентации — горизонтальное изображение (*.png, *.jpg, *.gif);
  • картинку-перетяжку (*.png, *.jpg, *.gif).
Требования к файлам
Ограничение на размер:

Графические файлы (*.jpg, *.png, *.gif) — до 300 Кб.

Для баннеров, состоящих из нескольких файлов, ограничения проверяются отдельно для каждого файла.

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

Названия файлов:

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

Добавление в ADFOX

При добавлении баннера выберите нужный тип баннера и шаблон BannerLine с расхлопом до FullScreen.

Если шаблон отсутствует в типе баннера, добавьте его из предзаданных.

Шаблон работает на синхронном и асинхронном коде вставки.

Укажите следующие параметры:
  1. TARGET ссылки — параметр, определяющий в каком окне открывать ссылку:
    • _top — в текущем окне;
    • _blank — в новом окне или вкладке, в зависимости от настроек браузера.
  2. Ссылка на промерочный пиксель — укажите ссылку на пиксель для подсчета показов в сторонней системе управления рекламой. Подробнее см. инструкцию.

    По умолчанию: //banners.adfox.ru/transparent.gif.

  3. URL перехода — укажите ссылку на сайт рекламодателя.
  4. Изображение перетяжки — загрузите изображение для баннера-перетяжки. Перетяжка прикреплена к нижней части окна браузера и при скроллинге не изменяет своего положения.
  5. Высота перетяжки (px) — укажите высоту изображения в пикселях. Например: 50px
  6. Цвет фона перетяжки (rgba|transparent) — укажите цвет фона для перетяжки. Возможны два варианта записи:
    • rgba(r,g,b,a) — укажите цвет в формате rgba, где первые три буквы (r, g, b) расшифровываются как red, green, blue (красный, зеленый, синий), их значения можно посмотреть в любом графическом редакторе. Последняя буква (a) символизирует собой альфа-канал и задает прозрачность элемента, совпадает со значением свойства opacity (значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность). Например, rgba(255, 0, 0, 1) — задает непрозрачный красный цвет фона;
    • transparent — фон под картинкой будет прозрачным и часть сайта останется видимой, если картинка окажется меньше, чем ширина сайта.
  7. Стиль заполнения области перетяжки (contain|cover) — параметр определяет, как показывать баннер:
    • cover — масштабирует изображение перетяжки с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока (при этом часть изображения может выйти за область видимости в браузере, но тем самым картинка заполнит всю видимую область браузера);
    • contain (по умолчанию) — масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока (при этом будет видно все изображение, но будет заполнена не вся область браузера, оставшаяся часть останется подложкой с указанным в параметрах баннера цветом).
  8. Вертикальное изображение FullScreen — загрузите изображение FullScreen для портретной ориентации устройства.
  9. Горизонтальное изображение FullScreen — загрузите изображение FullScreen для альбомной ориентации устройства.
  10. Цвет фона fullscreen (rgba|transparent) — укажите цвет фона для FullScreen. Возможны два варианта записи:
    • rgba(r,g,b,a) — укажите цвет в формате rgba, где первые три буквы (r, g, b) расшифровываются как red, green, blue (красный, зеленый, синий), их значения можно посмотреть в любом графическом редакторе. Последняя буква (a) символизирует собой альфа-канал и задает прозрачность элемента, совпадает со значением свойства opacity (значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность). Например, rgba(255, 0, 0, 1) — задает непрозрачный красный цвет фона;
    • transparent — фон под картинкой будет прозрачным и часть сайта останется видимой, если картинка окажется меньше, чем ширина сайта.
  11. Стиль заполнения области fullscreen (contain|cover) — параметр определяет, как показывать баннер:
    • cover — масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока (при этом часть изображения может выйти за область видимости в браузере, но тем самым картинка заполнит всю видимую область браузера);
    • contain (по умолчанию) — масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока (при этом будет видно все изображение, но будет заполнена не вся область браузера, оставшаяся часть останется подложкой с указанным в параметрах баннера цветом).
  12. Изображение кнопки Закрыть — загрузите собственную картинку для кнопки закрыть на панели управления в правом углу.

    По умолчанию показывается картинка:

  13. Высота кнопки закрыть (px) — укажите высоту кнопки закрыть в пикселях. Например: 20px.
  14. Ширина кнопки закрыть (px) — укажите ширину кнопки закрыть в пикселях. Например: 25px.
  15. Время до показа кнопки Закрыть (сек.) — установите время в секундах до начала показа кнопки Закрыть для того, чтобы пользователь не имел возможности закрыть баннер сразу после начала его отображения в браузере.

    По умолчанию: 0 — кнопка показывается сразу.

  16. Количество авторасхлопов — укажите число показов баннера FullScreen сразу при загрузке страницы сайта.
  17. Время сессии для авторасхлопа — время сессии для авторасхлопа в часах. В течении этого времени будет действовать счетчик на количество произведенных авторасхлопов для уникального пользователя, начиная с первого авторасхлопа. По истечении времени счетчик авторасхлопов обнуляется и сессия начинается заново.
  18. Авторасхлоп всегда — показывать FullScreen сразу при загрузке страницы сайта:
    • yes — показывать сразу FullScreen;
    • no — показывать FullScreen только по наведению кнопки мыши на баннер-перетяжку.