Рекламная лента

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

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

Внешний вид

Пререквизит

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

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

Основные шаги по интеграции рекламной ленты с объявлениями:

  1. Задайте параметры внешнего вида рекламной ленты через объект FeedAdAppearance.
  2. Создайте объект рекламной ленты FeedAd, установите делегат и реализуйте необходимые методы FeedAdDelegate.
  3. Загрузите рекламу.
  4. Создайте адаптер FeedAdCollectionViewAdapter и подключите его к UICollectionView.

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

  • Все вызовы методов Yandex Mobile Ads SDK необходимо выполнять из главного потока.
  • Рекомендуем держать сильную ссылку на объекты FeedAd и FeedAdCollectionViewAdapter на всём протяжении жизни экрана, в рамках которого происходит взаимодействие с рекламой.

Настройка внешнего вида

Создайте объект конфигурации внешнего вида рекламной ленты FeedAdAppearance.

Доступны следующие параметры:

  • cardWidth (обязательный параметр) — задаёт ширину показываемого рекламного объявления в points. Для расчёта этого параметра ориентируйтесь на ширину экрана, вычитая необходимые отступы по бокам.
  • cardCornerRadius — задаёт радиус скругления углов показываемого рекламного объявления в points.
let feedMargin: CGFloat = 24
let cardWidth = view.bounds.width - 2 * feedMargin
let appearance = FeedAdAppearance(cardWidth: cardWidth, cardCornerRadius: 16)

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

Создайте объект рекламной ленты FeedAd. Для этого используйте идентификатор рекламного места (adUnitId), который получили в интерфейсе Рекламной сети Яндекса.

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

Установите делегат и реализуйте методы FeedAdDelegate для получения уведомлений о загрузке и событиях рекламы:

final class FeedAdViewController: UIViewController {
    private var feedAd: FeedAd?

    func loadAd() {
        let request = AdRequest(adUnitID: "R-M-XXXXXX-Y")
        let appearance = FeedAdAppearance(cardWidth: view.bounds.width)
        let feedAd = FeedAd(requestConfiguration: request, appearance: appearance)
        feedAd.delegate = self
        self.feedAd = feedAd
        feedAd.loadAd()
    }
}

extension FeedAdViewController: FeedAdDelegate {
    func feedAdDidLoad(_ feedAd: FeedAd) {
        // Called when an ad is successfully loaded
    }

    func feedAd(_ feedAd: FeedAd, didFailToLoadWithError error: Error) {
        // Called when ad loading fails
    }

    func feedAdDidClick(_ feedAd: FeedAd) {
        // Called when the user taps the ad
    }

    func feedAd(_ feedAd: FeedAd, didTrackImpression impressionData: ImpressionData?) {
        // Called when an impression is tracked
    }

    func feedAdDidUpdateDataSource(_ feedAd: FeedAd) {
        // Called when new ads are available — reload collection view
        collectionView.reloadData()
    }
}

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

Для отображения рекламной ленты используйте FeedAdCollectionViewAdapter, который предоставляет dataSource и delegate для UICollectionView.

Перед подключением адаптера зарегистрируйте типы ячеек вызовом registerCells(in:). Вызовите этот метод до установки dataSource и delegate.

Как основной список

Установите dataSource и delegate адаптера непосредственно на UICollectionView:

final class FeedAdViewController: UIViewController {
    private let collectionView = UICollectionView(
        frame: .zero,
        collectionViewLayout: UICollectionViewFlowLayout()
    )
    private var feedAdAdapter: FeedAdCollectionViewAdapter?

    func setupAdapter() {
        guard let feedAd else { return }
        let adapter = FeedAdCollectionViewAdapter(feedAd: feedAd)
        adapter.registerCells(in: collectionView)
        collectionView.dataSource = adapter.dataSource
        collectionView.delegate = adapter.delegate
        feedAdAdapter = adapter
    }
}

В дополнение к существующему контенту

Для отображения рекламной ленты совместно с существующим контентом реализуйте UICollectionViewDataSource самостоятельно. Для этого делегируйте секцию рекламной ленты адаптеру:

final class FeedAdViewController: UIViewController {
    private enum Section: Int {
        case content
        case feed
    }

    private var contentItems: [ContentItem] = []
    private var feedAdAdapter: FeedAdCollectionViewAdapter?

    func setupAdapter() {
        guard let feedAd else { return }
        let adapter = FeedAdCollectionViewAdapter(feedAd: feedAd)
        adapter.registerCells(in: collectionView)
        feedAdAdapter = adapter

        collectionView.dataSource = self
        collectionView.delegate = self
    }
}

extension FeedAdViewController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        Section.allCases.count
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        switch Section(rawValue: section) {
        case .content:
            return contentItems.count
        case .feed:
            return feedAdAdapter?.dataSource.collectionView(collectionView, numberOfItemsInSection: section) ?? 0
        case .none:
            return 0
        }
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        switch Section(rawValue: indexPath.section) {
        case .content:
            // Return your content cell
            return dequeueContentCell(for: indexPath)
        case .feed:
            return feedAdAdapter?.dataSource.collectionView(collectionView, cellForItemAt: indexPath)
                ?? UICollectionViewCell()
        case .none:
            return UICollectionViewCell()
        }
    }
}

extension FeedAdViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(
        _ collectionView: UICollectionView,
        layout collectionViewLayout: UICollectionViewLayout,
        sizeForItemAt indexPath: IndexPath
    ) -> CGSize {
        switch Section(rawValue: indexPath.section) {
        case .feed:
            return feedAdAdapter?.delegate.collectionView?(
                collectionView,
                layout: collectionViewLayout,
                sizeForItemAt: indexPath
            ) ?? .zero
        default:
            return CGSize(width: collectionView.bounds.width, height: 80)
        }
    }
}

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

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

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

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

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

Важно

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

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

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

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

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

YandexAds.enableLogging()

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

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

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

Предыдущая
Реклама при открытии приложения
Следующая
Таргетирование в РСЯ