Uyarlanabilir banner'lar, yeni nesil duyarlı reklamlardır ve reklam boyutunu her cihaz için optimize ederek performansı artırır. Uyarlanabilir banner'lar, yalnızca sabit yükseklikleri destekleyen akıllı banner'lardan gelişmiş versiyonudur. Reklamverenler bu banner'lar için reklam genişliğini belirtebilir. Bu genişlik, en uygun reklam boyutunu belirlemek için kullanılır.
En iyi reklam boyutunu seçmek için uyarlanabilir banner'lar sabit yükseklik yerine sabit en boy oranlarını kullanır. Böylece farklı cihazlarda ekranı daha tutarlı bir şekilde kaplayan banner reklamlar elde edilebilir ve performans artışından yararlanılabilir.
Uyarlanabilir banner'larla çalışırken, belirli bir cihaz ve genişlik için daima sabit bir boyut döndürüleceğini unutmayın. Sayfa düzeninizi belirli bir cihazda test ettikten sonra reklam boyutunun değişmeyeceğinden emin olabilirsiniz. Ancak banner reklam öğesinin boyutu farklı cihazlarda değişiklik gösterebilir. Bu nedenle, düzeninizin reklam yüksekliğindeki farklılıkları karşılamasını öneririz. Nadir durumlarda, tam uyarlanabilir boyut doldurulmayabilir ve bunun yerine bu alana standart boyutlu bir reklam öğesi yerleştirilebilir.
Ön koşullar
- Mobil Reklamlar Flutter eklentisini içe aktarma ile ilgili Başlangıç kılavuzundaki talimatları uygulayın.
Uyarlanabilir banner'ları ne zaman kullanmalısınız?
Uyarlanabilir banner'lar, hem sektör standardı olan 320x50 banner boyutu hem de yerine geçtikleri akıllı banner biçimi için doğrudan uygulanabilen bir alternatif olacak şekilde tasarlanmıştır.
Bu banner boyutları genellikle ekranın üst veya alt kısmına sabitlenmiş sabit banner'lar olarak kullanılır.
Bu tür sabit banner'larda, uyarlanabilir banner'lar kullanıldığında en boy oranı aşağıdaki üç örnekte görüldüğü gibi standart bir 320x50 reklama benzer olacaktır:
 320x50 banner |
 Uyarlanabilir banner |
 Akıllı banner |
