Одним из рекламных форматов, предлагаемых на сайте, является брендирование страницы. Могут быть забрендированы как все страницы вообще, так и определенные рубрики, материалы, относящиеся к определенному бренду, или конкретные статьи.
Брендирование страницы представляет собой перетяжку в начале страницы и соответствующий фон (боковины) на протяжении остального содержания страницы. Перетяжка представляет собой HTML5-баннер, фон страницы может быть как фиксированным при скролле страницы, так и нет. Общие указания к созданию брендинга можно найти здесь (Брендирование на коде Extention): https://www.adriver.ru/doc/ban/spec/spec_812/
Специфические настройки
Для нашего сайта мы рекомендуем в настройках баннера в файле script.js использовать следующие значения:
ar_width = '100%', // это значение нужно, чтобы перетяжка была responsive
ar_height = '240px', // оптимальное значение высоты брендинга для нашего сайта, может быть изменена по договоренности
ar_content_width = '1040px', // ширина зоны контента сайта
ar_pad_top = '0px'Необходимо самостоятельно указать правильные имена файлов для этих значений:
ar_html_name = 'banner.html', // имя html-файла перетяжки
ar_back = 'background.jpg', // имя файла фона
ar_back_color = '#262625', // цвет фонаЕсли необходимо изменить поведение фона при скролле, нужно убрать или добавить параметр fixed в определении фона на строке 90 файла script.js :
doc.body.style.background = ar_back_color+' url(' + ar_c(ar_back) + ') no-repeat center top fixed';В файле перетяжки внутри заголовка (тэг <head>) должен быть подключен скрипт обработчика клика:
<script src="//content.adriver.ru/html.js"></script>И назначен обработчик кликовой области (может быть прописан в теге <body>) :
<body onclick="return ar_callLink();" >Ширина колонки контента сайта
Наш сайт меняет ширину колонки контента в зависимости от ширины окна браузера, это следует учитывать при разработке креатива и верстке html5-баннера.
При значениях до 576px ширина контента 100% ширины экрана, далее колонка контента принимает значения 520, 780 или 1040 пикселей в зависимости от ширины окна браузера (экрана устройства).
Вариант-минимум
В качестве примера реализации брендинга можно предложить вариант, доступный по ссылке. Перетяжка в нем реализована с помощью статических изображений (в формате .png) трех размеров: 520х240, 780х240 и 1040х240 пикселей. В зависимости от ширины баннера становится видимым наиболее подходящее изображение. Для наименьшего баннера важную информацию желательно располагать по центру, допустимая ширина — до 320-340 пикселей.
В примере по ссылке (в файле banner.html) достаточно просто заменить имена файлов изображений на имена и формат собственных файлов или переименовать свои файлы изображений так же, как в образце (3 файла перетяжки 520х240, 780х240 и 1040х240 пикселей и файл фона 1920х1700 пикселей). Формат .png выбран с целью реализации в изображениях прозрачности для лучшего взаимодействия их с фоном, формат может быть заменен на любой другой (например, .jpeg).
Если в качестве фона используется файл background.jpg и он представляет собой не узор, градиент и т.п., а содержит значимые изображения, то при размещении этих изображений нужно учитывать следующее: центральные 1040 пикселей занимает колонка сайта, и значимые изображения должны располагаться справа и слева в максимальной близости к ней; с внешнего края в зависимости от параметров экранов и масштаба отображения эти изображения неизбежно будут частично обрезаться.