Banner reklamlar, uygulama düzeninin bir kısmını kaplayan dikdörtgen reklamlardır. Kullanıcılar uygulama ile etkileşimde bulunurken ekranın üst veya alt kısmına sabitlenmiş olarak ya da kullanıcı sayfayı kaydırırken içerikle satır içi şekilde kalırlar. Banner reklamlar, belirli bir süre sonra otomatik olarak yenilenebilir. Daha fazla bilgi için Banner reklamlara genel bakış başlıklı makaleyi inceleyin.
Bu kılavuzda, reklam boyutunu belirttiğiniz bir reklam genişliği kullanarak her cihaz için optimize ederek performansı en üst düzeye çıkaran sabit uyarlanabilir banner reklamları kullanmaya nasıl başlayacağınız açıklanmaktadır.
Sabit uyarlanabilir banner
Sabit uyarlanabilir banner reklamlar, normal sabit boyutlu reklamlar yerine sabit en boy oranına sahip reklamlardır. En boy oranı, 320x50 sektör standardına benzer. Mevcut tam genişliği belirttikten sonra, bu genişlik için optimum yüksekliğe sahip bir reklam döndürülür. Optimum yükseklik, aynı cihazdan gelen isteklerde değişmez ve reklam yenilendiğinde çevredeki görünümlerin hareket etmesine gerek yoktur.
Ön koşullar
- Başlangıç kılavuzunu tamamlayın.
Her zaman test reklamlarıyla test yapın
Uygulamalarınızı oluşturup test ederken canlı üretim reklamları yerine test reklamları kullandığınızdan emin olun. Aksi takdirde hesabınız askıya alınabilir.
Test reklamlarını yüklemenin en kolay yolu, iOS banner'ları için özel test reklam birimi kimliğimizi kullanmaktır:
ca-app-pub-3940256099942544/2435281174
Her istek için test reklamları döndürecek şekilde özel olarak yapılandırılmıştır. Kodlama, test etme ve hata ayıklama sırasında kendi uygulamalarınızda kullanabilirsiniz. Uygulamanızı yayınlamadan önce bu kimliği kendi reklam birimi kimliğinizle değiştirmeniz yeterlidir.
Mobile Ads SDK'sının test reklamlarının işleyiş şekli hakkında daha fazla bilgi için Test Reklamları başlıklı makaleyi inceleyin.
GADBannerView oluşturma
Banner reklamlar GADBannerView
nesnelerinde gösterilir. Bu nedenle, banner reklamları entegre etmenin ilk adımı, görünüm hiyerarşinize bir GADBannerView
eklemektir. Bu işlem genellikle programatik olarak veya Interface Builder aracılığıyla yapılır.
Programatik
GADBannerView
doğrudan da oluşturulabilir.
Aşağıdaki örnekte bir GADBannerView
oluşturulmaktadır:
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
// Here the current interface orientation is used. Use
// GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
// GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
// particular orientation,
let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView = GADBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
}
SwiftUI
GADBannerView
kullanmak için UIViewRepresentable
oluşturun:
private struct BannerView: UIViewRepresentable {
let adSize: GADAdSize
init(_ adSize: GADAdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> UIView {
// Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
// frame size changes; wrapping in a UIView container insulates the GADBannerView from size
// changes that impact the view returned from makeUIView.
let view = UIView()
view.addSubview(context.coordinator.bannerView)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
context.coordinator.bannerView.adSize = adSize
}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
GADBannerView
öğesinin başlatılmasını ve davranışını yönetmek için bir Coordinator
oluşturun:
class BannerCoordinator: NSObject, GADBannerViewDelegate {
private(set) lazy var bannerView: GADBannerView = {
let banner = GADBannerView(adSize: parent.adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
banner.delegate = self
return banner
}()
let parent: BannerView
init(_ parent: BannerView) {
self.parent = parent
}
Görünümün genişliğini almak için GeometryReader
değerini kullanın. Bu sınıf, mevcut cihaz yönü için uygun reklam boyutunu hesaplar. frame
, reklam boyutundan hesaplanan yüksekliğe ayarlanır.
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Objective-C
Bu durumda, sağlanan reklam boyutu banner'a görünümün boyutunu ayarlamak için doğal bir içerik boyutu vereceğinden, genişlik veya yükseklik kısıtlamaları sağlamadığımızı unutmayın.
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Here safe area is taken into account, hence the view frame is used after the
// view has been laid out.
CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
CGFloat viewWidth = frame.size.width;
// Here the current interface orientation is used. If the ad is being preloaded
// for a future orientation change or different orientation, the function for the
// relevant orientation should be used.
GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
// In this case, we instantiate the banner with desired ad size.
self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];
[self addBannerViewToView:self.bannerView];
}
- (void)addBannerViewToView:(UIView *)bannerView {
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bannerView];
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
[self.view addConstraints:@[
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view.safeAreaLayoutGuide
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0],
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]
]];
}
@end
Interface Builder
Bir taslak tahtasına veya xib dosyasına GADBannerView
ekleyebilirsiniz. Bu yöntemi kullanırken yalnızca banner'a konum kısıtlamaları eklediğinizden emin olun. Örneğin, ekranın alt kısmında uyarlanabilir bir banner görüntülerken banner görünümünün alt kısmını alt düzen kılavuzunun üst kısmına eşit, centerX
kısıtlamasını da süper görünümün centerX
değerine eşit olarak ayarlayın.
Banner'ın reklam boyutu programatik olarak ayarlanmaya devam eder:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Reklam yükleme
GADBannerView
oluşturulduktan ve özellikleri yapılandırıldıktan sonra reklam yükleme zamanı gelmiştir. Bu işlem, GADRequest
nesnesinde loadRequest:
çağrılarak yapılır:
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Set the ad unit ID and view controller that contains the GADBannerView.
bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
bannerView.rootViewController = self
bannerView.load(GADRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Set the ad unit ID and view controller that contains the GADBannerView.
self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GADRequest request]];
}
GADRequest nesneleri tek bir reklam isteğini temsil eder ve hedefleme bilgileri gibi öğelerle ilgili mülkler içerir.
Reklamı yenileme
Reklam biriminizi yenilenecek şekilde yapılandırdıysanız reklam yüklenemezse başka bir reklam istemeniz gerekmez. Google Mobile Ads SDK'sı, AdMob kullanıcı arayüzünde belirttiğiniz tüm yenileme hızlarına uyar. Yenilemeyi etkinleştirmediyseniz yeni bir istek gönderin. Reklam birimi yenilemeyle ilgili daha fazla bilgi (ör. yenileme hızı ayarlama) için Banner reklamlar için otomatik yenilemeyi kullanma başlıklı makaleyi inceleyin.
Reklam etkinlikleri
GADBannerViewDelegate
'ü kullanarak yaşam döngüsü etkinliklerini (ör. bir reklamın kapatılması veya kullanıcının uygulamadan ayrılması) dinleyebilirsiniz.
Banner etkinliklerine kaydolma
Banner reklam etkinliklerine kaydolmak için GADBannerView
üzerindeki delegate
mülkünü GADBannerViewDelegate
protokolünü uygulayan bir nesneye ayarlayın. Genellikle banner reklamları uygulayan sınıf, temsilci sınıfı olarak da çalışır. Bu durumda delegate
mülkü self
olarak ayarlanabilir.
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ...
self.bannerView.delegate = self;
}
Banner etkinliklerini uygulama
GADBannerViewDelegate
içindeki yöntemlerin her biri isteğe bağlı olarak işaretlenmiştir. Bu nedenle, yalnızca istediğiniz yöntemleri uygulamanız gerekir. Bu örnekte her yöntem uygulanmakta ve konsola bir mesaj kaydedilmektedir:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
print("bannerViewDidReceiveAd")
}
func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
print("bannerViewDidRecordImpression")
}
func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
print("bannerViewWillPresentScreen")
}
func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewWillDIsmissScreen")
}
func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewDidDismissScreen")
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}
- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
iOS API Demo uygulamasında banner temsilcisi yöntemlerinin uygulanmasıyla ilgili Ad Delegate örneğine bakın.
Kullanım alanları
Bu reklam etkinliği yöntemlerinin bazı örnek kullanım alanları aşağıda verilmiştir.
Bir reklam alındıktan sonra görüntüleme hiyerarşisine banner ekleme
Görüntü hiyerarşisine GADBannerView
eklemeyi, bir reklam alındıktan sonra yapmak isteyebilirsiniz. Bunu bannerViewDidReceiveAd:
etkinliğini dinleyerek yapabilirsiniz:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Banner reklama animasyon ekleme
Aşağıdaki örnekte gösterildiği gibi, döndürülen bir banner reklamı canlandırmak için bannerViewDidReceiveAd:
etkinliğini de kullanabilirsiniz:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
Uygulamayı duraklatma ve devam ettirme
GADBannerViewDelegate
protokolünde, bir tıklamanın yer paylaşımının gösterilmesine veya kapatılmasına neden olması gibi etkinlikler hakkında sizi bilgilendiren yöntemler bulunur. Bu etkinliklerin reklamlardan kaynaklanıp kaynaklanmadığını izlemek istiyorsanız bu GADBannerViewDelegate
yöntemlerine kaydolun.
Yalnızca reklam tıklamalarından gelenleri değil, tüm yer paylaşımı sunumlarını veya harici tarayıcı çağrılarını yakalamak için uygulamanızın UIViewController
veya UIApplication
'daki eşdeğer yöntemleri dinlemesi daha iyidir. GADBannerViewDelegate
yöntemleriyle aynı anda çağrılan eşdeğer iOS yöntemlerini gösteren tabloyu aşağıda bulabilirsiniz:
GADBannerViewDelegate yöntemi | iOS yöntemi |
---|---|
bannerViewWillPresentScreen: |
UIViewController'ın viewWillDisappear: |
bannerViewWillDismissScreen: |
UIViewController'ın viewWillAppear: |
bannerViewDidDismissScreen: |
UIViewController'ın viewDidAppear: |
Ek kaynaklar
GitHub'daki örnekler
- Sabit uyarlanabilir banner reklam örneği: Swift | SwiftUI | Objective-C
- Gelişmiş özellikler demosu: Swift | Objective-C
Sonraki adımlar
Daraltılabilir banner'lar
Daraltılabilir banner reklamlar, başlangıçta daha büyük bir yer paylaşımı olarak sunulan ve reklamı daha küçük bir boyuta daraltmaya yarayan bir düğme içeren banner reklamlardır. Performansınızı daha da optimize etmek için bu özelliği kullanabilirsiniz. Daha fazla bilgi için daraltılabilir banner reklamlar bölümüne bakın.
Satır içi uyarlanabilir banner'lar
Satır içi uyarlanabilir banner'lar, sabit uyarlanabilir banner'lara kıyasla daha geniş ve daha uzun banner'lardır. Değişken yüksekliktedir ve cihaz ekranı kadar uzun olabilir. Banner reklamları kaydırılabilir içeriğe yerleştiren uygulamalar için sabit uyarlanabilir banner reklamlar yerine satır içi uyarlanabilir banner'lar önerilir. Daha fazla bilgi için satır içi uyarlanabilir banner'lara bakın.