--- metadata: - name: generator content: Diplodoc Platform v5.50.6 alternate: - https://ads.yandex.com/helpcenter/en/dev/flutter/adaptive-sticky-banner.md - https://ads.yandex.com/helpcenter/ru/dev/flutter/adaptive-sticky-banner.md - https://ads.yandex.com/helpcenter/zh/dev/flutter/adaptive-sticky-banner.md --- > **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/ru/llms.txt # Адаптивный sticky-баннер Адаптивный sticky-баннер — небольшое, автоматически обновляемое рекламное объявление. Оно располагается в нижней или верхней части экрана приложения. Баннер не перекрывает основной контент и часто используется в приложениях-играх. Адаптивный sticky-баннер обеспечивает максимальную эффективность за счет оптимизации размера рекламы для каждого устройства. Данный тип рекламы позволяет разработчикам указывать максимально допустимую ширину объявления, при этом оптимальный размер рекламы определяется автоматически. {% cut "Внешний вид" %} {% endcut %} Это руководство покажет, как интегрировать адаптивный sticky-баннер во Flutter-приложение. В дополнение к примерам кода и инструкции, оно также содержит рекомендации по использованию данного формата рекламы, а также ссылки на дополнительные ресурсы. Дополнительно об интеграции адаптивного sticky-баннера смотрите в видео: @[](https://runtime.strm.yandex.ru/player/video/vplvzrbtv56tgmyltcyn?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} Основные шаги по интеграции адаптивного sticky-баннера: * Создать и настроить виджет для отображенния баннерной рекламы. * Подписаться на потоки состояния загрузки и событий. * Загрузить рекламу. ## Особенности подключения адаптивного sticky-баннера {#features} 1. Попытка загрузить новое объявление при получении ошибки в коллбеке `onAdFailedToLoad()` настоятельно не рекомендуется. Если вам необходимо загрузить объявление из `onAdFailedToLoad()`, ограничьте повторные попытки загрузки рекламы, чтобы избежать постоянных неудачных запросов за рекламой в случае ограничений подключения к сети. 2. Адаптивные sticky-баннеры лучше всего работают при использовании всей доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея. 3. Для получения размера рекламного объявления, воспользуйтесь методом `BannerAdSize.stickySize(adWidth)`, принимающий в качестве аргумента доступную ширину рекламного контейнера. 4. Объект `BannerAdSize`, рассчитанный с помощью метода `BannerAdSize.stickySize(adWidth)` содержит постоянные значения ширины и высоты рекламы для одного и того же устройства. Протестировав макет своего приложения на конкретном устройстве, вы можете быть уверены, что размер объявления не изменится. Актуальные значения ширины и высоты рекламы можно получить с помощью метода `BannerAdSize::getCalculatedBannerAdSize()`. 5. Высота адаптивного sticky-баннера не будет превышать 15% высоты экрана и не меньше 50dp. ## Добавление рекламного виджета в макет приложения Для отображения баннерной рекламы, необходимо добавить виджет `AdWidget` в макет приложения. Пример добавления `AdWidget` в макет экрана приложения: ```dart @override Widget build(BuildContext context) { return Scaffold( body: Align( alignment: Alignment.bottomCenter, child: AdWidget(bannerAd: banner), ), ); } ``` ## Загрузка и отображение рекламы После создания и добавления `AdWidget` на экран приложения, рекламу необходимо загрузить. Перед загрузкой адаптивного sticky-баннера, необходимо рассчитать размер рекламы для каждого устройства. Делается это автоматически через API sdk: `BannerAdSize.sticky(width: screenWidth)`. В качестве аргумента необходимо передать максимально допустимую ширину рекламного контейнера. рекомендуем использовать всю ширину экрана устройства или ширину родительского контейнера. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея: ```dart BannerAdSize getAdSize() { final screenWidth = MediaQuery.of(context).size.width.round(); return BannerAdSize.sticky(width: screenWidth); } ``` Для загрузки рекламы потребуется идентификатор рекламного места, полученный вами в интерфейсе Рекламной сети Яндекса (adUnitId). Для отслеживания успешной или неудачной загрузки рекламы, а также событий жизненного цикла адаптивного sticky-баннера, подпишитесь на потоки `loadStateStream` и `events` объекта класса `BannerAd`. Расширить параметры запроса за рекламой можно через `AdRequest()`, передав в запросе данные об интересах пользователя, контекстные данные страницы, локацию или другие дополнительные данные. Дополнительные контекстные данные на запросе могут значительно улучшить качество рекламы. Подробнее читайте в разделе [Таргетирование рекламы](https://ads.yandex.com/helpcenter/ru/dev/flutter/target.md). В следующем примере показано, как загрузить адаптивный sticky-баннер. После успешной загрузки, баннер отобразится автоматически: ```dart class _MyHomePageState extends State { BannerAd? _banner; var isBannerAlreadyCreated = false; BannerAdSize _getAdSize() { final screenWidth = MediaQuery.of(context).size.width.round(); return BannerAdSize.sticky(width: screenWidth); } 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; ``` ## Тестирование интеграции адаптивного sticky-баннера {#test} {% list tabs %} - Android ### Использование демоблоков для тестирования рекламы {#demo-blocks} Для проверки корректной интеграции адаптивного sticky-баннера и тестирования вашего приложения используйте тестовую рекламу. Для гарантированного возврата тестовых объявлений на каждый запрос за рекламой вы можете использовать специальный демонстрационный идентификатор рекламного места. Демонстрационный adUnitId: `demo-banner-yandex`. {% note warning %} Убедитесь, что перед выкладыванием приложения в магазин вы заменили демонстрационный идентификатор рекламного места на настоящий, полученный в интерфейсе Рекламной сети Яндекса. {% endnote %} Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе [Демоблоки для тестирования](https://ads.yandex.com/helpcenter/ru/dev/android/demo-blocks.md). ### Проверка корректной интеграции рекламы {#test-int} Проверить корректность интеграции адаптивного sticky-баннера можно через встроенный в 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).