Виды кодов

  1. Асинхронные коды с библиотекой loader.js для площадок с безразмерными типов баннеров
  2. XML код
  3. Коды для размещения страницах AMP и Turbo
  4. Устаревшие виды кодов

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

Примечание. Не рекомендуем вносить изменения в код вставки, так как это может нарушить его работоспособность.

Асинхронные коды с библиотекой loader.js для площадок с безразмерными типов баннеров

  1. Асинхронный код вставки
  2. Асинхронный код с проверкой скролла
  3. Адаптивный код
  4. Адаптивный код с проверкой скролла

Библиотека loader.js — это единая библиотека с автоматическим обновлением.

Мы объединили несколько библиотек для разных видов кодов в одну и разместили ее на нашем сервере, поэтому вам всегда будет доступна самая последняя стабильная версия библиотеки.

Подключите один раз в head страницы библиотеку loader.js:

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

Из кодов вставок ссылку на библиотеку нужно удалять.

Внимание. Не рекомендуем скачивать библиотеку и загружать ее с собственного сервера, таким образом вы не получите централизованные обновления библиотеки, из-за чего возможны ошибки в работе кодов.

Принцип работы асинхронного кода заключается в том, что загрузка страницы не блокируется на время ожидания ответа от сервера ADFOX. В свою очередь ADFOX подгружает результат запроса (баннер или заглушку) параллельно загрузке страницы как будто в отдельное окно (iframe), а только потом уже выгружает данные на страницу, даже тогда, когда она полностью сформирована и загружена.

Для всех видов кодов с библиотекой loader.js можно использовать функцию перезагрузки баннера.

Формат ответа сервера ADFOX

Ответ на запрос за баннером сервер ADFOX возвращает в JSON формате.

JSON-ответ содержит несколько объектов:

{
                "jsonapi":{...}, //версия и используемый протокол.
                "meta": {...}, //сессия на странице и номер запроса.
                "data": [...], //информация о баннере (шаблон баннера, все параметры баннера со значениями) или баннере по умолчанию, выбранного для показа.
                "errors": [...] //если объект data пустой, то в объекте errors параметр status будет содержать информацию с кодом состояния HTTP запроса.
                }
Некоторые переменные в ответе могут быть закодированы с помощью base64. Чтобы раскодировать полученное значение вручную, используйте страницу-кодировщик.

Асинхронный код вставки

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

window.Ya.adfoxCode.create(bannerOptions);
где bannerOptions:
  • ownerId — идентификатор аккаунта клиента;
  • containerId — идентификатор элемента, который является контейнером для баннера;
  • params — блок с параметрами запроса за баннером.
Пример асинхронного кода вставки
<div id="adfox"></div>
<script>
    window.Ya.adfoxCode.create({
        ownerId: 208087,
        containerId: 'adfox',
        params: {
            pt: 'b',
            p1: 'bsoji'
        }
    });
</script>

Асинхронный код с проверкой скролла

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

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

window.Ya.adfoxCode.createScroll(bannerOptions);
где bannerOptions:
  • ownerId — идентификатор аккаунта клиента;
  • containerId — идентификатор элемента, который является контейнером для баннера;
  • params — блок с параметрами запроса за баннером.
Пример асинхронного кода с проверкой скролла
<div id="adfox"></div>
<script>
    window.Ya.adfoxCode.createScroll({
        ownerId: 208087,
        containerId: 'adfox',
        params: {
            pt: 'b',
            p1: 'bsoji'
        }
    });
</script>

Адаптивный код

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

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

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

Возможности адаптивного кода:

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

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

window.Ya.adfoxCode.createAdaptive(bannerOptions, bannerStates, [adaptiveOptions]);
где bannerOptions:
  • ownerId — идентификатор аккаунта клиента;
  • containerId — идентификатор элемента, который является контейнером для баннера;
  • params — блок с параметрами запроса за баннером.
bannerStates (обязательно наличие минимум 1 версии сайта):
  • desktop — загружать баннер, если открыта версия сайта для ноутбуков и компьютеров;
  • tablet — загружать баннер, если открыта версия сайта для планшетов;
  • phone — загружать баннер, если открыта версия сайта для мобильных телефонов/смартфонов.
