Создание блока
Для создания InPage блока:
- Выберите сайт → нажмите «Добавить блок».
- Проверьте, что выбрана корректная площадка.
- При необходимости измените название блока.
- Дисплейный блок → выберите размер блока «inPage».
- Задайте настройки блока (тип интеграции, порог CPM и др.)
- Нажмите «Создать».
Размер контейнера для формата InPage
Для десктопов:
- Минимум: 256×144 пикселей (соотношение 16:9)
- Рекомендуемый размер: 400×256 пикселей. Обеспечивает оптимальное качество отображения и подгрузку рекламы.
Для мобильных устройств:
Минимум: 340×255 пикселей (соотношение 4:3)
Если размер контейнера меньше указанных значений, реклама может не загрузиться или быть автоматически отклонена системой.
Интеграция кода
После создания блока, переходим к интеграции. Есть 2 основных способа:
- Прямая интеграция — когда код блока устанавливается напрямую в верстку сайта.
- Header Bidding — когда код блока вызывается через стороннюю систему AdFox.
Ниже рассмотрим каждый из методов интеграции.
Прямая интеграция
Для подключения плеера рекламы на сайт предусмотрено 2 метода: базовый и расширенный. Оба варианта размещаются перед закрывающим тегом </body> на странице.
Базовый метод
Быстрый способ вставки плеера — подходит, если у вас только один рекламный блок на странице и не требуется отладка или колбэки.
Пример кода:
<script async src="https://ad.mail.ru/static/vk-adman.js?slot=slot_id_int&container=selector.class or #id"></script>
Что означают параметры:
- slot — ID рекламного слота (получается в рекламном кабинете). Обязателен.
- container — CSS-селектор контейнера, в который будет вставлен плеер (например, класс .main-content).
Если container не указан, плеер будет искать контейнер с id="adman-ads". Если такого нет, не загрузится.
Пример контейнера:
<div id="adman-ads"></div>
Расширенный метод
Нужен, если:
- планируется несколько плееров на странице
- требуется гибкая настройка
- вы хотите отследить, если плеер не загрузился
- вы не владелец площадки (например, агрегатор или реселлер)
Шаг 1: Инициализация SDK
<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>
Шаг 2: Вставка плеера
<div id="main-content"></div>
<script>
AdManPlayer({
container: 'main-content', // ID контейнера
slot: slot_id_int, // ваш slot ID
onError: (err) => {
console.warn("Реклама не загрузилась:", err);
document.getElementById('main-content').style.display = 'none';
}
});
</script>
Код целиком
<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>
<div id="main-content"></div>
<script>
AdManPlayer({
container: 'main-content', // ID контейнера
slot: slot_id_int, // ваш slot ID
params: {
dl: window.location.href // ОБЯЗАТЕЛЬНО: ссылка на текущую страницу
},
onError: (err) => {
console.warn("Реклама не загрузилась:", err);
document.getElementById('main-content').style.display = 'none';
}
});
</script>
Зачем нужен параметр dl:
- Этот параметр сообщает системе, где показывается реклама.
- Обязателен для всех, кто не является владельцем сайта.
- Без него показ может не засчитаться, а трафик — ограничиться (троттлинг).
Режим отладки (debug)
Чтобы протестировать работу плеера, можно включить debug-режим:
<script>
AdManPlayer({
container: '.post_text',
slot: slot_id_int,
debug: true,
visit: {
// пример ответа сервера
},
onError: () => {
console.warn("Ошибка загрузки плеера");
}
});
</script>
После проверки — удалите параметры debug и visit.
Несколько плееров на странице
Если на странице размещается больше одного рекламного блока, достаточно инициализировать SDK один раз, а далее просто вызывать AdManPlayer() столько раз, сколько нужно.
Конфигурация плеера
Описание параметров плеера, доступных в расширенном режиме:
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
Колбэки
- 1onReady (function)Срабатывает при готовности плеера к воспроизведению.
- 2onError (function)Срабатывает, если видео не загрузилось по каким-либо причинам, включая случай, когда нет креатива для показа. Функция передаёт аргумент c текстом ошибки.
- 3onStarted (function)Срабатывает при первом старте видео.
- 4onPlayed (function)Срабатывает при воспроизведении видео.
- 5onPaused (function)Срабатывает при приостановке воспроизведения видео (SDK).
- 6onClosed (function)Срабатывает при закрытии видеоблока (SDK).
- 7onCompleted (function)Срабатывает, если пользователь просмотрел видео полностью.
- 8onClicked (function)Срабатывает, если пользователь перешёл по ссылке.
- 9onSkipped (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')
},
})
События и возможные ошибки Adman3
С кодами событий и ошибок Adman3 можете ознакомиться в этой статье
Интеграция через Adfox Header Bidding
Чтобы подключить рекламный блок inPage через Header Bidding в Adfox, выполните следующие шаги:
1. Создание кампании с внешним монетизатором
Если у вас ещё не создана кампания с внешним монетизатором myTarget, создайте её:
- Рекламодатель: RSYaAdvertiser
- Внешний монетизатор: mytarget
- Тип CPM: header_bidding
2. Настройка рекламной кампании
Рекламные кампании → Баннеры
Создайте баннер со следующими параметрами:
- Тип: hbid
- Шаблон: Header Bidding Mytarget [context]
3. Настройка площадки
- Сайты – создайте новый сайт или используйте уже существующий.
- Сайты → Разделы – добавьте нужный раздел сайта.
- Сайты → Разделы → Площадки – создайте площадку с типом баннера hbid.
- Сайты → Разделы → Площадки → Код вставки – получите код вставки.
В полученном коде нужно вручную изменить параметр: codeType: 'inpage'
Если используется комбинированный формат (баннер + видео): codeType: 'combo'
4. Размеры контейнера
Убедитесь, что размер контейнера совпадает с размером первого запроса. Если размеры не совпадут, креатив может автоматически масштабироваться под размеры контейнера, что может повлиять на отображение рекламы.
