Войти в кабинет
RU
EN
login
RU
EN

Руководство по интеграции

Интеграция рекламных блоков на сайт
Для прямой интеграции необходимо скопировать js код из настроек рекламного блока:
Пример JS-кода для настройки рекламного блока

<script async src="https://ad.mail.ru/static/ads-async.js"></script>
<ins class="mrg-tag" style="display:inline-block;width:300px;height:250px" data-ad-client="ad-917436" data-ad-slot="917436"></ins>  
<script>(MRGtag = window.MRGtag || []).push({})</script>
и разместить в HTML сайта между тегами <body> и </body>, там, где должна отображаться реклама.
Для интеграции через Header Bidding от AdFox воспользуйтесь инструкцией.
Интеграция кода для InPage блока
Код плеера рекламы может быть размещен двумя методами:

Базовый метод

Данный метод обеспечивает короткую запись кода загрузки, но поддерживает только один плеер на странице и не предоставляет возможности использования колбэков и debug-режима. Вставьте код перед закрывающим тегом body.

Пример кода загрузки с использованием базового метода:

<script async src="https://ad.mail.ru/static/vk-adman.js?slot=11133888&container=.main-content"></script>
В приведенном коде присутствует два параметра (параметры и их значения указываются в атрибуте src после знака вопроса и разделяются символом &):
  • slot — идентификатор слота, с которого плеер будет получать рекламу. Каждый слот соответствует одному месту для показа рекламы на странице сайта. В приведенном примере идентификатор равен 11133888. Конкретное значение параметра следует получить в рекламном кабинете. Начисление вознаграждения за показ рекламы осуществляется владельцу слота, с которого была получена реклама. Неверное указание слота может привести как к не получению рекламы для показа, так и к не начислению вознаграждения за показ рекламы. На одной странице возможно одновременное размещение множества мест для показа рекламы, каждому из которых должен быть сопоставлен уникальный слот. В случае необходимости подключения на одной странице двух и более мест показа рекламы следует использовать расширенный метод вставки кода плеера.
  • container — идентификатор элемента (css селектор) html-разметки, в котором будет произведено размещение плеера. В приведенном примере размещение плеера производится в элемент разметки (div, span, main, section, article и т.д.), которому установлен класс main-content (class="main-content"). Наличие точки перед main-content приведет к поиску элементов с указанным классом. Наличие символа # вместо точки ( container=#main-content ) приведет к поиску конкретного элемента с указанным идентификатором (id="main-content"). Если указанный контейнер имеет множество параграфом, то плеер размещается между параграфами максимально близко к середине содержимого контейнера. Если контейнер пустой (специально отведенное место для плеера), то плеер будет размещен непосредственно в нем.
Параметр slot является обязательным, тогда как параметр container может быть опущен. В таком случае для подключения плеера можно использовать следующий код:

<script async src="https://ad.mail.ru/static/vk-adman.js?slot=11133888"></script>
В случае отсутствия параметра container производится поиск на странице контейнера с идентификатором adman-ads и в случае его нахождения плеер размещается в нем. Пример конфигурирования пустого контейнера div с идентификатором adman-ads:

<div id="adman-ads"></div>
Если параметр container опущен и контейнер с идентификатором adman-ads не найден, инициализация плеера не производится.

Расширенный метод

Использование расширенного метода загрузки кода плеера позволяет размещать на странице более одного плеера рекламы, использовать отладочный режим и колбэки, указывать другие параметры (описание см. ниже). Код загрузки размещается перед закрывающим тегом body.

Пример кода для загрузки плеера при использовании расширенного метода:

<script type="text/javascript">
  (function (a, b, c, d, e, f, g, h) {
    g = b.createElement(c);
    g.src = d;
    g.async = !0;
    h = b.getElementsByTagName(c)[0];
    h.parentNode.insertBefore(g, h);   
    const func = function () {
      this.push(Array.prototype.slice.apply(arguments));
    }
    for (let i = f.length; i--;)
      a[e[i]] = func.bind(a[f[i]] = []);
   }) (window, document, "script", "https://ad.mail.ru/static/vk-adman.js", ["AdManPlayer", "AdManSDK"], ["_AdManPlayerInit", "_AdManSDKInit"]);