Uyarlanabilir banner, mevcut ekran boyutundan daha iyi yararlanır. Ayrıca, uyarlanabilir banner, akıllı banner'lara kıyasla daha iyi bir seçimdir çünkü:
Genişliği tam ekrana zorlamak yerine sağladığınız genişliği kullanır. Böylece iOS'te güvenli alanı hesaba katabilir ve Android'de kesitleri görüntüleyebilirsiniz.
Farklı boyutlardaki cihazlarda sabit bir yükseklik kullanmak yerine belirli cihaz için optimum yüksekliği seçerek cihaz parçalanmasının etkilerini azaltır.
Uygulama notları
Uygulamanızda uyarlanabilir banner'ları uygularken aşağıdaki noktaları göz önünde bulundurun:
- Reklamın yerleştirileceği görünümün genişliğini bilmeniz gerekir. Bu genişlik, cihaz genişliğini ve geçerli olan tüm güvenli alanları veya kesikleri dikkate almalıdır.
- Reklam alanı boyutunu doldurmayan daha küçük reklam boyutları yayınlandığında AdMob politikalarına uygun olması için reklam görüntüleme arka planınızın opak olduğundan emin olun.
- Google Mobile Ads Flutter eklentisinin en son sürümünü kullandığınızdan emin olun.
- Uyarlanabilir banner boyutları, mevcut genişliğin tamamı kullanıldığında en iyi şekilde çalışacak şekilde tasarlanmıştır. Çoğu durumda, bu değer, kullanılan cihazın ekranının tam genişliği olur. Geçerli güvenli alanları dikkate aldığınızdan emin olun.
- Google Mobile Ads SDK'sı, uyarlanabilir AdSize API'leri kullanırken banner'ı belirli bir genişlik için optimize edilmiş reklam yüksekliğiyle boyutlandırır.
- Uyarlanabilir reklam boyutu almak için iki yöntem vardır: belirli bir yön için
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)ve yürütme sırasındaki mevcut yön içinAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width). - Belirli bir cihazda belirli bir genişlik için döndürülen boyut her zaman aynı olur. Bu nedenle, yerleşiminizi belirli bir cihazda test ettikten sonra reklam boyutunun değişmeyeceğinden emin olabilirsiniz.
- Sabitlenmiş banner yüksekliği, cihazın yüksekliğinin %15'inden veya 90 yoğunluk bağımsız pikselden hangisi daha küçükse ondan büyük olamaz ve 50 yoğunluk bağımsız pikselden küçük olamaz.
Hızlı başlangıç kılavuzu
Basit bir sabitlenmiş uyarlanabilir banner uygulamak için aşağıdaki adımları uygulayın.
- Uyarlanabilir banner reklam boyutu alın. Aldığınız boyut, uyarlanabilir banner'ınızı istemek için kullanılır. Uyarlanabilir reklam boyutunu almak için aşağıdakileri yaptığınızdan emin olun:
- Kullanılan cihazın genişliğini yoğunluktan bağımsız piksel olarak öğrenin veya ekranın tam genişliğini kullanmak istemiyorsanız kendi genişliğinizi ayarlayın.
Ekran genişliğini almak için
MediaQuery.of(context)değerini kullanabilirsiniz. - Mevcut yön için uyarlanabilir bir
AdSizenesnesi almak üzere reklam boyutu sınıfındaAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)gibi uygun statik yöntemleri kullanın.
- Kullanılan cihazın genişliğini yoğunluktan bağımsız piksel olarak öğrenin veya ekranın tam genişliğini kullanmak istemiyorsanız kendi genişliğinizi ayarlayın.
Ekran genişliğini almak için
- Reklam birimi kimliğinizi, uyarlanabilir reklam boyutunu ve bir reklam isteği nesnesini içeren bir
BannerAdnesnesi oluşturun. - Reklamı normal bir banner reklam gibi yükleyin ve normal bir reklam görüntülemesi gibi
AdWidget'den gösterin.
Kod örneği
Aşağıda, ekranın genişliğine sığacak şekilde sabit uyarlanabilir banner yükleyen bir widget örneği verilmiştir:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
@override
_AnchoredAdaptiveExampleState createState() =>
_AnchoredAdaptiveExampleState();
}
class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
BannerAd? _anchoredAdaptiveAd;
bool _isLoaded = false;
@override
void didChangeDependencies() {
super.didChangeDependencies();
_loadAd();
}
Future<void> _loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final AnchoredAdaptiveBannerAdSize? size =
await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.of(context).size.width.truncate());
if (size == null) {
print('Unable to get height of anchored banner.');
return;
}
_anchoredAdaptiveAd = BannerAd(
// TODO: replace these test ad units with your own ad unit.
adUnitId: Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716',
size: size,
request: AdRequest(),
listener: BannerAdListener(
onAdLoaded: (Ad ad) {
print('$ad loaded: ${ad.responseInfo}');
setState(() {
// When the ad is loaded, get the ad size and use it to set
// the height of the ad container.
_anchoredAdaptiveAd = ad as BannerAd;
_isLoaded = true;
});
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('Anchored adaptive banner failedToLoad: $error');
ad.dispose();
},
),
);
return _anchoredAdaptiveAd!.load();
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Anchored adaptive banner example'),
),
body: Center(
child: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
itemBuilder: (context, index) {
return Text(
'Placeholder text',
style: TextStyle(fontSize: 24),
);
},
separatorBuilder: (context, index) {
return Container(height: 40);
},
itemCount: 20),
if (_anchoredAdaptiveAd != null && _isLoaded)
Container(
color: Colors.green,
width: _anchoredAdaptiveAd!.size.width.toDouble(),
height: _anchoredAdaptiveAd!.size.height.toDouble(),
child: AdWidget(ad: _anchoredAdaptiveAd!),
)
],
),
),
);
@override
void dispose() {
super.dispose();
_anchoredAdaptiveAd?.dispose();
}
}
Burada, mevcut arayüz yönü için sabit konumdaki bir banner'ın boyutunu almak üzere AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize işlevi kullanılır. Sabit bir banner'ı belirli bir yönde önceden yüklemek için AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) kullanın ve istediğiniz yönü iletin.
GitHub'daki tam örnek
Örneğin tamamını görüntülemek için GitHub deposundaki Banner Örneği'ne bakın.