Баннерная реклама занимает место в макете приложения либо вверху, либо внизу экрана устройства. Они остаются на экране, пока пользователи взаимодействуют с приложением, и могут автоматически обновляться через определенный период времени.
Это руководство поможет вам начать работу с привязанными адаптивными баннерами . Прикрепленные адаптивные баннеры оптимизируют размер объявления для каждого устройства с использованием указанной вами ширины объявления.
Закрепленные адаптивные баннеры представляют собой объявления с фиксированным соотношением сторон, а не с фиксированным размером . Соотношение сторон аналогично 320х50. После того как вы укажете полную доступную ширину, Google Mobile Ads SDK вернет объявление с оптимальной высотой для этой ширины. Оптимальная высота объявления остается постоянной для разных запросов объявлений, а контент, окружающий объявление, остается на месте при его обновлении.
Всегда тестируйте с помощью тестовых объявлений
При создании и тестировании приложений убедитесь, что вы используете тестовые объявления, а не действующие, рабочие. Несоблюдение этого требования может привести к блокировке вашего аккаунта.
Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для баннеров:
Андроид
ca-app-pub-3940256099942544/9214589741
iOS
ca-app-pub-3940256099942544/2435281174
Тестовые рекламные блоки настроены на возврат тестовых объявлений по каждому запросу, и вы можете использовать их в своих приложениях при кодировании, тестировании и отладке. Просто убедитесь, что вы заменили их собственными идентификаторами рекламных блоков перед публикацией приложения.
Узнайте размер объявления
Чтобы запросить баннер правильного размера, выполните следующие действия:
Получите ширину экрана устройства в независимых от плотности пикселях (dp), используя
MediaQuery.of(context)
. Если вы не хотите использовать всю ширину экрана, вы можете установить свою собственную ширину.Используйте соответствующий статический метод класса
AdSize
, чтобы получить объектAdSize
. Например, используйтеAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
чтобы получить размер объявления для текущей ориентации.
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
Загрузить объявление
В следующем примере создается экземпляр рекламного баннера:
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/9214589741'
: 'ca-app-pub-3940256099942544/2435281174';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: size,
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();
}
}
Баннерная реклама
Используя 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/9214589741'
: 'ca-app-pub-3940256099942544/2435281174';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: size,
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();
}
}
Обновить объявление
Если вы настроили обновление рекламного блока, вам не нужно запрашивать другое объявление, если оно не загружается. Google Mobile Ads SDK учитывает любую частоту обновления, указанную вами в пользовательском интерфейсе AdMob. Если вы не включили обновление, отправьте новый запрос. Дополнительные сведения об обновлении рекламных блоков, например настройке частоты обновления, см. в разделе Использование автоматического обновления для баннерной рекламы .
Показ рекламного баннера
Чтобы отобразить 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.
Полный пример на GitHub
Полный пример интеграции баннера представлен на этой странице в Banner_example .
Узнайте о других типах баннеров
Ознакомьтесь с другими типами баннеров, определенными в этом разделе для вашего приложения Flutter.
Встроенные адаптивные баннеры
Встроенные адаптивные баннеры имеют переменную высоту и являются более крупными и высокими по сравнению с прикрепленными адаптивными баннерами. Встроенные адаптивные баннеры рекомендуются вместо привязанных адаптивных баннеров для приложений, которые размещают рекламные баннеры в прокручиваемом контенте. Подробнее см. встроенные адаптивные баннеры .
Складные баннеры
Сворачиваемые рекламные баннеры — это рекламные баннеры, которые изначально представляются как наложенное изображение большего размера с кнопкой, позволяющей свернуть объявление до меньшего размера. Рассмотрите возможность использования этого баннера для дальнейшей оптимизации вашей производительности. Более подробную информацию см. в разделе «Складные рекламные баннеры» .