Виды кодов

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

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

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

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

  1. Формат ответа сервера Adfox
  2. Асинхронный код вставки
  3. Адаптивный код
  4. Управление запросом баннера

Библиотека context.js — это единый загрузчик рекламы с автоматическим обновлением.

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

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

<script>window.yaContextCb = window.yaContextCb || []</script>
<script src="https://yandex.ru/ads/system/context.js" async></script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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"></div>
<script>
  window.yaContextCb.push(()=>{
    // banner only for desktop and tablet 
    Ya.adfoxCode.createAdaptive({
      ownerId: 168627,
      containerId: 'adfox',
      params: {
        pp: 'g',
        ps: 'bnfx',
        p2: 'evbi'
      }
    },
    ['desktop', 'tablet'], // states
    {
      tabletWidth: 1000,
      phoneWidth: 300,
      isAutoReloads: false
    })
  })
</script>

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

Управление запросом баннера

По умолчанию запрос за рекламой происходит в момент исполнения кода вставки. Вы можете управлять моментом отправки запроса:

  • чтобы запрос происходил, когда баннер попадает в зону видимости пользователя, добавьте в bannerOptions параметр lazyLoad: true;
  • чтобы запрос происходил до попадания баннера в зону видимости пользователя, задайте для параметра lazyLoad значения:
    • fetchMargin — расстояние до баннера, с которого начнется запрос, в процентах высоты экрана (например, 200 — это 2 экрана);
    • mobileScaling — множитель значения переменной fetchMargin для мобильных версий устройств, может быть дробным числом.
Пример асинхронного кода вставки (mobileScaling — целое число)
<div id="adfox"></div>
<script>
  window.yaContextCb.push(()=>{
    Ya.adfoxCode.create({
      ownerId: 208087,
      containerId: 'adfox',
      params: {
        pt: 'b',
        p1: 'bsoji'
      },
      lazyLoad: {
        fetchMargin: 200,
        mobileScaling: 2
      }
    })
  })
</script>
Пример асинхронного кода вставки (mobileScaling — дробное число)
<div id="adfox"></div>
<script>
  window.yaContextCb.push(()=>{
    Ya.adfoxCode.create({
      ownerId: 208087,
      containerId: 'adfox',
      params: {
        pt: 'b',
        p1: 'bsoji'
      },
      lazyLoad: {
        fetchMargin: 200,
        mobileScaling: 2.5
      }
    })
  })
</script>
Пример адаптивного кода (mobileScaling — целое число)
<div id="adfox"></div>
<script>
  window.yaContextCb.push(()=>{
    // banner only for desktop and tablet 
    Ya.adfoxCode.createAdaptive({
      ownerId: 168627,
      containerId: 'adfox',
      params: {
        pp: 'g',
        ps: 'bnfx',
        p2: 'evbi'
      },
      lazyLoad: {
        fetchMargin: 200,
        mobileScaling: 2
      }
    },
    ['desktop', 'tablet'], // states
    {
      tabletWidth: 1000,
      phoneWidth: 300,
      isAutoReloads: false
    })
  })
</script>
Пример адаптивного кода (mobileScaling — дробное число)
<div id="adfox"></div>
<script>
  window.yaContextCb.push(()=>{
    // banner only for desktop and tablet 
    Ya.adfoxCode.createAdaptive({
      ownerId: 168627,
      containerId: 'adfox',
      params: {
        pp: 'g',
        ps: 'bnfx',
        p2: 'evbi'
      },
      lazyLoad: {
        fetchMargin: 200,
        mobileScaling: 2.5
      }
    },
    ['desktop', 'tablet'], // states
    {
      tabletWidth: 1000,
      phoneWidth: 300,
      isAutoReloads: false
    })
  })
</script>
Примечание. Коды с проверкой скролла поддерживают lazyLoad, но метод createScroll считается устаревшим. Для эффективной работы кода рекомендуем переходить на асинхронный или адаптивный код и добавить в новый код параметр lazyLoad с нужными значениями.

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 работают только на видах кодов с библиотекой context.js. Рекомендуем произвести замену кодов на сайте для получения максимальных возможностей по использованию системы Adfox.
Синхронный код

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

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

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

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

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

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

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

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

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

Пример асинхронного кода с проверкой скролла
<div id="adfox"></div>
<script>
  window.yaContextCb.push(()=>{
    Ya.adfoxCode.createScroll({
      ownerId: 208087,
      containerId: 'adfox',
      params: {
        pt: 'b',
        p1: 'bsoji'
      }
    })
  })
</script>
Пример асинхронного кода вставки с проверкой скролла (версия с подключением библиотеки)
Адаптивный код с проверкой скролла

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

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

Пример адаптивного кода с проверкой скролла
<div id="adfox"></div>
<script>
  window.yaContextCb.push(()=>{
    // banner only for desktop and tablet 
    Ya.adfoxCode.createScroll({
      ownerId: 168627,
      containerId: 'adfox',
      params: {
        pp: 'g',
        ps: 'bnfx',
        p2: 'evbi'
      }
    },
    ['desktop', 'tablet'], // states
    {
      tabletWidth: 1000,
      phoneWidth: 300,
      isAutoReloads: false
    })
  })
</script>