Uyarlanabilir banner'lar, reklam boyutunu her cihaz için optimize ederek performansı en üst düzeye çıkaran yeni nesil duyarlı reklamlardır. Yalnızca sabit yükseklikleri destekleyen akıllı banner'lardan daha fazlasını sunan uyarlanabilir banner'lar, reklam genişliğini belirtmenize ve optimum reklam boyutunu belirlemek için bunu kullanmanıza olanak tanır.
Uyarlanabilir banner'lar, en iyi reklam boyutunu seçmek için sabit yükseklikler yerine sabit en boy oranlarını kullanır. Böylece farklı cihazlarda ekranın daha tutarlı bir bölümünü kaplayan banner reklamlar elde edilir ve daha yüksek performans fırsatları sunulur.
Uyarlanabilir banner'larla çalışırken, bu banner'ların belirli bir cihaz ve genişlik için her zaman sabit bir boyut döndüreceğini unutmayın. Belirli bir cihazda düzeninizi test ettikten sonra, reklam boyutunun değişmeyeceğinden emin olabilirsiniz. Bununla birlikte, banner reklam öğesinin boyutu farklı cihazlarda değişebilir. Sonuç olarak, düzeninizin reklam yüksekliğindeki farklılıklara uymasını öneririz. Nadir durumlarda, tam uyarlanabilir boyut doldurulmayabilir ve bunun yerine standart boyutlu bir reklam öğesi bu alana ortalanır.
Ön koşullar
- Başlangıç kılavuzundaki Mobile Ads Flutter eklentisini içe aktarma ile ilgili talimatları uygulayın.
Uyarlanabilir banner'lar ne zaman kullanılır?
Uyarlanabilir banner'lar, hem endüstri standardı 320x50 banner boyutu hem de yerini aldıkları akıllı banner biçimi için aynı anda kullanılabilecek şekilde tasarlanmıştır.
Bu banner boyutları yaygın olarak, genellikle ekranın üst veya alt kısmına kilitlenen sabit banner'lar olarak kullanılır.
Bu tür sabit banner'lar için uyarlanabilir banner'lar kullanılırken en boy oranı, aşağıdaki üç örnekte görülebileceği gibi standart 320x50 reklamına benzer olacaktır:
 320x50 banner |
 Uyarlanabilir banner |
 Akıllı banner |
Uyarlanabilir banner, mevcut ekran boyutunu daha iyi kullanır. Ayrıca, akıllı banner ile karşılaştırıldığında uyarlanabilir banner daha iyi bir seçimdir çünkü:
Genişliği tam ekran yapmaya zorlamak yerine, sağladığınız genişliği kullanır. Böylece iOS'te güvenli alanı ve Android'de ekran kesimlerini dikkate alabilirsiniz.
Farklı boyuttaki cihazlarda sabit bir yüksekliğe sahip olmak yerine belirli bir cihaz için optimum yüksekliği seçerek cihaz parçalanmasının etkilerini azaltır.
Uygulama notları
Uygulamanıza uyarlanabilir banner'lar eklerken aşağıdaki noktaları göz önünde bulundurun:
- Reklamın yerleştirileceği görünümün genişliğini bilmeniz ve cihaz genişliği ve geçerli güvenli alanlar veya kesikler de dikkate alınmalıdır.
- Reklam görüntüleme arka planınızın, reklam alanını doldurmayan daha küçük reklam boyutları yayınlandığında AdMob politikalarıyla uyumlu olması için şeffaf olduğundan emin olun.
- Google Mobil Reklamlar Flutter eklentisinin en son sürümünü kullandığınızdan emin olun.
- Uyarlanabilir banner boyutları, tam kullanılabilir genişlik kullanılırken en iyi sonucu verecek şekilde tasarlanmıştır. Çoğu durumda bu, kullanımdaki cihazın ekranının tam genişliği kadardır. Geçerli güvenli alanları göz önünde bulundurun.
- Google Mobile Ads SDK'sı, uyarlanabilir AdSize API'lerini kullanırken banner'ı belirtilen genişlik için optimize edilmiş bir reklam yüksekliğiyle boyutlandırır.
- Uyarlanabilir reklam boyutu almanın iki yöntemi vardır:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)belirli bir yön için istekte bulunmak veAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)yürütme sırasında geçerli yön için. - Belirli bir cihazda belirli bir genişlik için döndürülen boyut her zaman aynı olacaktır. Bu nedenle, düzeninizi belirli bir cihazda test ettikten sonra, reklam boyutunun değişmeyeceğinden emin olabilirsiniz.
- Sabit banner yüksekliği hiçbir zaman cihaz yüksekliğinin% 15'inden veya 90 yoğunluktan bağımsız pikselden az olan değerden büyük olmaz ve hiçbir zaman 50 yoğunluklu bağımsız pikselden küçük olmamalıdır.
Hızlı Başlangıç
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ılacaktı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 pikseller halinde alın veya
ekranın tam genişliğini kullanmak istemiyorsanız kendi genişliğinizi ayarlayın.
Ekran genişliğini öğrenmek için
MediaQuery.of(context)kullanabilirsiniz. - Geçerli yön için uyarlanabilir
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 pikseller halinde alın veya
ekranın tam genişliğini kullanmak istemiyorsanız kendi genişliğinizi ayarlayın.
Ekran genişliğini öğrenmek için
- Reklam birimi kimliğiniz, uyarlanabilir reklam boyutu ve reklam isteği nesnesiyle bir
BannerAdnesnesi oluşturun. - Reklamı normal bir banner reklam gibi yükleyin ve normal bir reklam
görüntülemesinde olduğu gibi
AdWidgetüzerinden görüntüleyin.
Kod örneği
Aşağıda, ekran genişliğine sığacak sabit bir uyarlanabilir banner yükleyen örnek bir widget 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 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize işlevi, mevcut arayüz yönü için sabit konumdaki bir banner'ın boyutunu almak amacıyla kullanılır. Sabit banner'ı belirli bir yönde önceden yüklemek için AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) özelliğini kullanın ve istediğiniz yönü iletin.