Нативные шаблоны – это представления нативной рекламы с полным кодом, предназначенные для быстрого внедрения и легкой модификации. Благодаря собственным шаблонам плагин предоставляет вам готовые макеты для Android и iOS, и вы можете настроить стиль собственных ресурсов с помощью API Dart.
В этом руководстве показано, как использовать API Dart для стилизации представлений базовой платформы и отображения рекламы.
Предварительные условия
- Флаттер 2.4.0 или выше.
- Заполните руководство по началу работы .
- Ознакомьтесь с вариантами нативной рекламы .
Всегда тестируйте с помощью тестовых объявлений
При создании и тестировании приложений убедитесь, что вы используете тестовые объявления, а не действующие, рабочие. Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для нативной рекламы:
Андроид
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Тестовые рекламные блоки настроены на возврат тестовых объявлений по каждому запросу, поэтому вы можете использовать их в своих приложениях при кодировании, тестировании и отладке — просто не забудьте заменить их собственными идентификаторами рекламных блоков перед публикацией приложения.
Загрузить объявление
В следующем примере нативное объявление загружается с использованием нативного шаблона medium размера:
class NativeExampleState extends State<NativeExample> {
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final String _adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/2247696110'
: 'ca-app-pub-3940256099942544/3986624511';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
debugPrint('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
debugPrint('$NativeAd failed to load: $error');
ad.dispose();
},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
См. NativeTemplateStyle и NativeTemplateTextStyle для доступных параметров стиля.
Настроить объявление
При настройке нативного объявления с использованием нативных шаблонов конфигурация пользовательского интерфейса вашего объявления будет храниться в классе NativeTemplateStyle , что позволит вам стилизовать все нативное объявление с помощью кода Dart.
Размеры шаблонов
Шаблоны собственных объявлений Flutter бывают двух типов: TemplateType.small и TemplateType.medium . Небольшой шаблон идеально подходит для TableView или GridView , для рекламы в ленте или везде, где вам нужно тонкое прямоугольное представление рекламы. Средний шаблон рассчитан на просмотр от половины до трех четвертей страницы, что идеально подходит для целевых страниц или заставок.
| Маленький | |
|---|---|
 Андроид |  iOS |
| Середина | |
 Андроид |  iOS |
События с нативной рекламой
Чтобы получать уведомления о событиях, связанных с взаимодействием с собственными объявлениями, используйте свойство listener объявления. Затем реализуйте NativeAdListener для получения обратных вызовов рекламных событий.
class NativeExampleState extends State<NativeExample> {
NativeAd? _nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final String _adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/2247696110'
: 'ca-app-pub-3940256099942544/3986624511';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
print('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
print('$NativeAd failedToLoad: $error');
ad.dispose();
},
// Called when a click is recorded for a NativeAd.
onAdClicked: (ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (ad) {},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (ad) {},
// For iOS only. Called before dismissing a full screen view
onAdWillDismissScreen: (ad) {},
// Called when an ad receives revenue value.
onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
Медийное объявление
Чтобы отобразить NativeAd в качестве виджета, вы должны создать экземпляр AdWidget с поддерживаемым объявлением после вызова load() . Вы можете создать виджет перед вызовом load() , но load() необходимо вызывать перед добавлением его в дерево виджетов.
AdWidget наследует класс Flutter Widget и может использоваться как любой другой виджет. В iOS убедитесь, что вы поместили виджет в контейнер с указанной шириной и высотой. В противном случае ваше объявление может не отображаться.
// Small template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 90, // minimum recommended height
maxWidth: 400,
maxHeight: 200,
),
child: AdWidget(ad: _nativeAd!),
);
// Medium template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 320, // minimum recommended height
maxWidth: 400,
maxHeight: 400,
),
child: AdWidget(ad: _nativeAd!),
);
Удалить объявление
NativeAd необходимо избавиться, когда доступ к нему больше не нужен. Лучше всего вызывать метод dispose() после удаления AdWidget , связанного с нативным объявлением, из дерева виджетов и в обратном вызове AdListener.onAdFailedToLoad() .
Следующие шаги
- Узнайте больше о нативной рекламе в нашем руководстве по нативной рекламе .
- Ознакомьтесь с правилами и рекомендациями по нативной рекламе .
- Ознакомьтесь с историями успеха клиентов: Практический пример 1 , Практический пример 2 .