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

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

Данный тип рекламы позволяет разработчикам указывать максимально допустимые ширину и высоту объявления, при этом оптимальный размер рекламы определяется автоматически. Чтобы выбрать лучший размер объявления, встроенные адаптивные баннеры используют максимальную, а не фиксированную высоту. Это позволяет повысить производительность.

Как правило, такой формат используется в приложениях-лентах или там, где допустимо сфокусироваться на рекламе.

Внешний вид

Это руководство покажет, как интегрировать адаптивный inline-баннер в Android‐приложение с помощью расширения Jetpack Compose. В дополнение к примерам кода и инструкции оно содержит рекомендации и ссылки на дополнительные ресурсы.

Пререквизит

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

Для использования Compose-расширения добавьте зависимость в build.gradle.kts:

dependencies {
    implementation("com.yandex.android:mobileads:8.0.0-beta.1")
    implementation("com.yandex.android:mobileads-compose:8.0.0-beta.1")

    // Compose BOM (минимум 2024.01.00)
    implementation(platform("androidx.compose:compose-bom:2025.03.00"))
}

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

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

Использовать composable Banner с размером BannerSize.Inline.
При необходимости передать BannerEvents для отслеживания событий рекламы.

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

Все вызовы методов Yandex Mobile Ads SDK выполняйте из главного потока.
Чтобы видеореклама успешно отображалась на экране приложения, включите аппаратное ускорение. Аппаратное ускорение включено по умолчанию, но некоторые приложения его выключают. Если ваше приложение отключило аппаратное ускорение, рекомендуется включить его для классов активности, использующих рекламу.
Если вы получили ошибку в коллбэке onAdFailedToLoad(), не пытайтесь загрузить новое объявление снова. Если это необходимо сделать, ограничьте число повторных попыток загрузки рекламы, чтобы избежать неудачных запросов и проблем с подключением.
Чтобы адаптивные inline-баннеры работали правильно, сделайте макеты приложения адаптивными. Невыполнение этого требования может привести к некорректному отображению рекламы.
Адаптивные inline-баннеры работают лучше при использовании всей доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея.
Адаптивный inline-баннер предназначен для размещения в прокручиваемом контенте. Баннер может быть такой же высоты, как экран устройства, или ограничен максимальной высотой, в зависимости от API.
Размер рекламы задается через BannerSize.Inline(width, maxHeight), где ширина и максимальная высота указываются в dp через тип Dp (например, 320.dp). Контекст для расчета разрешается внутри composable автоматически.
Состояние баннера создается через rememberBannerAdState(), загрузка выполняется явным вызовом loadAd(). Если adSize меняется — BannerAdView пересоздается автоматически.

Высота верхней некликабельной сейф-зоны 80 dp. Контролы внутри зоны могут быть кликабельны.
Размер визуального элемента (ассета) — не менее 32×32 dp. Это может быть значок закрытия или любой другой значок.
Кликабельная зона вокруг ассета — не менее 64×64 dp. Например, если ассет имеет размер 32×32 dp, то отступы вокруг него должны обеспечивать общую кликабельную область 64×64 dp.
Если контрол появляется не сразу, необходимо показывать таймер или шкалу прогресса до его появления.

Пример

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

Для отображения inline-баннера создайте состояние через rememberBannerAdState() с размером BannerSize.Inline, затем передайте его в composable Banner. Загрузку запускайте явным вызовом loadAd().

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

Расширить параметры запроса за рекламой можно через AdRequest.Builder(). Для этого передайте в запросе данные об интересах пользователя, контекстные данные страницы, локацию или другие дополнительные данные. Контекстные данные могут значительно улучшить качество рекламы. Подробнее читайте в разделе Таргетирование рекламы.

Пример отображения адаптивного inline-баннера

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

import com.yandex.mobile.ads.common.AdRequest
import com.yandex.mobile.ads.compose.Banner
import com.yandex.mobile.ads.compose.BannerSize
import com.yandex.mobile.ads.compose.rememberBannerAdState

@Composable
fun MyScreen() {
    val bannerState = rememberBannerAdState(
        adSize = BannerSize.Inline(width = 320.dp, maxHeight = 400.dp),
    )

    LaunchedEffect(Unit) {
        bannerState.loadAd(AdRequest.Builder("your-ad-unit-id").build())
    }

    Banner(
        state = bannerState,
        modifier = Modifier.fillMaxWidth(),
    )
}

Для отслеживания событий рекламы передайте BannerEvents при создании состояния:

import com.yandex.mobile.ads.common.AdRequest
import com.yandex.mobile.ads.compose.Banner
import com.yandex.mobile.ads.compose.BannerEvents
import com.yandex.mobile.ads.compose.BannerSize
import com.yandex.mobile.ads.compose.rememberBannerAdState

@Composable
fun MyScreen() {
    val bannerState = rememberBannerAdState(
        adSize = BannerSize.Inline(width = 320.dp, maxHeight = 400.dp),
        events = BannerEvents(
            onAdLoaded = { Log.d("YandexAds", "Баннер загружен") },
            onAdFailedToLoad = { error -> Log.e("YandexAds", error.description) },
            onAdClicked = { Log.d("YandexAds", "Клик по баннеру") },
            onImpression = { data -> Log.d("YandexAds", "Показ: ${data?.rawData}") },
        ),
    )

    LaunchedEffect(Unit) {
        bannerState.loadAd(AdRequest.Builder("your-ad-unit-id").build())
    }

    Banner(
        state = bannerState,
        modifier = Modifier.fillMaxWidth(),
    )
}

Если вы размещаете рекламу через систему Adfox, после загрузки баннера данные campaignId, bannerId и placeId доступны из объектов BannerAdView через свойство adAttributes типа AdAttributes.

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

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

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

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

Важно

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

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

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

Проверить корректность интеграции адаптивного inline-баннера можно через встроенный в 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

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

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

Ссылка на github.

Была ли статья полезна?

TradPlus ↗

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