Yerel şablonlar, yerel reklamlarınız için kod tamamlama görünümleridir. Bu görünümler, hızlı uygulama ve kolay değişiklik için tasarlanmıştır. Eklenti, yerel şablonlarla sizin için önceden oluşturulmuş Android ve iOS düzenleri sağlar. Ayrıca, bir Dart API kullanarak yerel öğelerin stilini özelleştirebilirsiniz.
Bu kılavuzda, temel platform görünümlerini biçimlendirmek ve reklam oluşturmak için Dart API'nin nasıl kullanılacağı gösterilmektedir.
Ö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 canlı, üretim reklamları yerine test reklamlarını kullandığınızdan emin olun. Test reklamlarını yüklemenin en kolay yolu, yerel reklamlar için özel test reklam birimi kimliğimizi kullanmaktır:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Test reklam birimleri her istek için test reklamı döndürecek şekilde yapılandırılır. Böylece bunları kodlama, test ve hata ayıklama sırasında kendi uygulamalarınızda kullanabilirsiniz. Uygulamanızı yayınlamadan önce bunları kendi reklam birimi kimliklerinizle değiştirdiğinizden emin olmanız yeterlidir.
Reklam yükle
Aşağıdaki örnek, medium boyutlu yerel şablonu kullanarak bir yerel reklam yükler:
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();
}
}
Kullanılabilir stil seçenekleri için NativeTemplateStyle ve NativeTemplateTextStyle sayfalarına bakın.
Reklamı özelleştir
Yerel şablonları kullanarak bir yerel reklamı özelleştirirken, reklamınızın kullanıcı arayüzü yapılandırması NativeTemplateStyle sınıfında olur ve Dart kodunda tüm yerel reklamın stilini belirlemenize olanak tanır.
Şablon boyutları
Flutter yerel reklam şablonları iki türde sunulur: TemplateType.small ve
TemplateType.medium. Küçük şablon, feed içi reklamlar veya dikdörtgen biçiminde ince bir reklam görünümüne ihtiyaç duyduğunuz her yerde TableView veya GridView için idealdir. Aracı şablonunun yarım ila dörtte üç sayfa görüntülemesi olduğu düşünülür. Bu, açılış veya başlangıç sayfaları için idealdir.
| Küçük | |
|---|---|
 Android |
 iOS |
| Aracı | |
 Android |
 iOS |
Yerel reklam etkinlikleri
Yerel reklam etkileşimleriyle ilgili etkinlikler hakkında bildirim almak için reklamın listener özelliğini kullanın. Ardından, reklam etkinliği geri çağırmaları almak için NativeAdListener uygulayın.
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
Bir NativeAd öğesini widget olarak görüntülemek için load() çağrısından sonra desteklenen bir reklamla bir AdWidget örneği oluşturmanız gerekir. Widget'ı load() çağrısı yapmadan önce oluşturabilirsiniz, ancak widget ağacına eklenmeden önce load() çağrılmalıdır.
AdWidget, Flutter'ın Widget sınıfından devralır ve diğer herhangi bir widget gibi kullanılabilir. iOS'te, widget'ı belirli bir genişlik ve yüksekliğe sahip bir kapsayıcıya yerleştirdiğinizden emin olun. Aksi takdirde, reklamınız görüntülenmeyebilir.
// 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ı kaldır
Artık erişim gerekli olmadığında NativeAd imha edilmelidir. dispose() çağrısının ne zaman yapılacağına ilişkin en iyi uygulama, yerel reklamla ilişkili AdWidget öğesinin widget ağacından ve AdListener.onAdFailedToLoad() geri çağırmasından kaldırılmasından sonra olmasıdır.
Sonraki adımlar
- Yerel reklam başucu kitabımızda yerel reklamlar hakkında daha fazla bilgi edinin.
- Yerel reklam politikaları ve yönergelerini inceleyin.
- Bazı müşteri başarı hikayelerine göz atın: Örnek olay 1, örnek olay 2.