Banner reklamlar, uygulama düzeninde cihaz ekranının üst veya alt kısmında bir yer kaplar. Bu reklamlar, kullanıcılar uygulamayla etkileşimde bulunurken ekranda kalır ve belirli bir süre sonra otomatik olarak yenilenebilir.
Bu kılavuzda, AdMob'daki banner reklamların Flutter uygulamasına nasıl entegre edileceği gösterilmektedir. Kod snippet'leri ve talimatların yanı sıra banner'ların doğru boyutlandırmasıyla ilgili bilgiler de bulunmaktadır.
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. Bunu yapmazsanız hesabınız askıya alınabilir.
Test reklamlarını yüklemenin en kolay yolu, banner'lar için özel test reklam birimi kimliğimizi kullanmaktır:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
Test reklam birimleri her istek için test reklamları döndürecek şekilde yapılandırılır. Bu reklam birimlerini kodlama, test ve hata ayıklama sırasında kendi uygulamalarınızda da kullanabilirsiniz. Yalnızca uygulamanızı yayınlamadan önce bunları kendi reklam birimi kimliklerinizle değiştirdiğinizden emin olun.
Reklam yükle
Aşağıdaki örnekte bir banner reklam örneği gösterilmektedir:
class BannerExampleState extends State<BannerExample> {
BannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
/// Loads a banner ad.
void loadAd() {
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('BannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
),
)..load();
}
}
Banner boyutları
Aşağıdaki tabloda standart banner boyutları listelenmiştir.
| dp cinsinden boyut (GxY) | Açıklama | Reklam Boyutu Sabiti |
|---|---|---|
| 320x50 | Standart Banner | banner
|
| 320x100 | Büyük Banner | largeBanner
|
| 320x250 | Orta boy dikdörtgen | mediumRectangle
|
| 468x60 | Tam Boyutlu Banner | fullBanner
|
| 728x90 | Büyük afiş | leaderboard
|
| Sağlanan genişlik x Uyarlanabilir yükseklik | Uyarlanabilir banner | Yok |
Özel bir banner boyutu tanımlamak için tercih ettiğiniz AdSize değerini ayarlayın:
final AdSize adSize = AdSize(300, 50);
Banner reklam etkinlikleri
BannerAdListener kullanarak yaşam döngüsü olaylarını (ör. bir reklamın yüklenmesi) dinleyebilirsiniz. Bu örnekte her bir yöntem uygulanır ve konsola bir mesaj kaydedilir:
class BannerExampleState extends State<BannerExample> {
BannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
/// Loads a banner ad.
void loadAd() {
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('BannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (Ad ad) {},
),
)..load();
}
}
Banner reklam görüntüleyin
Bir BannerAd öğesini widget olarak görüntülemek için load() çağırdıktan 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ını devralır ve diğer herhangi bir widget gibi kullanılabilir. iOS'te, widget'ı belirli bir genişlik ve yükseklikte bir widget'a yerleştirdiğinizden emin olun. Aksi takdirde, reklamınız görüntülenmeyebilir. BannerAd, reklamla eşleşen bir boyuta sahip bir kapsayıcıya yerleştirilebilir:
...
if (_bannerAd != null) {
Align(
alignment: Alignment.bottomCenter,
child: SafeArea(
child: SizedBox(
width: _bannerAd!.size.width.toDouble(),
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
),
)
}
...
Artık erişim gerektirmeyen reklamlar imha edilmelidir. dispose() çağrısının ne zaman yapılacağına ilişkin en iyi uygulama, AdWidget öğesinin widget ağacından kaldırıldıktan sonra veya BannerAdListener.onAdFailedToLoad() geri çağırmasından sonra çağrılmasıdır.
İşte bu kadar. Uygulamanız artık banner reklam göstermeye hazır.
Android 9 ve önceki sürümlerde kaydırma sınırlaması
Android 9 veya önceki sürümleri çalıştıran eski ya da daha eski bazı cihazların, kaydırma görünümlerinde satır içi banner reklamlar gösterirken optimum düzeyde performans göstermeyebileceğinin farkındayız. Bu tür banner'ları yalnızca Android 10 veya sonraki sürümlerde kullanmanızı öneririz. Sabit banner'lar gibi sabit konumlu banner'lar bu durumdan etkilenmez ve tüm Android API düzeylerinde optimum performansla kullanılabilir.