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

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

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

Внешний вид

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

Пререквизит

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

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

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

  1. Создать BannerState с размером BannerSize.sticky(width:) (по умолчанию ширина берется из контейнера) и запросом AdRequest с идентификатором рекламного места.
  2. Добавить в иерархию View Banner(state:), передав этот BannerState.
  3. Подписаться на события через модификаторы .onAdLoad, .onAdFailure и при необходимости .onAdClick, .onAdImpression.
  4. Передать дополнительные настройки, если вы работаете через систему Adfox (через параметры AdRequest внутри BannerState).
  5. Разместить баннер в нужной области экрана средствами SwiftUI (например, внизу VStack, через safeAreaInset, overlay).

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

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

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

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

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

  5. В SwiftUI для sticky-баннера используйте Banner(state:) с BannerState(size: .sticky(width:), request:). При width: nil ширина ограничивается шириной контейнера (аналог расчета через BannerAdSize.sticky(withContainerWidth:) в UIKit).

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

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

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

Для отображения баннерной рекламы добавьте Banner(state:) и передайте BannerState с размером .sticky(...) и AdRequest.

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

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

import SwiftUI
import YandexMobileAds

struct StickyBannerView: 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: .sticky(),
                    request: AdRequest(adUnitID: "R-M-XXXXX-YY")
                )
            }
        }
    }
}

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

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

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

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

Пример иницииации загрузки адаптивного sticky-баннера

После успешной загрузки вызывается .onAdLoad:

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

    func loadAd() {
        bannerState = BannerState(
            size: .sticky(),
            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 в нужном месте интерфейса. Например:

  • Фиксированное положение в макете — VStack с баннером внизу или вверху, с Spacer() для прижатия к краю.
  • Инструменты SwiftUI — safeAreaInset(edge: .bottom), overlay(alignment:).

В UIKit для баннера доступны методы displayAtTop(in:) и displayAtBottom(in:) у нативного View В SwiftUI аналогичное поведение обеспечивается размещением Banner в иерархии (например, баннер внизу корневого ZStack или VStack поверх контента).

Пример

Баннер внизу экрана поверх контента:

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

    var body: some View {
        ZStack(alignment: .bottom) {
            ScrollView {
                Text("Контент")
            }
            if let bannerState {
                Banner(state: bannerState)
                    .onAdLoad { _ in }
                    .onAdFailure { _ in }
            }
        }
    }
}

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

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

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

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

Важно

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

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

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

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

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

YandexAds.enableLogging()

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

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

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

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