Os modelos nativos são visualizações completas de código para seus anúncios nativos, criados para implementação e fácil modificação. Com modelos nativos, o plug-in fornece layouts pré-criados para Android e iOS, e você pode personalizar o estilo dos recursos nativos usando uma API Dart.
Este guia demonstra como usar a API Dart para estilizar o objeto visualizações da plataforma e renderizar o anúncio.
Pré-requisitos
- Flutter 2.4.0 ou mais recente.
- Leia o Guia explicativo.
- Conheça as opções de anúncios nativos.
Sempre faça testes com anúncios de teste
Ao criar e testar seus apps, use anúncios de teste em vez de anúncios de produção ativos. A maneira mais fácil de carregar anúncios de teste é usar nossa plataforma testar ID do bloco de anúncios para anúncios nativos:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Os blocos de anúncios de teste são configurados para retornar anúncios de teste para cada solicitação. Portanto, você pode usá-las em seus próprios aplicativos enquanto codifica, testa e depuração, basta substituí-los pelos seus próprios IDs de bloco de anúncios antes para publicar seu app.
Carregar anúncio
O exemplo a seguir carrega um anúncio nativo usando o tamanho de medium
nativo.
modelo:
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();
}
}
Consulte
NativeTemplateStyle
e
NativeTemplateTextStyle
para conferir as opções de estilo disponíveis.
Personalizar anúncio
Ao personalizar um anúncio nativo usando modelos nativos, a configuração da interface do usuário
estarão na classe NativeTemplateStyle
, permitindo que você defina o estilo de um
anúncio nativo no código Dart.
Tamanhos dos modelos
Há dois tipos de modelos de anúncios nativos do Flutter: TemplateType.small
e
TemplateType.medium
. O modelo pequeno é ideal para uma TableView
ou
GridView
, para anúncios In-feed ou em qualquer lugar onde você precise de uma visualização de anúncio retangular fino. A
modelo médio deve ser uma visualização de página de meio a três quartos, que é
ideal para páginas de destino ou de apresentação.
Pequeno | |
---|---|
![]() Android |
![]() iOS |
Médio | |
![]() Android |
![]() iOS |
Eventos de anúncios nativos
Para receber notificações sobre eventos relacionados às interações com anúncios nativos, use o
listener
do anúncio. Em seguida, implemente
NativeAdListener
para receber retornos de chamada de evento de anúncio.
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();
}
}
Anúncio de display
Para mostrar um NativeAd
como widget, é necessário instanciar um
AdWidget
com um anúncio compatível após chamar load()
. É possível criar o widget antes
chamando load()
, mas load()
precisa ser chamado antes de ser adicionado ao widget.
árvore.
A AdWidget
herda da classe Widget
do Flutter e pode ser usada como qualquer outra
widget. No iOS, coloque o widget em um contêiner com um
largura e altura. Caso contrário, seu anúncio não será exibido.
// 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!),
);
Descartar anúncio
Um
NativeAd
precisam ser descartados quando o acesso a eles não for mais necessário. A prática recomendada para
quando chamar dispose()
está depois da AdWidget
associada ao anúncio nativo
é removido da árvore de widgets e no AdListener.onAdFailedToLoad()
o retorno de chamada.
Próximas etapas
- Saiba mais sobre os anúncios nativos no nosso anúncio nativo playbook.
- Consulte as políticas de anúncios nativos e diretrizes.
- Confira algumas histórias de sucesso de clientes: estudo de caso 1 estudo de caso 2.