Виды кодов

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

Примечание

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

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

Библиотека 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 (обязательно наличие минимум одной версии сайта):

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

Если на площадке размещена кампания с Ad Pods Video, в интерфейсе появятся дополнительные ссылки:

Ссылка на Ad Pods Video (Web);
Ссылка на Ad Pods Video (App, SmartTV).

В поле Длительность укажите максимальную длительность в секундах или передайте это значение в параметре запроса &adtt=.

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

https://ads.adfox.ru/277740/getCode?&adtt=40

Ссылки устанавливаются в приложение или плеер, и в ответ на запрос сервер Adfox вернет коды баннеров.

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

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

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

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

Обратиться в службу поддержки

Написать в чат

Написать письмо