Коды для адаптивных сайтов

Описание

Внимание! Актуальная статья находится здесь.

Сайт с адаптивной вёрсткой - это такой сайт, у которого есть стабильная верстка html и за её отображение на разных разрешениях экранов отвечают css стили.
Адаптивную вёрстку применяют для удобного просмотра сайта на различных устройствах: мобильных телефонах, планшетах и десктопах.

Чтобы для разных версий подгружать разные наборы баннеров, мы разработали адаптивный код вставки.
В адаптивном коде необходимо перечислить версии сайта, на которых он должен произвести запрос за баннером, благодаря чему можно настраивать разные наборы рекламных площадок под разные версии сайта без лишних запросов кода.

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

Пример размещения баннеров на сайте с адаптивной версткой
Если открыть сайт на десктопе, то подгружаются баннеры "Перетяжка 100%" и два баннера "300х300".
Если открыть сайт с телефона или планшета, то подгрузится баннер "Перетяжка 100%".

Настройка в ADFOX

Настройка занимает несколько шагов:
1. Определите версии сайта и их пограничные размеры.
В ADFOX доступно максимум 3 версии верстки.

Например:
- версия для телефона: это сайт, который показывается при разрешении экрана до 480px по ширине.
- версия для планшетов: это сайт, который показывается при разрешении экрана от 480px до 830px по ширине. - версия для десктопов: это сайт, который показывается при разрешении экрана свыше 830px по ширине.

2. Создайте макеты с наборами баннерных мест для разных версий сайта.

Например: - для телефона и планшета: площадка перетяжка;
- для десктопа: площадка перетяжка и две площадки 300х300.

3. В интерфейсе ADFOX создайте структуру площадок по инструкции.

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

Установка библиотеки на сайт

В head сайта один раз подключите библиотеку:

<script src="https://yastatic.net/pcode/adfox/loader.js"></script>

Библиотека загружается с сервера ADFOX.
Клиентам доступна всегда самая последняя стабильная версия библиотеки.

Установка кодов на сайт

В интерфейсе ADFOX получите код вставки для площадки с видом "адаптивный" и установите на сайт.

Обратите внимание, что в коде вставки должен присутствовать параметр containerId — идентификатор контейнера для баннера и код будет вида:

<div id="adfox_id"></div>
<script>
     // banner only for desktop and tablet 
    window.Ya.adfoxCode.createAdaptive({
        ownerId: 168627,
        containerId: 'adfox_id',
        params: {
            pp: 'g',
            ps: 'bnfx',
            p2: 'evbi'
        }
    }, ['desktop', 'tablet'], {
        tabletWidth: 1000,
        phoneWidth: 300
    });
</script>

Если на сайте ранее уже были установлены коды без containerId, рекомендуем произвести замену кодов вставок.
Получить код вставки с containerId возможно в интерфейсе системы.

Управление загрузкой баннеров

 window.Ya.adfoxCode.createAdaptive(bannerOptions, bannerStates, [adaptiveOptions]);

где bannerOptions:
ownerId — идентификатор аккаунта клиента;
containerId — идентификатор элемента, который является контейнером для баннера;
params — блок с параметрами запроса за баннером.

bannerStates:
desktop — загружать баннер, если открыта версия сайта для ноутбуков и компьютеров;
tablet — загружать баннер, если открыта версия сайта для планшетов;
phone — загружать баннер, если открыта версия сайта для мобильных телефонов/смартфонов.

В коде вставки обязательно наличие минимум 1 версии сайта.

adaptiveOptions:
tabletWidth — максимальная ширина в пикселях для версии "tablet". Значение по умолчанию: 830.
phoneWidth — максимальная ширина в пикселях для версии "phone". Значение по умолчанию: 480.
isAutoReloads — управление загрузкой баннеров при изменении размеров окна браузера без перезагрузки страницы:
true - баннер будет уничтожаться и заново загружаться с сервера;
false (по умолчанию) - баннер будет скрываться, но не будет уничтожаться в верстке, при возвращении размера пользователь будет видеть тот же баннер.

Последнее изменение: 17.10.2016