Слайдер рекламных объявлений (SwiftUI)

Слайдер — набор объявлений, которые сменяют друг друга, когда пользователь их пролистывает. Ключевые факторы, от которых зависит последовательность — релевантность рекламы для пользователя и потенциальный доход от объявления для владельца приложения. При формировании слайдера система учитывает размещенные рекламные блоки во всем приложении, чтобы исключить повторы. Формат хорошо подойдет приложениям, в которых количество рекламных мест ограничено.

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

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

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

Пререквизит

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

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

Основные шаги по интеграции слайдера в SwiftUI:

  1. Создать SliderAdState(request:options:) с запросом AdRequest и идентификатором рекламного места. Состояние должно жить дольше одного рендера: держите его в @StateObject или во вью-модели.
  2. Добавить в иерархию View контейнер SliderAdContainer(state:content:placeholder:) с этим состоянием.
  3. Показать каждую карточку из SliderAdLayoutInfo.ads отдельным NativeAdContainer внутри горизонтального ScrollView с LazyHStack.
  4. Отрисовать компоненты самого блока, если они есть, примитивами NativeAdAsset прямо в содержимом SliderAdContainer.
  5. Подписаться на события через модификаторы .onAdLoad, .onAdFailure, .onAdBindingFailure, .onAdImpression — у слайдера и .onAdClick, .onAdImpression, .onAdBindingFailure — у карточек.
  6. Передать дополнительные настройки, если вы работаете через систему Adfox (через параметры AdRequest).
  7. Запустить загрузку вызовом loadAd(), например в onAppear.

Особенности подключения слайдера

  1. Все вызовы методов Yandex Mobile Ads SDK необходимо выполнять из главного потока.

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

  3. У блока нет собственного клика, поэтому у SliderAdContainer нет модификатора onAdClick. Нажатия приходят из NativeAdContainer.onAdClick каждой карточки.

  4. Блок может не содержать собственных компонентов — тогда достаточно карточек, блок все равно будет привязан и его показ будет засчитан. Если же загруженный блок помечает свой компонент как обязательный (обычно это sponsored), а примитив для него не отрисован, блок не привязывается и приходит .onAdBindingFailure. Поэтому блочные примитивы оборачивайте в проверку layout.has(_:).

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

  6. Содержимое слайдера должно иметь ненулевую высоту и ширину: карточка нулевого размера показ не засчитает.

  7. Для каждого объявления в слайдере рекомендуется использовать макет, который включает весь набор возможных компонентов. Как показывает практика, макет, включающий весь набор компонентов, приводит к лучшим конверсиям.

Загрузка слайдера

Загрузкой владеет SliderAdState. Текущее состояние загрузки публикуется в свойстве phase:

  • .idle — загрузка еще не начиналась;
  • .loading — загрузка идет;
  • .loaded(SliderAd) — слайдер загружен и может быть показан;
  • .failed(Error) — загрузка завершилась ошибкой.

Загрузка начинается только по явному вызову loadAd(); после ошибки повторный loadAd() отправляет запрос еще раз. Чтобы загрузить слайдер заново с новыми параметрами, создайте новый SliderAdState с нужным AdRequest. Это аналог повторного вызова loadAd(with:) у SliderAdLoader в UIKit.

Параметры запроса за рекламой настраиваются через объект класса AdRequest, параметры загрузки изображений — через NativeAdOptions. Подробнее читайте в разделе Таргетирование рекламы.

import SwiftUI
import YandexMobileAds

struct SliderAdView: View {
    @StateObject private var sliderState = SliderAdState(request: AdRequest(adUnitID: "R-M-XXXXX-YY"))

    var body: some View {
        SliderAdContainer(state: sliderState) { layout in
            block(layout)
        } placeholder: {
            ProgressView().frame(maxWidth: .infinity, minHeight: 200)
        }
        .onAdLoad { adInfo in
            // ...
        }
        .onAdFailure { error in
            // ...
        }
        .onAdBindingFailure { error in
            // ...
        }
        .onAdImpression { impressionData in
            // ...
        }
        .onAppear { sliderState.loadAd() }
    }
}

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

Показ слайдера

