Yerel şablonlar, yerel reklamlarınız için kod tamamlamalı görünümlerdir ve hızlı sonuçlar vermek için tasarlanmıştır. ve kolay değişiklik yapabilirsiniz. Eklenti, yerel şablonlar sayesinde sizin için önceden oluşturulmuş Android ve iOS düzenlerini kullanabilir ve yerel öğeler için Dart API'si kullanmanıza olanak tanır.
Bu kılavuzda, bir Dart API'sinin nasıl kullanılacağı ve böylece ve reklamı görüntülemek için de kullanılabilir.
Ön koşullar
- Flutter 2.4.0 veya sonraki sürümler.
- Başlangıç kılavuzunu tamamlayın.
- Yerel reklam seçenekleri hakkında bilgi edinin.
Her zaman test reklamlarıyla test etme
Uygulamalarınızı oluştururken ve test ederken, uygulamalarınızın yanı sıra üretim reklamlarıdır. Test reklamlarını yüklemenin en kolay yolu, doğal reklamlar için test reklam birimi kimliği:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Test reklam birimleri her istek için test reklamları döndürecek şekilde yapılandırılır. Bu yüzden, kod yazma, test ve tamamlama aşamalarında bunları kendi uygulamalarınızda hata ayıklamadan önce bunları kendi reklam birimi kimliklerinizle değiştirdiğinizden en iyi uygulamaları paylaşacağız.
Reklam yükle
Aşağıdaki örnekte, medium boyutunda yerel reklam kullanılarak bir yerel reklam yükleniyor
şablon:
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();
}
}
Görüntüleyin
NativeTemplateStyle
ve
NativeTemplateTextStyle
seçeneğini tıklayın.
Reklamı özelleştir
Yerel şablonları kullanarak yerel reklamları özelleştirirken reklamınızın kullanıcı arayüzü yapılandırması
NativeTemplateStyle sınıfında yayınlanacak, böylece tüm
yerel reklam hakkında daha fazla bilgi edinin.
Şablon boyutları
Flutter doğal reklam şablonları iki türde sunulur: TemplateType.small ve
TemplateType.medium. Küçük şablon, TableView veya
GridView, feed içi reklamlar için veya ince bir dikdörtgen reklam görünümüne ihtiyaç duyduğunuz her yerde. İlgili içeriği oluşturmak için kullanılan
orta boy şablonun, sayfa görüntülemenin yarım veya üç çeyreklik bir dilimde olması amaçlanmıştır.
açılış veya başlangıç sayfaları için idealdir.
| Küçük | |
|---|---|
 Android |
 iOS |
| Aracı | |
 Android |
 iOS |
Yerel reklam etkinlikleri
Doğal reklam etkileşimleriyle ilgili etkinlikler hakkında bildirim almak için şunu kullanın:
listener
özelliğini kullanın. Daha sonra
NativeAdListener
almak için bu seçeneği belirleyin.
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();
}
}
Görüntülü reklam
NativeAd öğesini widget olarak görüntülemek için bir örnek göstermeniz gerekir
AdWidget
load() çağırdıktan sonra desteklenen bir reklamla. Widget'ı, oluşturma işleminden önce
load() aranıyor, ancak widget'a eklenmeden önce load() çağrılmalıdır
ağacı.
AdWidget, Flutter'ın Widget sınıfından devralır ve başkaları gibi kullanılabilir
widget'ını tıklayın. iOS'te, widget'ı belirtilen bir kapsayıcıya yerleştirdiğinizden emin olun.
ve yüksekliği belirtmelisiniz. Aksi takdirde, reklamınız gösterilmeyebilir.
// 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!),
);
Reklamı iptal et
CEVAP
NativeAd
artık erişim gerekli olmadığında imha edilmelidir. En iyi uygulama,
dispose(), yerel reklamla ilişkilendirilmiş AdWidget öğesinden sonra ne zaman çağrılır?
öğesi, widget ağacından ve AdListener.onAdFailedToLoad() bölümünden kaldırılır
geri arama.
Sonraki adımlar
- Yerel reklamımızda doğal reklamlar hakkında daha fazla bilgi edinin başucu kitabını inceleyin.
- Yerel reklam politikaları ve yönergelerimize bakın.
- Bazı müşteri başarı öykülerine göz atın: Örnek olay 1, örnek olay 2.