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

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

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

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

Внешний вид

Это руководство покажет, как интегрировать адаптивный inline-баннер в iOS-приложение на SwiftUI. В дополнение к примерам кода и инструкции оно содержит рекомендации и ссылки на дополнительные ресурсы.

Пререквизит

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

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

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

Создать BannerState с размером BannerSize.inline(width:maxHeight:) и запросом AdRequest с идентификатором рекламного места.
Добавить в иерархию View Banner(state:), передав этот BannerState.
Подписаться на события через модификаторы .onAdLoad, .onAdFailure и при необходимости .onAdClick, .onAdImpression.
Передать дополнительные настройки, если вы работаете через систему Adfox (через параметры AdRequest внутри BannerState).
Отобразить рекламу. Загрузка начинается при появлении Banner на экране с заданным BannerState. После успешной загрузки обновляется высота объявления.

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

Если вы получили ошибку в коллбэке .onAdFailure, не пытайтесь загрузить новое объявление снова. Если это необходимо сделать, ограничьте число повторных попыток загрузки рекламы, чтобы избежать неудачных запросов и проблем с подключением.
Чтобы адаптивные inline-баннеры работали правильно, задавайте размер через SwiftUI. Используйте BannerSize.inline(width:maxHeight:) и ограничения родительского контейнера (ширина, отступы). Фиксация только внешнего frame без учета адаптивной высоты может привести к некорректному отображению рекламы.
Адаптивные inline-баннеры работают лучше при использовании всей доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея.
Адаптивный inline-баннер предназначен для размещения в прокручиваемом контенте. Баннер может быть такой же высоты, как экран устройства, или ограничен максимальной высотой, в зависимости от API.
В SwiftUI для inline-баннера используйте Banner(state:) с BannerState(size: .inline(width:maxHeight:), request:). Параметр width — доступная ширина контейнера, maxHeight — максимально допустимая высота объявления (аналог расчета через BannerAdSize.inline(withWidth:maxHeight:) в UIKit).
Для одного и того же устройства и переданных параметров размера итоговая область объявления стабильна. После загрузки высота отражается во внутренней верстке Banner.

Создание и отображение баннера

Для отображения баннерной рекламы добавьте в SwiftUI-иерархию Banner(state:) и передайте BannerState с размером .inline(width:maxHeight:) и AdRequest с рекламным идентификатором.

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

Также потребуется идентификатор рекламного места (adUnitId), полученный в интерфейсе Рекламной сети Яндекса.

Пример экрана на SwiftUI:

import SwiftUI
import YandexMobileAds

struct InlineBannerView: View {
    @State private var bannerState: BannerState?

    var body: some View {
        VStack {
            if let bannerState {
                Banner(state: bannerState)
                    .onAdLoad { _ in
                        // Объявление успешно загружено
                    }
                    .onAdFailure { error in
                        // Ошибка загрузки
                    }
            }

            Button("Загрузить баннер") {
                bannerState = BannerState(
                    size: .inline(width: 320, maxHeight: 320),
                    request: AdRequest(adUnitID: "R-M-XXXXX-YY")
                )
            }
        }
    }
}

Загрузка рекламы

Загрузка начинается, когда Banner с заданным BannerState появляется в иерархии и при подстановке нового экземпляра BannerState: каждый вызов инициализатора BannerState(size:request:) создает новое состояние и запускает загрузку.

Для уведомления об успешной или неудачной загрузке, а также для отслеживания кликов и показов, используйте модификаторы:

onAdLoad
onAdFailure
onAdClick
onAdImpression

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

Пример

Задать новый BannerState для загрузки (после успешной загрузки вызывается .onAdLoad):

struct InlineBannerView: View {
    @State private var bannerState: BannerState?

    func loadAd() {
        bannerState = BannerState(
            size: .inline(width: 320, maxHeight: 320),
            request: AdRequest(adUnitID: "R-M-XXXXX-YY")
        )
    }

    var body: some View {
        VStack {
            if let bannerState {
                Banner(state: bannerState)
                    .onAdLoad { _ in }
                    .onAdFailure { _ in }
            }
            Button("Загрузить", action: loadAd)
        }
    }
}

Отображение рекламы

После успешной загрузки объявление отображается внутри Banner. Размер обновляется после получения креатива. Разместите Banner в нужном месте ленты или стека, например в ScrollView + VStack с необходимыми отступами.

struct InlineBannerView: View {
    @State private var bannerState: BannerState?

    var body: some View {
        ScrollView {
            VStack {
                // Контент ленты
                Text("Контент")

                if let bannerState {
                    Banner(state: bannerState)
                        .onAdLoad { _ in }
                        .onAdFailure { _ in }
                }
            }
            .padding()
        }
    }
}

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

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

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

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

Важно

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

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

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

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

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

YandexAds.enableLogging()

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

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

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

Ссылка на github.

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

TradPlus ↗

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