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

Описание

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

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

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

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

1. Картинку FullScreen для портретной ориентации — вертикальное изображение (*.png, *.jpg, *.gif).
2. Картинку FullScreen для альбомной ориентации — горизонтальное изображение (*.png, *.jpg, *.gif).
3. Картинку-перетяжку (*.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 только по наведению кнопки мыши на баннер-перетяжку.

Последнее обновление: 14.08.2016