Как добавить рекламу в мини-приложение

Важно! Пока мини-приложение не прошло проверку, все платежи в нём проходят в тестовом режиме. Чтобы пользователи могли совершать покупки голосами, зарегистрируйтесь в кабинете выплат и отправьте приложение на модерацию.

Подробнее о регистрации в кабинете выплат и получении вознаграждения — в разделе Вывод средств.

Мини-приложения получают рекламные материалы от рекламной сети ВКонтакте. Для их показа используйте библиотеку VK Bridge. В этом разделе мы рассмотрим, как вы можете добавить рекламные материалы в мини-приложение.

Реклама за вознаграждение и реклама между экранами

Требования

Для показа рекламы за вознаграждение и рекламы между экранами подключите к мини-приложению библиотеку VK Bridge. Инструкция по подключению библиотеки.

Принцип работы

Чтобы показать рекламу в мини-приложении, её контент (изображения, текст, видео) надо загрузить на устройство пользователя. При старте мини-приложения библиотека VK Bridge автоматически отправляет запрос платформе ВКонтакте на предзагрузку рекламных материалов. Предзагрузка выполняется в фоновом режиме и незаметна пользователю. Предзагруженные материалы хранятся на стороне пользователя.

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

После показа рекламы VK Bridge автоматически запрашивает новую порцию рекламных материалов у платформы: ВКонтакте старается разнообразить контент, чтобы пользователи не смотрели один и тот же ролик подряд.

Необходимые события VK Bridge

  • •

    VKWebAppCheckNativeAds — отправьте это событие, чтобы проверить, есть ли на стороне пользователя рекламные материалы, готовые для показа. Если нет, то метод отправит запрос платформе на их загрузку.

    Такая проверка необходима для показа рекламы за вознаграждение (rewarded ad). Согласно нашим требованиям, мини-приложение должно получить согласие пользователя на просмотр такой рекламы, например показать запрос «Посмотрите короткий ролик, чтобы получить скидку».

    Вызов VKWebAppCheckNativeAds помогает понять, есть ли рекламные материалы, готовые для показа, и можно ли отобразить на экране кнопку «Посмотрите рекламу». Если показать кнопку, не проверив наличие материалов, то при их отсутствии пользователь ничего не увидит, то есть нажатие на кнопку ни к чему не приведёт.

  • •

    VKWebAppShowNativeAds — показывает рекламу пользователю на экране. Метод пытается отобразить предзагруженные материалы. Если по какой-то причине они отсутствуют, то метод запросит их у платформы и покажет при получении.

    После показа рекламы метод автоматически запрашивает новые рекламные материалы у платформы.

Оба метода возвращают Promise-объекты. Результаты надо проверять в then- и catch-обработчиках этих объектов.

Примечания

  • •

    Предварительный вызов VKWebAppCheckNativeAds и предзагрузка рекламных материалов в общем случае необязательны для работы VKWebAppShowNativeAds. Однако предзагрузка позволяет запустить показ без задержек. Кроме того, проверка необходима для рекламы за вознаграждение. Подробнее — в разделе Необходимые события VK Bridge.

  • •

    Загрузка материалов может занимать какое-то время. Если вы расположите вызовы VKWebAppCheckNativeAds и VKWebAppShowNativeAds друг за другом в коде, то не получите выигрыша в скорости при старте показа. Имеет смысл разнести загрузку и показ рекламы и не показывать рекламу слишком часто.

  • •

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

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

    Метод VKWebAppCheckNativeAds не запрашивает новые материалы, если предзагруженные ещё не были показаны пользователю.

Пример показа рекламы за вознаграждение

Не забудьте добавить библиотеку VK Bridge в мини-приложение.

JavaScript
// Проверка готовности рекламы bridge.send('VKWebAppCheckNativeAds', { ad_format: 'reward' }) .then((data) => { if (data.result) { // Предзагруженная реклама есть. // Теперь можно создать кнопку // "Посмотрите рекламу". // ... } else { console.log('Рекламные материалы не найдены.'); } }) .catch((error) => { console.log(error); /* Ошибка */ }); // Обработчик нажатия кнопки "Посмотрите рекламу" function fooButtonClick() { // Показать рекламу bridge.send('VKWebAppShowNativeAds', { ad_format: 'reward' }) .then((data) => { if (data.result) // Успех console.log('Реклама показана'); else // Ошибка console.log('Ошибка при показе'); }) .catch((error) => { console.log(error); /* Ошибка */ }); }

Пример показа рекламы между экранами

Не забудьте добавить библиотеку VK Bridge в мини-приложение.

JavaScript
// Проверка к готовности рекламы к показу. // Вызовите этот код заранее. bridge.send('VKWebAppCheckNativeAds', { ad_format: 'interstitial'}); // ... // Показать рекламу bridge.send('VKWebAppShowNativeAds', { ad_format: 'interstitial' }) .then((data) => { if (data.result) console.log('Реклама показана'); else console.log('Ошибка при показе'); }) .catch((error) => { console.log(error); /* Ошибка */ });

Баннерная реклама

Чтобы добавить баннерную рекламу в мини-приложение, используйте событие VKWebAppShowBannerAd библиотеки VK Bridge. При успешном выполнении платформа вернёт данные рекламного баннера.

JavaScript
bridge.send('VKWebAppShowBannerAd', { banner_location: 'bottom' }) .then((data) => { if (data.result) { // Баннерная реклама отобразилась } }) .catch((error) => { // Ошибка console.log(error); });

Для работы с баннерами также можно использовать другие события библиотеки VK Bridge. Подробнее о баннерной рекламе и событиях VK Bridge — в разделе Баннерная реклама.

Материалы по теме