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

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

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

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

Внешний вид

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

Пререквизит

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

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

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

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

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

  1. Попытка загрузить новое объявление при получении ошибки в коллбеке .onAdFailure настоятельно не рекомендуется. Если вам необходимо загрузить объявление из .onAdFailure, ограничьте повторные попытки загрузки рекламы, чтобы избежать постоянных неудачных запросов за рекламой в случае ограничений подключения к сети.

  2. Чтобы адаптивные inline-баннеры работали правильно, задавайте размер через SwiftUI: используйте BannerSize.inline(width:maxHeight:) и ограничения родительского контейнера (ширина, отступы). Фиксация только внешнего frame без учёта адаптивной высоты может привести к некорректному отображению рекламы.

  3. Адаптивные inline-баннеры лучше всего работают при использовании всей доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея.

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

  5. В SwiftUI для inline-баннера используйте Banner(size: .inline(width:maxHeight:), request:). Параметр width — доступная ширина контейнера, maxHeight — максимально допустимая высота объявления (аналог расчёта через BannerAdSize.inlineSize(withWidth:maxHeight:) в UIKit).

  6. Для одного и того же устройства и переданных параметров размера итоговая область объявления стабильна: после загрузки высота отражается во внутренней вёрстке Banner.

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

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

Рекомендуется задавать width по ширине экрана или родительского контейнера с учётом отступов и safe area.

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

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

import SwiftUI
import YandexMobileAds

struct InlineBannerView: View {
    @State private var adRequest: AdRequest?

    var body: some View {
        VStack {
            if let request = adRequest {
                Banner(size: .inline(width: 320, maxHeight: 320), request: request)
                    .onAdLoad { _ in
                        // Объявление успешно загружено
                    }
                    .onAdFailure { error in
                        // Ошибка загрузки
                    }
            }

            Button("Загрузить баннер") {
                adRequest = AdRequest(adUnitID: "R-M-XXXXX-YY")
            }
        }
    }
}

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

Загрузка начинается, когда Banner с ненулевым request появляется в иерархии и при изменении AdRequest на новый экземпляр.

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

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

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

struct InlineBannerView: View {
    @State private var adRequest: AdRequest?

    func loadAd() {
        adRequest = AdRequest(adUnitID: "R-M-XXXXX-YY")
    }

    var body: some View {
        VStack {
            if let request = adRequest {
                Banner(size: .inline(width: 320, maxHeight: 320), request: request)
                    .onAdLoad { _ in }
                    .onAdFailure { _ in }
            }
            Button("Загрузить", action: loadAd)
        }
    }
}

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

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

struct InlineBannerView: View {
    @State private var adRequest: AdRequest?

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

                if let request = adRequest {
                    Banner(size: .inline(width: 320, maxHeight: 320), request: request)
                        .onAdLoad { _ in }
                        .onAdFailure { _ in }
                }
            }
            .padding()
        }
    }
}

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

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

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

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

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

Важно

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

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

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

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

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

YMAMobileAds.enableLogging()

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

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

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

Предыдущая
TradPlus ↗
Следующая
Адаптивный sticky-баннер