--- metadata: - name: generator content: Diplodoc Platform v5.52.0 alternate: - https://ads.yandex.com/helpcenter/en/dev/flutter/adaptive-inline-banner.md - https://ads.yandex.com/helpcenter/ru/dev/flutter/adaptive-inline-banner.md - https://ads.yandex.com/helpcenter/zh/dev/flutter/adaptive-inline-banner.md - href: ru/dev/flutter/adaptive-inline-banner.md type: text/markdown title: Markdown version - href: llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/ru/llms.txt # Адаптивный inline-баннер Адаптивный inline-баннер — гибкий формат баннерной рекламы, обеспечивающий максимальную эффективность за счет оптимизации размера рекламы для каждого устройства. Данный тип рекламы позволяет разработчикам указывать максимально допустимые ширину и высоту объявления, при этом оптимальный размер рекламы определяется автоматически. Чтобы выбрать лучший размер объявления, встроенные адаптивные баннеры используют максимальную, а не фиксированную высоту. Это позволяет повысить производительность. Как правило, такой формат используется в приложениях-лентах или там, где допустимо обеспечить основной фокус на рекламе. {% cut "Внешний вид" %} {% endcut %} Это руководство покажет, как интегрировать адаптивный inline-баннер во Flutter-приложение. В дополнение к примерам кода и инструкции, оно также содержит рекомендации по использованию данного формата рекламы, а также ссылки на дополнительные ресурсы. Дополнительно об интеграции адаптивного inline-баннера смотрите в видео: @[](https://runtime.strm.yandex.ru/player/video/vplvb77tfvxtm2noob5o?autoplay=0&mute=0) ## Пререквизит {#pre} 1. Выполните шаги по интеграции Yandex Mobile Ads Flutter Plugin, описанные в [Быстром старте](https://ads.yandex.com/helpcenter/ru/dev/flutter/quick-start.md). 2. Убедитесь, что используете самую [актуальную версию Yandex Mobile Ads Flutter Plugin](https://ads.yandex.com/helpcenter/ru/dev/platforms.md), а в случае использовании медиации — наиболее свежую [версию единой сборки](https://ads.yandex.com/helpcenter/ru/dev/platforms.md). ## Имплементация {#implement} Основные шаги по интеграции адаптивного inline-баннера: * Создать и настроить виджет для отображенния баннерной рекламы. * Подписаться на потоки состояния загрузки и событий. * Загрузить рекламу. ## Особенности подключения адаптивного inline-баннера {#features} 1. Если вы получили ошибку в коллбэке `onAdFailedToLoad()`, не пытайтесь загрузить новое объявление снова. Если все же необходимо это сделать, ограничьте число повторных попыток загрузки рекламы. Это поможет избежать постоянных неудачных запросов и проблем с подключением в случае ограничений. 2. Чтобы адаптивные inline-баннеры работали правильно, [сделайте макеты приложения адаптивными](https://docs.flutter.dev/ui/layout/building-adaptive-apps). Невыполнение этого требования может привести к некорректному отображению рекламы. 3. Адаптивные inline-баннеры лучше всего работают при использовании всей доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея. 4. Адаптивный inline-баннер предназначен для размещения в прокручиваемом контенте. Баннер может быть такой же высоты, как экран устройства, или ограничен максимальной высотой, в зависимости от API. 5. Для получения размера рекламного объявления воспользуйтесь методом `BannerAdSize.inline(width, maxAdHeight)`, принимающим в качестве аргументов доступную ширину рекламного контейнера и максимально допустимую высоту объявления. 6. Объект `BannerAdSize`, рассчитанный с помощью метода `BannerAdSize.inline(width, maxAdHeight)` содержит технические данные для выбора наиболее эффективных размеров рекламных объявлений на стороне бэкенда. Высота рекламного объявления может изменяться при каждой загрузке рекламы. Метод `getCalculatedBannerAdSize()` возвращает границы контейнера на основе `width` и `maxAdHeight`, однако не гарантирует фактические размеры объявления. Для точного соответствия размеров можно использовать `Platform Channel` и обновлять контейнер после загрузки объявления. ## Добавление рекламного виджета в макет приложения Для отображения баннерной рекламы, необходимо добавить виджет `AdWidget` в макет приложения. Пример добавления `AdWidget` в макет экрана приложения: ```dart @override Widget build(BuildContext context) { return Scaffold( body: Align( alignment: Alignment.bottomCenter, child: AdWidget(bannerAd: banner), ), ); } ``` ## Загрузка и отображение рекламы После создания и добавления `AdWidget` на экран приложения, рекламу необходимо загрузить. Перед загрузкой адаптивного inline-баннера, необходимо рассчитать размер рекламы для каждого устройства. Делается это автоматически через API sdk: `BannerAdSize.inline(width, maxAdHeight)`. В качестве аргумента необходимо передать ширину рекламного контейнера, а также максимально допустимую высоту рекламного объявления. Рекомендуется использовать всю ширину экрана устройства или ширину родительского контейнера. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея: ```dart BannerAdSize getAdSize() { final screenWidth = MediaQuery.of(context).size.width.round(); return BannerAdSize.inline(width: screenWidth, maxHeight: bannerMaxHeight); } ``` Для загрузки рекламы потребуется идентификатор рекламного места, полученный вами в интерфейсе Рекламной сети Яндекса (adUnitId). Для отслеживания успешной или неудачной загрузки рекламы, а также событий жизненного цикла адаптивного inline-баннера, подпишитесь на потоки `loadStateStream` и `events` объекта класса `BannerAd`. Расширить параметры запроса за рекламой можно через `AdRequest()`, передав в запросе данные об интересах пользователя, контекстные данные страницы, локацию или другие дополнительные данные. Дополнительные контекстные данные на запросе могут значительно улучшить качество рекламы. Подробнее читайте в разделе [Таргетирование рекламы](https://ads.yandex.com/helpcenter/ru/dev/flutter/target.md). В следующем примере показано, как загрузить адаптивный inline-баннер. После успешной загрузки, баннер отобразится автоматически: ```dart class _MyHomePageState extends State { BannerAd? _banner; var isBannerAlreadyCreated = false; BannerAdSize _getAdSize() { final screenWidth = MediaQuery.of(context).size.width.round(); return BannerAdSize.inline(width: screenWidth, maxHeight: bannerMaxHeight); } void _loadAd() { final banner = BannerAd(adSize: _getAdSize()); banner.loadStateStream.listen((state) { if (state is BannerAdLoadStateLoaded) { // The ad was loaded successfully. Now it will be shown. } else if (state is BannerAdLoadStateError) { // Ad failed to load with AdRequestError. // Attempting to load a new ad from the error handler is strongly discouraged. } }); banner.events.listen((event) { if (event is BannerAdClickedEvent) { // Called when a click is recorded for an ad. } else if (event is BannerAdImpressionEvent) { // Called when an impression is recorded for an ad. } }); banner.load(AdRequest(adUnitId: 'R-M-XXXXXX-Y')); // or 'demo-banner-yandex' _banner = banner; setState(() { isBannerAlreadyCreated = true; }); } @override initState() { super.initState(); YandexAds.initialize(); _loadAd(); } @override Widget build(BuildContext context) { return Scaffold( body: Align( alignment: Alignment.bottomCenter, child: isBannerAlreadyCreated ? AdWidget(bannerAd: _banner!) : null, ), ); } } ``` ## Освобождение ресурсов Когда баннер больше не нужен, вызовите метод `destroy()`, чтобы освободить ресурсы: ```dart await _banner?.destroy(); _banner = null; ``` ## Тестирование интеграции адаптивного inline-баннера {#test} {% list tabs %} - Android ### Использование демоблоков для тестирования рекламы {#demo-blocks} Для проверки корректной интеграции адаптивного inline-баннера и тестирования приложения используйте тестовую рекламу. Для гарантированного возврата тестовых объявлений на каждый запрос за рекламой вы можете использовать специальный демонстрационный идентификатор рекламного места. Демонстрационный adUnitId: `demo-banner-yandex`. {% note warning %} Убедитесь, что перед выкладыванием приложения в магазин вы заменили демонстрационный идентификатор рекламного места на настоящий, полученный в интерфейсе Рекламной сети Яндекса. {% endnote %} Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе [Демоблоки для тестирования](https://ads.yandex.com/helpcenter/ru/dev/android/demo-blocks.md). ### Проверка корректной интеграции рекламы {#test-int} Проверить корректность интеграции адаптивного inline-баннера можно через встроенный в SDK анализатор. Подробный отчет о проверке выведется в лог. Для просмотра отчета, выполните поиск по ключевому слову YandexAds в инструменте отладки Android-приложений [Logcat](https://developer.android.com/studio/command-line/logcat). ```bash adb logcat -v brief '*:S YandexAds' ``` В случае успешной интеграции вы увидите следующее сообщение: ```bash adb logcat -v brief '*:S YandexAds' mobileads$ adb logcat -v brief '*:S YandexAds' I/YandexAds(13719): [Integration] Ad type banner was integrated successfully ``` В случае обнаружения проблем при интеграции баннерной рекламы вы получите подробный отчет о проблемах и рекомендации по их устранению. - iOS ### Использование демоблоков для тестирования рекламы Для проверки корректной интеграции рекламы и тестирования приложения используйте тестовую рекламу. Для гарантированного возврата тестовых объявлений на каждый запрос за рекламой вы можете использовать специальный демонстрационный идентификатор рекламного места. Демонстрационный adUnitId: `demo-banner-yandex`. {% note warning %} Убедитесь, что перед выкладыванием приложения в магазин вы заменили демонстрационный идентификатор рекламного места на настоящий, полученный в интерфейсе Рекламной сети Яндекса. {% endnote %} Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе [Демоблоки для тестирования](https://ads.yandex.com/helpcenter/ru/dev/ios/demo-blocks.md). ### Проверка корректной интеграции рекламы Проверить корректность интеграции рекламы можно через нативный инструмент Console. Чтобы получить возможность просматривать расширенные логи, необходимо вызвать метод `enableLogging` класса `YandexAds`. ```swift YandexAds.enableLogging() ``` Для просмотра логов SDK в инструменте Console установите `Subsystem = com.mobile.ads.ads.sdk`. Вы можете фильтровать логи по категории и уровню ошибки. В случае обнаружения проблем при интеграции рекламы вы увидите подробный отчет о проблемах и рекомендации по их устранению. {% endlist %} ## Дополнительные ресурсы {#resources} * Ссылка на [pub.dev](https://pub.dev/packages/yandex_mobileads/example).