Одним из рекламных форматов, предлагаемых на сайте, является брендирование страницы. Могут быть забрендированы как все страницы вообще, так и определенные рубрики, материалы, относящиеся к определенному бренду, или конкретные статьи.

Брендирование страницы представляет собой перетяжку в начале страницы и соответствующий фон (боковины) на протяжении остального содержания страницы. Перетяжка представляет собой 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) достаточно просто заменить имена файлов изображений на имена и формат собственных файлов. Формат .png выбран для реализации в изображениях прозрачности для лучшего взаимодействия их с фоном, формат может быть заменен на любой другой (например jpeg).