Адаптивные баннеры — это новое поколение адаптивной рекламы, обеспечивающее максимальную эффективность за счет оптимизации размера рекламы для каждого устройства. В отличие от смарт-баннеров, которые поддерживают только фиксированную высоту, адаптивные баннеры позволяют указать ширину объявления и использовать ее для определения оптимального размера объявления.
Чтобы выбрать лучший размер объявления, в адаптивных баннерах используются фиксированные соотношения сторон вместо фиксированной высоты. В результате рекламные баннеры занимают более постоянную часть экрана на всех устройствах и предоставляют возможности для повышения производительности.
При работе с адаптивными баннерами обратите внимание, что они всегда будут возвращать постоянный размер для данного устройства и ширины. Протестировав макет на конкретном устройстве, вы можете быть уверены, что размер объявления не изменится. Однако размер баннера может меняться на разных устройствах. Следовательно, мы рекомендуем учитывать разницу в высоте объявления в макете. В редких случаях полный адаптивный размер может оказаться не заполненным, и вместо этого в этом месте будет размещено объявление стандартного размера.
Предварительные условия
- Следуйте инструкциям из руководства по началу работы о том, как импортировать плагин Flutter для мобильной рекламы .
Когда использовать адаптивные баннеры
Адаптивные баннеры предназначены для полной замены как стандартного размера баннера 320x50, так и формата смарт-баннера, который они заменяют.
Эти размеры баннеров обычно используются в качестве привязанных баннеров, которые обычно закрепляются в верхней или нижней части экрана.
Для таких привязанных баннеров соотношение сторон при использовании адаптивных баннеров будет аналогично соотношению стандартной рекламы размером 320x50, как это видно на трех примерах ниже:
 баннер 320х50 |  Адаптивный баннер |  Смарт-баннер |
Адаптивный баннер позволяет лучше использовать доступный размер экрана. Кроме того, по сравнению со смарт-баннером, адаптивный баннер является лучшим выбором, потому что:
Он использует любую предоставленную вами ширину вместо принудительного полноэкранного режима, что позволяет вам учитывать безопасную область на iOS и отображать вырезы на Android.
Он выбирает оптимальную высоту для конкретного устройства, а не постоянную высоту для устройств разных размеров, что смягчает последствия фрагментации устройства.
Замечания по реализации
При внедрении адаптивных баннеров в свое приложение учитывайте следующие моменты:
- Вы должны знать ширину обзора, в котором будет размещено объявление, при этом следует учитывать ширину устройства и любые применимые безопасные области или вырезы .
- Убедитесь, что фон вашего объявления непрозрачен, чтобы соответствовать правилам AdMob при показе объявлений меньшего размера, которые не заполняют рекламное место.
- Убедитесь, что вы используете последнюю версию плагина Google Mobile Ads Flutter.
- Адаптивные размеры баннеров разработаны таким образом, чтобы лучше всего работать при использовании полной доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Обязательно примите во внимание соответствующие безопасные зоны.
- Google Mobile Ads SDK определит размер баннера с оптимизированной высотой объявления для заданной ширины при использовании адаптивных API AdSize.
- Существует два метода получения размера адаптивного объявления:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)для запроса определенной ориентации иAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)для текущей ориентации на момент выполнения. - Размер, возвращаемый для заданной ширины на данном устройстве, всегда будет одинаковым, поэтому, протестировав макет на данном устройстве, вы можете быть уверены, что размер объявления не изменится.
- Высота закрепленного баннера никогда не превышает 15% высоты устройства или 90 пикселей, не зависящих от плотности, и никогда не меньше 50 пикселей, не зависящих от плотности.
Быстрый старт
Следуйте инструкциям ниже, чтобы создать простой привязанный адаптивный баннер.
- Получите адаптивный размер баннера. Полученный вами размер будет использован для запроса адаптивного баннера. Чтобы получить размер адаптивного объявления, убедитесь, что вы:
- Получите ширину используемого устройства в пикселях, не зависящих от плотности, или установите собственную ширину, если вы не хотите использовать всю ширину экрана. Вы можете использовать
MediaQuery.of(context)чтобы получить ширину экрана. - Используйте соответствующие статические методы класса размера объявления, например
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)чтобы получить адаптивный объектAdSizeдля текущей ориентации.
- Получите ширину используемого устройства в пикселях, не зависящих от плотности, или установите собственную ширину, если вы не хотите использовать всю ширину экрана. Вы можете использовать
- Создайте объект
BannerAd, указав идентификатор рекламного блока, размер адаптивного объявления и объект запроса объявления. - Загрузите рекламу, как обычный рекламный баннер, и отобразите ее с помощью
AdWidgetкак при обычном просмотре рекламы.
Пример кода
Вот пример виджета, который загружает привязанный адаптивный баннер по ширине экрана:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
@override
_AnchoredAdaptiveExampleState createState() =>
_AnchoredAdaptiveExampleState();
}
class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
BannerAd? _anchoredAdaptiveAd;
bool _isLoaded = false;
@override
void didChangeDependencies() {
super.didChangeDependencies();
_loadAd();
}
Future<void> _loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final AnchoredAdaptiveBannerAdSize? size =
await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.of(context).size.width.truncate());
if (size == null) {
print('Unable to get height of anchored banner.');
return;
}
_anchoredAdaptiveAd = BannerAd(
// TODO: replace these test ad units with your own ad unit.
adUnitId: Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716',
size: size,
request: AdRequest(),
listener: BannerAdListener(
onAdLoaded: (Ad ad) {
print('$ad loaded: ${ad.responseInfo}');
setState(() {
// When the ad is loaded, get the ad size and use it to set
// the height of the ad container.
_anchoredAdaptiveAd = ad as BannerAd;
_isLoaded = true;
});
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('Anchored adaptive banner failedToLoad: $error');
ad.dispose();
},
),
);
return _anchoredAdaptiveAd!.load();
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Anchored adaptive banner example'),
),
body: Center(
child: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
itemBuilder: (context, index) {
return Text(
'Placeholder text',
style: TextStyle(fontSize: 24),
);
},
separatorBuilder: (context, index) {
return Container(height: 40);
},
itemCount: 20),
if (_anchoredAdaptiveAd != null && _isLoaded)
Container(
color: Colors.green,
width: _anchoredAdaptiveAd!.size.width.toDouble(),
height: _anchoredAdaptiveAd!.size.height.toDouble(),
child: AdWidget(ad: _anchoredAdaptiveAd!),
)
],
),
),
);
@override
void dispose() {
super.dispose();
_anchoredAdaptiveAd?.dispose();
}
}
Здесь функция AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize используется для получения размера баннера в закрепленном положении для текущей ориентации интерфейса. Для предварительной загрузки закрепленного баннера в заданной ориентации используйте AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) и передайте желаемую ориентацию.
Полный пример на GitHub
Полный пример можно посмотреть в примере баннера репозитория GitHub.