В замыкание content приходит SliderAdLayoutInfo:

  • ads — состояния NativeAdState карточек блока, по одному на объявление, в том порядке, в котором их перечислил блок;
  • has(_:) — есть ли у самого блока компонент указанного вида, без учета компонентов карточек.

Каждая карточка показывается своим NativeAdContainer, а ее верстка ничем не отличается от обычной нативной карточки: те же примитивы NativeAdAsset и тот же NativeAdLayoutInfo. Полный перечень компонентов приведен в разделе Компоненты нативной рекламы.

private func block(_ layout: SliderAdLayoutInfo) -> some View {
    VStack(alignment: .leading, spacing: 8) {
        if layout.has(.sponsored) {
            NativeAdAsset.Sponsored()
                .font(.caption2)
                .foregroundColor(.secondary)
        }

        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 8) {
                ForEach(layout.ads) { adState in
                    card(adState)
                }
            }
        }
    }
}

private func card(_ adState: NativeAdState) -> some View {
    NativeAdContainer(state: adState) { layout in
        VStack(alignment: .leading, spacing: 8) {
            HStack(spacing: 8) {
                NativeAdAsset.Icon()
                    .frame(width: 40, height: 40)
                    .clipShape(RoundedRectangle(cornerRadius: 8))
                VStack(alignment: .leading) {
                    NativeAdAsset.Title().font(.headline).lineLimit(2)
                    HStack(spacing: 4) {
                        NativeAdAsset.Domain().font(.caption).foregroundColor(.secondary)
                        NativeAdAsset.Sponsored().font(.caption2).foregroundColor(.secondary)
                        NativeAdAsset.Age().font(.caption2).foregroundColor(.secondary)
                    }
                }
                Spacer()
                NativeAdAsset.Feedback()
                    .frame(width: 24, height: 24)
            }

            NativeAdAsset.Media()
                .clipShape(RoundedRectangle(cornerRadius: 12))

            NativeAdAsset.Body().font(.subheadline).lineLimit(3)

            NativeAdAsset.CallToAction { text in
                Text(text)
                    .bold()
                    .frame(maxWidth: .infinity, minHeight: 44)
                    .background(Color.accentColor)
                    .foregroundColor(.white)
                    .clipShape(Capsule())
            }

            NativeAdAsset.Warning().font(.caption2).foregroundColor(.secondary)
        }
        .padding(12)
        .frame(width: 320)
    } placeholder: {
        ProgressView().frame(width: 320, height: 200)
    }
    .onAdClick { }
    .onAdImpression { _ in }
    .onAdBindingFailure { _ in }
}

Совет

Начиная с iOS 17 к горизонтальному ScrollView можно добавить .scrollTargetBehavior(.viewAligned) и .scrollTargetLayout() на LazyHStack, чтобы карточки листались по одной.

События

Модификатор

Значение в замыкании

Когда вызывается

onAdLoad

AdInfo?

Слайдер успешно загружен

onAdFailure

Error

Загрузка завершилась ошибкой

onAdBindingFailure

Error

Загруженный блок не удалось связать с отрисованным содержимым

onAdImpression

ImpressionData?

Показ блока засчитан

Показы и клики отдельных объявлений приходят в onAdImpression и onAdClick соответствующего NativeAdContainer.

Ручная загрузка изображений

Если изображения нужно загружать самостоятельно, передайте в состояние NativeAdOptions(shouldLoadImagesAutomatically: false). Метод SliderAdState.loadImages() загружает изображения блока и всех его карточек сразу и завершается, когда они загружены; примитивы перерисовываются сами.

@StateObject private var sliderState = SliderAdState(
    request: AdRequest(adUnitID: "R-M-XXXXX-YY"),
    options: NativeAdOptions(shouldLoadImagesAutomatically: false)
)

func loadImages() {
    Task { await sliderState.loadImages() }
}

Важно

Показ засчитывается по видимости и не ждет изображений. Пока loadImages() не завершился, показывайте свой плейсхолдер.

Тестирование интеграции слайдера

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

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

Демонстрационный adUnitId для слайдера: demo-native-slider-yandex.

Важно

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

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

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

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

YandexAds.enableLogging()

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

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

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

Предыдущая
Нативная реклама
Следующая
Пример интеграции