adaptiveOptions:
  • tabletWidth — максимальная ширина в пикселях для версии "tablet". Значение по умолчанию: 830;
  • phoneWidth — максимальная ширина в пикселях для версии "phone". Значение по умолчанию: 480;
  • isAutoReloads — управление загрузкой баннеров при изменении размеров окна браузера без перезагрузки страницы: true — баннер будет уничтожаться и заново загружаться с сервера; false (по умолчанию) — баннер будет скрываться, но не будет уничтожаться в верстке, при возвращении размера пользователь будет видеть тот же баннер.
Пример адаптивного кода
<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,
        isAutoReloads: false
    } // states
);
</script>

Пример размещения баннеров на сайте с адаптивной версткой

Адаптивный код с проверкой скролла

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

window.Ya.adfoxCode.createScroll(bannerOptions, bannerStates, [adaptiveOptions]);
где bannerOptions:
  • ownerId — идентификатор аккаунта клиента;
  • containerId — идентификатор элемента, который является контейнером для баннера;
  • params — блок с параметрами запроса за баннером.
bannerStates (обязательно наличие минимум 1 версии сайта):
  • desktop — загружать баннер, если открыта версия сайта для ноутбуков и компьютеров;
  • tablet — загружать баннер, если открыта версия сайта для планшетов;
  • phone — загружать баннер, если открыта версия сайта для мобильных телефонов/смартфонов.
adaptiveOptions:
  • tabletWidth — максимальная ширина в пикселях для версии "tablet". Значение по умолчанию: 830;
  • phoneWidth — максимальная ширина в пикселях для версии "phone". Значение по умолчанию: 480;
  • isAutoReloads — управление загрузкой баннеров при изменении размеров окна браузера без перезагрузки страницы: true — баннер будет уничтожаться и заново загружаться с сервера; false (по умолчанию) — баннер будет скрываться, но не будет уничтожаться в верстке, при возвращении размера пользователь будет видеть тот же баннер.
Пример адаптивного кода с проверкой скролла
<div id="adfox-id"></div>
<script>
     // banner only for desktop and tablet 
    window.Ya.adfoxCode.createScroll({
        ownerId: 168627,
        containerId: 'adfox-id',
        params: {
            pp: 'g',
            ps: 'bnfx',
            p2: 'evbi'
        }
    }, ['desktop', 'tablet'], {
        tabletWidth: 1000,
        phoneWidth: 300,
        isAutoReloads: false
    } // states
);
</script>

XML код

Для площадок, созданных с XML-типами баннеров, в интерфейсе ADFOX генерируются ссылки для получения XML.

Пример ссылки для получения XML:

https://ads.adfox.ru/166283/getCode?pp=g&ps=cgdy&p2=ewap&pfc=a&pfb=a&plp=a&pli=a&pop=a

Ссылка устанавливается в приложение или плеер и в ответ на запрос сервер ADFOX вернет XML-код баннера.

Коды для размещения страницах AMP и Turbo

На сайтах, поддерживающих технологии AMP и Турбо-страницах, возможно размещение рекламы с помощью ADFOX.

При получении кода вставки интерфейс автоматически предложит подходящий для площадки Вид кода:

  • Асинхронный — для турбо-страниц;
  • AMP — для AMP-страниц. Обязательно укажите значения для параметров Ширина и Высота

Устаревшие виды кодов

Примечание. Некоторые шаблоны баннеров и модули системы ADFOX работают только на видах кодов с библиотекой loader.js. Рекомендуем произвести замену кодов на сайте для получения максимальных возможностей по использованию системы ADFOX.
Синхронный код

Синхронный код вставки генерируется для Стандартных типов баннеров, являющихся устаревшим видом и некоторые возможности ADFOX на этом виде кода не поддерживаются.

Рекомендуем перевести все синхронные площадки на асинхронные коды вставки. За подробностями обращайтесь в службу технической поддержки.

Пример синхронного кода вставки:

Асинхронный код

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

Пример асинхронного кода вставки (устаревшая версия с подключением библиотеки):

Асинхронный код с проверкой скролла

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

Пример асинхронного кода вставки с проверкой скролла (устаревшая версия с подключением библиотеки):