Нативная реклама

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

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

Отрисовка рекламы производится нативными средствами платформы, что увеличивает её производительность и качество.

Внешний вид

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

Пререквизит

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

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

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

• Создать и настроить загрузчик рекламы NativeAdLoader.
• Загрузить рекламу.
• Передать дополнительные настройки, если вы работаете через систему Adfox.
• Отобразить загруженное объявление.

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

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

2. Попытка загрузить новое объявление при получении ошибки загрузки настоятельно не рекомендуется. При использовании completion handler это case .failure, при использовании Swift Concurrency — блок catch. Если вам необходимо повторить загрузку, ограничьте повторные попытки загрузки рекламы, чтобы избежать постоянных неудачных запросов за рекламой в случае ограничений подключения к сети.

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

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

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

5. Объявления с видео, как правило, имеют более высокий CTR и, соответственно, приносят больше дохода. Для отображения рекламы с видео необходимо чтобы размер рекламного контейнера и компонента MediaView были не меньше 300x160 dp (density-independent pixels).

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

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

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

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

Для загрузки рекламы используйте метод loadAd(with:options:completion:) с completion handler или Swift Concurrency вариант loadAd(with:options:).

В следующем примере показано как загрузить нативную рекламу из View Controller:

final class CustomNativeViewController: UIViewController {
    private var adLoader: NativeAdLoader?

    override func viewDidLoad() {
        adLoader = NativeAdLoader()
    }

    private func loadNativeAd() async {
        let request = AdRequest(adUnitID: "R-M-XXXXX-YY")
        let options = NativeAdOptions()
        do {
            let ad = try await adLoader?.loadAd(with: request, options: options)
            // Notifies that a native ad is loaded
        } catch {
            // Notifies that the ad failed to load
        }
    }
}

final class CustomNativeViewController: UIViewController {
    private var adLoader: NativeAdLoader?

    override func viewDidLoad() {
        adLoader = NativeAdLoader()
    }

    private func loadNativeAd() {
        let request = AdRequest(adUnitID: "R-M-XXXXX-YY")
        let options = NativeAdOptions()
        adLoader?.loadAd(with: request, options: options) { [weak self] result in
            switch result {
            case .success(let ad):
                // Notifies that a native ad is loaded
                break
            case .failure:
                // Notifies that the ad failed to load
                break
            }
        }
    }
}

Показ рекламных объявлений

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

Ручная настройка внешнего оформления нативной рекламы

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

Чтобы вручную настроить отображение нативной рекламы:

1. Создайте кастомное view для класса NativeAdView.

2. Настройте расположение кастомных элементов для отображения компонентов.

3. Свяжите эти кастомные элементы с соответствующими свойствами NativeAdView:

   final class CustomNativeAdView: NativeAdView {
       // ...
   
       init() {
           super.init(frame: CGRect())
           setupUI()
           bindAssets()
       }
   
       private func bindAssets() {
           titleLabel = customTitleLabel
           domainLabel = customDomainLabel
           warningLabel = customWarningLabel
           sponsoredLabel = customSponsoredLabel
           feedbackButton = customFeedbackButton
           callToActionButton = customCallToActionButton
           mediaView = customMediaView
           priceLabel = customPriceLabel
           reviewCountLabel = customReviewCountLabel
           ratingView = customRatingView
           bodyLabel = customBodyLabel
           iconImageView = customIconImageView
       }
   
       private func setupUI() {
       // ...
       }
   }
   

   Примечание

   Если вы не свяжете кастомный элемент со свойством NativeAdView для обязательного компонента, реклама не будет показана.

4. Привяжите кастомный view к объекту рекламы NativeAd для отображения нативной рекламы после успешной загрузки рекламы. Для этого вызовите метод bind(with adView: NativeAdView) у объекта NativeAd:

   final class NativeCustomViewController: UIViewController, NativeAdDelegate {
       private let adView = NativeCustomAdView()
   
       // ...
   
       private lazy var adLoader: NativeAdLoader = {
           let adLoader = NativeAdLoader()
           return adLoader
       }()
   
       override func viewDidLoad() {
           super.viewDidLoad()
           setupUI()
           loadNativeAd()
       }
   
       private func loadNativeAd() {
           let request = AdRequest(adUnitID: "demo-native-app-yandex")
           let options = NativeAdOptions()
           adLoader.loadAd(with: request, options: options) { [weak self] result in
               if case .success(let ad) = result {
                   self?.bindNativeAd(ad)
               }
           }
       }
   
       private func bindNativeAd(_ ad: NativeAd) {
           ad.delegate = self
           do {
               try ad.bind(with: adView)
           } catch {
               // ...
           }
       }
   
       private func setupUI() {
       // ...
       }
   }
   
   

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

Yandex Mobile Ads SDK предоставляет возможность загрузки нескольких рекламных объявлений одним запросом (до девяти объявлений).

1. Создайте экземпляр класса NativeBulkAdLoader для получения нативных объявлений.

2. Создайте AdRequest с идентификатором рекламного блока и NativeAdOptions для дополнительных параметров (изображения и т.д.).

3. Вызовите метод loadAds(with:adsCount:options:completion:) для загрузки рекламы.

let request = AdRequest(adUnitID: AdUnitID)
let options = NativeAdOptions()
let adLoader = NativeBulkAdLoader()

do {
    let ads = try await adLoader.loadAds(with: request, adsCount: adsCount, options: options)
    // Отдельная работа с каждым объектом NativeAd
} catch {
    // Ошибка загрузки
}

let request = AdRequest(adUnitID: AdUnitID)
let options = NativeAdOptions()
let adLoader = NativeBulkAdLoader()

adLoader.loadAds(with: request, adsCount: adsCount, options: options) { result in
    switch result {
    case .success(let ads):
        // Отдельная работа с каждым объектом NativeAd
        break
    case .failure:
        break
    }
}

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

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

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

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

Демонстрационный adUnitID для текстово-графической рекламы: demo-native-content-yandex.

Демонстрационный adUnitID для рекламы мобильных приложений: demo-native-app-yandex.

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

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

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

YandexAds.enableLogging()

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

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

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

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

Чтобы включить индикатор также и для реальных устройств, передайте значение DeviceTypeHardware | DeviceTypeSimulator в методе enableVisibilityErrorIndicatorForDeviceType:.

YandexAds.enableVisibilityErrorIndicator(for: [.hardware, .simulator])

Чтобы выключить индикатор, передайте значение DeviceTypeNone в методе enableVisibilityErrorIndicatorForDeviceType:.

YandexAds.enableVisibilityErrorIndicator(for: [])

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

• Ссылка на github.