Рекламные баннеры занимают место в макете приложения, либо в верхней, либо в нижней части экрана устройства. Они остаются на экране, пока пользователи взаимодействуют с приложением, и могут автоматически обновляться через определённый промежуток времени.
Это руководство поможет вам начать работу с закреплёнными адаптивными баннерами . Закреплённые адаптивные баннеры оптимизируют размер рекламы для каждого устройства, используя указанную вами ширину.
Закреплённые адаптивные баннеры — это объявления с фиксированным соотношением сторон, а не с фиксированным размером . Соотношение сторон аналогично 320x50. После указания полной доступной ширины 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 наследует класс Widget от Flutter и может использоваться как любой другой виджет. На 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 и более поздних версиях. Фиксированные баннеры, такие как закрепленные, не подвержены этой проблеме и могут использоваться с оптимальной производительностью на всех уровнях API Android.
Полный пример на GitHub
Полный пример интеграции баннера, описанный на этой странице, смотрите в banner_example .
Узнайте о других типах баннеров
Ознакомьтесь с другими типами баннеров, определенными в этом разделе для вашего приложения Flutter.
Встроенные адаптивные баннеры
Встроенные адаптивные баннеры имеют переменную высоту и отличаются большим размером и высотой по сравнению с закреплёнными адаптивными баннерами. Встроенные адаптивные баннеры рекомендуются для приложений, размещающих рекламу в прокручиваемом контенте, а не закреплённые адаптивные баннеры. Подробнее см. в разделе «Встроенные адаптивные баннеры» .
Складные баннеры
Сворачиваемые баннеры — это баннеры, которые изначально отображаются в виде увеличенного наложения с кнопкой, позволяющей свернуть объявление до меньшего размера. Рассмотрите возможность использования этого баннера для дальнейшей оптимизации эффективности. Подробнее см. в разделе «Сворачиваемые баннеры» .