</script>
 
<script>
  AdManPlayer({
    container: 'main-content', // css-селектор контейнера плеера (обязательно)
    slot: 11133888,
    onError: () => {
      // колбэк при возникновении ошибки (не обязательно)
    }
  })
 </script>
В отношении параметров slot и container, а также их значений в полном мере действуют положения, приведенные в описании базового метода загрузки кода плеера выше.

Чтобы протестировать местоположение плеера, при инициализации необходимо включить режим отладки, указав debug: true и передав параметр visit, имеющий содержание ответа от рекламного сервера.

<script>
  AdManPlayer({
    container: '.post_text', // css-селектор для контента статьи (обязательно)
    slot: '[Индивидуальный slot площадки]',
    debug: true,
    visit: {
      [...пример ответа]
    },
    onError: () => {
      // колбэк при возникновении ошибки (не обязательно)
    }
  })
</script>
После того, как вы протестируете местоположении плеера и показ видео, режим отладки надо отключить, убрав debug: true и удалив visit: ...

Множественные вызовы плеера на одной странице

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

Конфигурация плеера

Описание параметров плеера, доступных в расширенном режиме:

container
string | string[]
css селектор или массив селекторов элемента, куда должен быть помещен плеер. Может указывать на родительский блок с параграфами (при встраивании в тело статьи), либо на конкретный пустой блок (если важно поместить плеер именно в указанное место).

offset
number
Желаемый отступ в статье в процентах, куда будет вставлен плеер. Алгоритм выберет место между абзацами, следующими за первым видимым экраном.
По умолчанию: 50

slot
string
Индивидуальный номер слота площадки. Используйте этот параметр, чтобы показывать все кампании, к которым подключена площадка.

debug
boolean
Позволяет показывать тестовый креатив, переданный в параметре visit
По умолчанию: false

visit
object
Параметр, откуда плеер берет тестовый креатив при использовании debug:true

params
object
пример: params: { preview: 4 },
Добавляет query string параметры в запрос к слоту

iframe
boolean
Оборачивает плеер в iframe (т.к. плеер общается с загрузчиком креативов через window.postMessage, может возникнуть ситуация, когда это общение будет нарушено. В таких случаях стоит попробовать включить этот параметр).

controls
object | boolean
примеры:controls: { progressBar: true, skip: true, volume: true, cta: true, replay: true }
controls: false
Отвечает за включение/отключение стандартных элементов управления плеером. По умолчанию true
Состоит из progressBar, skip, volume, cta, replay

Колбэки

onReady
function
Срабатывает при готовности плеера к воспроизведению.

onError
function
Срабатывает, если видео не загрузилось по каким-либо причинам, включая случай, когда нет креатива для показа. Функция передаёт аргумент c текстом ошибки.

onStarted
function
Срабатывает при первом старте видео.

onPlayed
function
Срабатывает при воспроизведении видео.

onPaused
function
Срабатывает при приостановке воспроизведения видео (SDK).

onClosed
function
Срабатывает при закрытии видеоблока (SDK).

onCompleted
function
Срабатывает, если пользователь просмотрел видео полностью.

onClicked
function
Срабатывает, если пользователь перешёл по ссылке.

onSkipped
function
Срабатывает, если пользователь нажал «Пропустить видео».

Пример:

  AdManPlayer({
     container:'.post',
     slot: '690',
     onError: (e) => {
       console.log('AdMan error:', e)
     },
      onReady: () => {
       console.log('AdMan ready')
     },
      onClicked: () => {
       console.log('AdMan clicked')
     },
      onCompleted: () => {
       console.log('AdMan completed')
     },
        
   })
Вам помогла эта статья?