Адаптивный inline-баннер
Адаптивный inline-баннер — гибкий формат баннерной рекламы, обеспечивающий максимальную эффективность за счет оптимизации размера рекламы для каждого устройства.
Данный тип рекламы позволяет разработчикам указывать максимально допустимые ширину и высоту объявления, при этом наиболее оптимальный размер рекламы определяется автоматически. Чтобы выбрать лучший размер объявления, встроенные адаптивные баннеры используют максимальную, а не фиксированную высоту. Это приводит к возможности для повышения производительности.
Как правило, такой формат используется в приложениях-лентах или там, где допустимо обеспечить основной фокус на рекламе.
Это руководство покажет, как интегрировать адаптивный inline-баннер в iOS-приложение. В дополнение к примерам кода и инструкции оно содержит рекомендации по использованию данного формата рекламы, а также ссылки на дополнительные ресурсы.
Дополнительно об интеграции адаптивного inline-баннера смотрите в видео:
Пререквизит
- Выполните шаги по интеграции sdk, описанные в Быстром старте.
- Заранее проинициализируйте рекламный SDK.
- Убедитесь, что используете самую актуальную версию Yandex Mobile Ads SDK, а в случае использовании медиации — наиболее свежую версию единой сборки.
Имплементация
Основные шаги по интеграции адаптивного inline-баннера:
- Создать экземлпяр класса AdView.
- Реализовать необходимые методы делегата.
- Загрузить рекламу.
- Передать дополнительные настройки, если вы работаете через систему Adfox.
- Отобразить рекламу, получив рекламное объявление в методе делегата.
Особенности подключения адаптивного inline-баннера
-
Все вызовы методов Yandex Mobile Ads SDK необходимо выполнять из главного потока.
-
Попытка загрузить новое объявление при получении ошибки в методе делегата
func adViewDidFailLoading(_ adView: AdView, error: Error)настоятельно не рекомендуется. Если вам необходимо загрузить объявление изfunc adViewDidFailLoading(_ adView: AdView, error: Error), ограничьте повторные попытки загрузки рекламы, чтобы избежать постоянных неудачных запросов за рекламой в случае ограничений подключения к сети. -
Чтобы адаптивные inline-баннеры работали правильно, используйте Auto Layout. Установление размеров вью с помощью фиксированных размеров frame может привести к некорректному отображению рекламы.
-
Адаптивные inline-баннеры лучше всего работают при использовании всей доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея.
-
Адаптивный inline-баннер предназначен для размещения в прокручиваемом контенте. Баннер может быть такой же высоты, как экран устройства, или ограничен максимальной высотой, в зависимости от API.
-
Для получения размера рекламного объявления, воспользуйтесь методом
BannerAdSize.inlineSize(withWidth: CGFloat, maxHeight: CGFloat), в качестве аргументов доступную ширину рекламного контейнера и максимально допустимую высоту объявления. -
Объект
BannerAdSize, рассчитанный с помощью методаBannerAdSize.inlineSize(withWidth: CGFloat, maxHeight: CGFloat)содержит постоянные значения ширины и высоты рекламы для одного и того же устройства. Протестировав макет своего приложения на конкретном устройстве, вы можете быть уверены, что размер объявления не изменится.
Создание экземпляра класса AdView
Для отображения баннерной рекламы необходимо создать экземпляр класса AdView, передав в него размер рекламы и рекламный идентификатор. Также необходимо определить delegate для AdView, реализовав протокол AdViewDelegate для вашего класса.
Расчет рекламы для устройства происходит при помощи метода SDK BannerAdSize.inlineSize(withWidth: CGFloat, maxHeight: CGFloat). В качестве аргумента необходимо передать максимально допустимую ширину рекламного контейнера. Рекомендуется использовать всю ширину экрана устройства или ширину родительского контейнера. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея.
Также вам потребуется идентификатор рекламного места (adUnitId), полученный вами в ПИ.
Пример создания экземпляра AdView во View Controller:
final class InlineBannerViewController: UIViewController {
private lazy var adView: AdView = {
let adSize = BannerAdSize.inlineSize(withWidth: 320, maxHeight: 320)
let adView = AdView(adUnitID: "R-M-XXXXX-YY", adSize: adSize)
adView.delegate = self
adView.translatesAutoresizingMaskIntoConstraints = false
return adView
}()
}
extension InlineBannerViewController: AdViewDelegate {
func adViewDidLoad(_ adView: AdView) {
// This method will call after successfully loading
}
func adViewDidFailLoading(_ adView: AdView, error: Error) {
// This method will call after getting any error while loading the ad
}
}
Загрузка рекламы
После создания AdView рекламу необходимо загрузить.
Для уведомления об успешной или неудачной загрузке рекламы, а также для отслеживания событий жизненного цикла адаптивного inline-баннера, объекту класса AdView необходимо установить свойства делегата и реализовать протокол AdViewDelegate.
Расширить параметры запроса за рекламой можно через AdRequest, передав в запросе данные об интересах пользователя, контекстные данные страницы, локацию или другие дополнительные данные. Дополнительные контекстные данные на запросе могут значительно улучшить качество рекламы. Подробнее читайте в разделе Таргетирование рекламы.
В следующем примере показано как загрузить адаптивный inline-баннер. После успешной загрузки, вызовется метод func adViewDidLoad(_ adView: AdView) делегата AdViewDelegate:
final class InlineBannerViewController: UIViewController {
private lazy var adView: AdView = {
let adSize = BannerAdSize.inlineSize(withWidth: 320, maxHeight: 320)
let adView = AdView(adUnitID: "R-M-XXXXX-YY", adSize: adSize)
adView.delegate = self
adView.translatesAutoresizingMaskIntoConstraints = false
return adView
}()
func loadAd() {
adView.loadAd()
}
}
Отображение рекламы
После успешной загрузки рекламы необходимо ее отобразить. Сделать это можно с помощью autolayout constraints. Добавьте adView, полученный в методе делегата в ваш контейнер. Затем добавьте autolayout constraints, чтобы баннер отображался в нужном месте.
final class InlineBannerViewController: UIViewController {
private lazy var adView: AdView = {
let adSize = BannerAdSize.inlineSize(withWidth: 320, maxHeight: 320)
let adView = AdView(adUnitID: "R-M-XXXXX-YY", adSize: adSize)
adView.delegate = self
adView.translatesAutoresizingMaskIntoConstraints = false
return adView
}()
func showAd() {
view.addSubview(adView)
NSLayoutConstraint.activate([
adView.topAnchor.constraint(equalTo: loadButton.bottomAnchor, constant: 100),
adView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])
}
}
Тестирование интеграции адаптивного inline-баннера
Использование демоблоков для тестирования рекламы
Для проверки корректной интеграции рекламы, а также для тестирования вашего приложения, рекомендуется использовать тестовую рекламу.
Для гарантированного возврата тестовых объявлений на каждый запрос за рекламой, мы создали специальный демонстрационный идентификатор рекламного места. Используйте его для проверки корректной интеграции рекламы.
Демонстрационный adUnitId: demo-banner-yandex.
Важно
Убедитесь, что перед выкладыванием приложения в store, вы заменили демонстрационный идентификатор рекламного места на настоящий, полученный в ПИ.
Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе Демоблоки для тестирования.
Проверка корректной интеграции рекламы
Проверить корректность интеграции рекламы можно через нативный инструмент Console.
Чтобы получить возможность просматривать расширенные логи, необходимо вызвать метод enableLogging класса YMAMobileAds.
YMAMobileAds.enableLogging()
Для просмотра логов SDK в инструменте Console установите sybsystem = com.yandex.mobile.ads.sdk. Так же вы можете фильтровать логи по категории и по уровню ошибки.
В случае обнаружения проблем при интеграции рекламы вы увидите подробный отчет о проблемах и рекомендации по их устранению.
Дополнительные ресурсы
-
Ссылка на github.