Uyarlanabilir banner'lar, yeni nesil duyarlı reklamlardır ve reklam boyutunu her cihaz için optimize ederek performansı en üst düzeye çıkarır. Yalnızca sabit yükseklikleri destekleyen akıllı banner'lardan daha iyi bir şekilde yararlanan uyarlanabilir banner'lar, reklam genişliğini belirtmenize ve optimum reklam boyutunu belirlemek için bunu kullanmanıza olanak tanı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ın daha tutarlı bir bölümünü kaplayan banner reklamlar elde edilir ve performans artışı için fırsatlar sunulur.
Uyarlanabilir banner'larla çalışırken, belirli bir cihaz ve genişlik için daima sabit bir boyut döndüreceklerini unutmayın. Belirli bir cihazda düzeninizi test ettikten sonra, reklam boyutunun değişmeyeceğinden emin olabilirsiniz. Ancak, banner reklam öğesinin boyutu farklı cihazlara göre değişebilir. Bu nedenle, düzeninizin reklam yüksekliğindeki farklılıklara uymasını öneririz. Nadir durumlarda, uyarlanabilir tam boyut doldurulmayabilir ve bunun yerine, standart boyutlu bir reklam öğesi bu alanda ortalanır.
Ön koşullar
- Mobile Ads Flutter eklentisini içe aktarma ile ilgili Başlangıç kılavuzundaki talimatları uygulayın.
Uyarlanabilir banner'lar ne zaman kullanılır?
Uyarlanabilir banner'lar, hem endüstri standardı 320x50 banner boyutunun hem de yerini aldıkları akıllı banner biçiminin yerini alacak şekilde tasarlanmıştır.
Bu banner boyutları genellikle sabit banner'lar olarak kullanılır ve genellikle ekranın üst veya alt kısmına kilitlenir.
Bu tür sabit banner'lar için uyarlanabilir banner'ların kullanıldığı sırada en boy oranı, aşağıdaki üç örnekte görüldüğü gibi standart bir 320x50 reklamınkine 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çenektir çünkü:
Genişliği tam ekran olacak şekilde zorlamak yerine sağladığınız herhangi bir genişliği kullanır. Böylece iOS'te güvenli alanı hesaba katabilir ve Android'de kesimleri gösterebilirsiniz.
Farklı boyutlu cihazlarda sabit bir yüksekliğe sahip olmak yerine söz konusu 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 ve bunun için cihaz genişliğinin yanı sıra geçerli olan güvenli alanları veya kesimleri dikkate almanız gerekir.
- Reklam alanını doldurmayan daha küçük reklam boyutları sunulduğunda, reklam görüntüleme arka planınızın AdMob politikalarıyla uyumlu olmak için 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 tam genişlik kullanıldığında en iyi sonucu verecek ş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'lerini kullanırken banner'ı belirtilen genişlik için optimize edilmiş bir reklam yüksekliğiyle boyutlandırır.
- Uyarlanabilir reklam boyutunu almanın iki yöntemi vardır:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)belirli bir yön için istekte bulunmak ve uygulama sırasında geçerli 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, belirli bir cihazda düzeninizi 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ğunluklu bağımsız pikselden daha az olamaz ve hiçbir zaman yoğunluktaki bağımsız pikselden 50'den az olamaz.
Hızlı Başlangıç
Basit bir sabit uyarlanabilir banner uygulamak için aşağıdaki adımları izleyin.
- 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 piksel olarak öğrenin 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. - Reklam boyutu sınıfında, geçerli yön için uyarlanabilir
AdSizenesnesi almak amacıylaAdSize.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 öğrenmek için
- Reklam birimi kimliğiniz, uyarlanabilir reklam boyutu ve reklam isteği nesnesiyle bir
BannerAdnesnesi oluşturun. - Reklamı normal bir banner reklamda olduğu gibi yükleyin ve bir
AdWidgetüzerinden normal reklam görünümünde olduğu gibi görüntüleyin.
Kod örneği
Aşağıda, ekranın genişliğine sığacak şekilde sabit bir uyarlanabilir banner yükleyen bir örnek 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, geçerli arayüz yönü için sabit konumdaki bir banner'ın boyutunu almak için 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 örneği tamamlayın
Örneğin tamamını görüntülemek için GitHub deposundaki Banner Örneği'ne bakın.