Адаптивный sticky-баннер

Адаптивный sticky-баннер — небольшое, автоматически обновляемое рекламное объявление. Оно располагается в нижней или верхней части экрана приложения. Баннер не перекрывает основной контент и часто используется в приложениях-играх.

Адаптивный sticky-баннер обеспечивает максимальную эффективность за счет оптимизации размера рекламы для каждого устройства. Данный тип рекламы позволяет разработчикам указывать максимально допустимую ширину объявления, при этом оптимальный размер рекламы определяется автоматически.

Внешний вид

Это руководство покажет, как интегрировать адаптивный sticky-баннер в приложение на Compose Multiplatform. В дополнение к примерам кода и инструкции, оно также содержит рекомендации по использованию данного формата рекламы, а также ссылки на дополнительные ресурсы.

Пререквизит

  1. Выполните шаги по интеграции Yandex Mobile Ads Compose Multiplatform Plugin, описанные в Быстром старте.
  2. Убедитесь, что используете самую актуальную версию Yandex Mobile Ads Compose Multiplatform Plugin, а в случае использовании медиации — наиболее свежую версию единой сборки.

Имплементация

Основные шаги по интеграции адаптивного sticky-баннера:

  • Добавить composable Banner и передать BannerAdSize.Sticky с шириной контейнера.
  • Подписаться на события жизненного цикла через BannerEvents.

Особенности подключения адаптивного sticky-баннера

  1. Настоятельно не рекомендуем при ошибке в onAdFailedToLoad сразу инициировать новую загрузку. Если повтор всё же нужен, ограничьте число попыток, чтобы не получать непрерывный поток неудачных запросов из‑за сетевых ограничений.

  2. Адаптивные sticky-баннеры лучше всего смотрятся на полной доступной ширине — чаще всего это ширина экрана. Учитывайте отступы и безопасную зону дисплея.

  3. Размер задавайте через BannerAdSize.Sticky(width) — доступная ширина рекламного контейнера.

  4. Для класса устройств sticky-баннер использует стабильные ширину и высоту, выбранные SDK. Проверьте вёрстку на репрезентативных устройствах, дальше можно опираться на тот же класс размеров.

  5. Высота адаптивного sticky-баннера не превышает 15% высоты экрана и не меньше 50 dp.

Добавление баннера в макет

Разместите композабл Banner там, где sticky должен оставаться на виду (часто закреплён у нижнего края экрана).

Пример:

@Composable
fun StickyBannerBar(adRequest: AdRequest, containerWidth: Int) {
    Banner(
        adRequest = adRequest,
        adSize = BannerAdSize.Sticky(width = containerWidth),
        modifier = Modifier.fillMaxWidth(),
        events = BannerEvents(
            onAdLoaded = { /* ad loaded */ },
            onAdFailedToLoad = { error -> /* handle error */ },
            onAdClicked = { /* ad clicked */ },
            onImpression = { data -> /* impression tracked */ },
        ),
    )
}

Загрузка и отображение рекламы

Композабл Banner загружает объявление при входе в композицию.

Используйте BannerAdSize.Sticky(width) с шириной родителя или экрана с учётом отступов и safe area. Ширину можно прочитать из BoxWithConstraints или своего макета:

BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
    val widthDp = maxWidth.value.toInt()
    Banner(
        adRequest = adRequest,
        adSize = BannerAdSize.Sticky(width = widthDp),
        modifier = Modifier.fillMaxWidth(),
        events = BannerEvents(/* ... */),
    )
}

Нужен adUnitId из интерфейса Рекламной сети Яндекса.

О событиях загрузки и показа сообщайте через BannerEvents, как в примере выше.

Расширить запрос можно через AdRequest (targeting, parameters, preferredTheme и т. д.). Дополнительный контекст улучшает качество рекламы. Подробнее — в разделе Таргетирование рекламы.

Пример загрузки адаптивного sticky-баннера: после успешной загрузки баннер отображается автоматически.

@Composable
fun StickyBanner(adUnitId: String) {
    Banner(
        adRequest = AdRequest(adUnitId = adUnitId),
        adSize = BannerAdSize.Sticky(width = 320),
        modifier = Modifier.fillMaxWidth(),
        events = BannerEvents(
            onAdLoaded = {
                // The ad was loaded successfully and will be shown.
            },
            onAdFailedToLoad = { error ->
                // Ad failed to load with AdRequestError.
                // Attempting to load a new ad from the onAdFailedToLoad() method is strongly discouraged.
            },
            onAdClicked = {
                // Called when a click is recorded for an ad.
            },
            onImpression = { data ->
                // Called when an impression is recorded for an ad.
            },
        ),
    )
}

При интеграции можно использовать 'demo-banner-yandex' как adUnitId; перед релизом замените на рабочий блок.

Освобождение ресурсов

Когда плейсмент больше не нужен, уберите Banner из композиции — SDK освободит нативное представление. Не держите старые инстансы: при следующем показе создайте новый Banner.

Тестирование интеграции адаптивного sticky-баннера

Использование демоблоков для тестирования рекламы

Для проверки корректной интеграции адаптивного sticky-баннера и тестирования вашего приложения используйте тестовую рекламу. Для гарантированного возврата тестовых объявлений на каждый запрос за рекламой вы можете использовать специальный демонстрационный идентификатор рекламного места.

Демонстрационный adUnitId: demo-banner-yandex.

Важно

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

Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе Демоблоки для тестирования.

Проверка корректной интеграции рекламы

Проверить корректность интеграции адаптивного sticky-баннера можно через встроенный в SDK анализатор. Подробный отчет о проверке выведется в лог.

Для просмотра отчета, выполните поиск по ключевому слову YandexAds в инструменте отладки Android-приложений Logcat.

adb logcat -v brief '*:S YandexAds'

В случае успешной интеграции вы увидите следующее сообщение:

adb logcat -v brief '*:S YandexAds'
mobileads$ adb logcat -v brief '*:S YandexAds'
I/YandexAds(13719): [Integration] Ad type banner was integrated successfully

В случае обнаружения проблем при интеграции баннерной рекламы вы получите подробный отчет о проблемах и рекомендации по их устранению.

Использование демоблоков для тестирования рекламы

Для проверки корректной интеграции рекламы и тестирования приложения используйте тестовую рекламу. Для гарантированного возврата тестовых объявлений на каждый запрос за рекламой вы можете использовать специальный демонстрационный идентификатор рекламного места.

Демонстрационный adUnitId: demo-banner-yandex.

Важно

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

Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе Демоблоки для тестирования.

Проверка корректной интеграции рекламы

Проверить корректность интеграции рекламы можно через нативный инструмент Console.

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

YandexAds.enableLogging()

Для просмотра логов SDK в инструменте Console установите Subsystem = com.mobile.ads.ads.sdk. Вы можете фильтровать логи по категории и уровню ошибки.

В случае обнаружения проблем при интеграции рекламы вы увидите подробный отчет о проблемах и рекомендации по их устранению.

Дополнительные ресурсы

Предыдущая
Адаптивный inline-баннер
Следующая
Межстраничная реклама