Баннерная реклама занимает место в макете приложения либо вверху, либо внизу экрана устройства. Они остаются на экране, пока пользователи взаимодействуют с приложением, и могут автоматически обновляться через определенный период времени.
В этом руководстве показано, как интегрировать баннерную рекламу из AdMob в приложение Flutter. Помимо фрагментов кода и инструкций, он также содержит информацию о правильном размере баннеров.
Всегда тестируйте с помощью тестовых объявлений
При создании и тестировании приложений убедитесь, что вы используете тестовые объявления, а не действующие, рабочие. Несоблюдение этого требования может привести к блокировке вашего аккаунта.
Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для баннеров:
Андроид
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
Тестовые рекламные блоки настроены на возврат тестовых объявлений по каждому запросу, и вы можете использовать их в своих приложениях при кодировании, тестировании и отладке. Просто убедитесь, что вы заменили их собственными идентификаторами рекламных блоков перед публикацией приложения.
Загрузить объявление
В следующем примере создается экземпляр рекламного баннера:
class BannerExampleState extends State<BannerExample> { BannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111' : 'ca-app-pub-3940256099942544/2934735716'; /// Loads a banner ad. void loadAd() { _bannerAd = BannerAd( adUnitId: adUnitId, request: const AdRequest(), size: AdSize.banner, listener: BannerAdListener( // Called when an ad is successfully received. onAdLoaded: (ad) { debugPrint('$ad loaded.'); setState(() { _isLoaded = true; }); }, // Called when an ad request failed. onAdFailedToLoad: (ad, err) { debugPrint('BannerAd failed to load: $error'); // Dispose the ad here to free resources. ad.dispose(); }, ), )..load(); } }
Размеры баннеров
В таблице ниже указаны стандартные размеры баннеров.
Размер в дп (ШxВ) | Описание | Константа размера объявления |
---|---|---|
320x50 | Стандартный баннер | banner |
320x100 | Большой баннер | largeBanner |
320x250 | Средний прямоугольник | mediumRectangle |
468x60 | Полноразмерный баннер | fullBanner |
728x90 | Таблица лидеров | leaderboard |
Предоставленная ширина x Адаптивная высота | Адаптивный баннер | Н/Д |
Чтобы определить собственный размер баннера, установите предпочитаемый AdSize
:
final AdSize adSize = AdSize(300, 50);
Баннерная реклама
Используя BannerAdListener
, вы можете прослушивать события жизненного цикла, например, когда загружается реклама. В этом примере реализуется каждый метод и выводится сообщение на консоль:
class BannerExampleState extends State<BannerExample> { BannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111' : 'ca-app-pub-3940256099942544/2934735716'; /// Loads a banner ad. void loadAd() { _bannerAd = BannerAd( adUnitId: adUnitId, request: const AdRequest(), size: AdSize.banner, listener: BannerAdListener( // Called when an ad is successfully received. onAdLoaded: (ad) { debugPrint('$ad loaded.'); setState(() { _isLoaded = true; }); }, // Called when an ad request failed. onAdFailedToLoad: (ad, err) { debugPrint('BannerAd failed to load: $error'); // Dispose the ad here to free resources. ad.dispose(); }, // Called when an ad opens an overlay that covers the screen. onAdOpened: (Ad ad) {}, // Called when an ad removes an overlay that covers the screen. onAdClosed: (Ad ad) {}, // Called when an impression occurs on the ad. onAdImpression: (Ad ad) {}, ), )..load(); } }
Показ рекламного баннера
Чтобы отобразить BannerAd
в качестве виджета, вы должны создать экземпляр AdWidget
с поддерживаемым объявлением после вызова метода load()
. Вы можете создать виджет перед вызовом load()
, но load()
необходимо вызывать перед добавлением его в дерево виджетов.
AdWidget
наследует класс Flutter Widget и может использоваться как любой другой виджет. В iOS убедитесь, что вы разместили виджет в виджете с указанной шириной и высотой. В противном случае ваше объявление может не отображаться. BannerAd
можно поместить в контейнер, размер которого соответствует размеру объявления:
... if (_bannerAd != null) { Align( alignment: Alignment.bottomCenter, child: SafeArea( child: SizedBox( width: _bannerAd!.size.width.toDouble(), height: _bannerAd!.size.height.toDouble(), child: AdWidget(ad: _bannerAd!), ), ), ) } ...
Объявление должно быть удалено, когда доступ к нему больше не нужен. Лучше всего вызывать метод dispose()
либо после удаления AdWidget
из дерева виджетов, либо в обратном вызове BannerAdListener.onAdFailedToLoad()
.
Вот и все! Теперь ваше приложение готово к показу рекламных баннеров.
Ограничение прокрутки на Android 9 и ниже
Мы знаем, что некоторые старые или менее мощные устройства под управлением Android 9 или более ранней версии могут иметь неоптимальную производительность при отображении встроенных рекламных баннеров при прокрутке. Мы рекомендуем использовать эти типы баннеров только на Android 10 или более поздней версии. Баннеры с фиксированным положением, такие как привязанные баннеры, не затрагиваются и могут использоваться с оптимальной производительностью на всех уровнях Android API.