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, belirttiğiniz reklam genişliğini kullanarak reklam boyutunu her cihaz için optimize ederek performansı en üst düzeye çıkaran sabitlenmiş 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 yayındaki ü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:
/21775744923/example/adaptive-banner
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.
GAMBannerView oluşturma
Banner reklamlar GAMBannerView
nesnelerinde gösterilir. Bu nedenle, banner reklamları entegre etmenin ilk adımı görünüm hiyerarşinize bir GAMBannerView
eklemektir. Bu işlem genellikle programatik olarak veya Interface Builder aracılığıyla yapılır.
Programatik
GAMBannerView
doğrudan da oluşturulabilir.
Aşağıdaki örnekte bir GAMBannerView
oluşturulmaktadır:
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GAMBannerView!
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 = GAMBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GAMBannerView) {
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
GAMBannerView
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)
}
GAMBannerView
öğ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) GAMBannerView *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 = [[GAMBannerView 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 GAMBannerView
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 ayarlanır:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Reklam yükleme
GAMBannerView
oluşturulduktan ve özellikleri yapılandırıldıktan sonra reklam yükleme zamanı gelmiştir. Bu işlem, GAMRequest
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 GAMBannerView.
bannerView.adUnitID = "/21775744923/example/adaptive-banner"
bannerView.rootViewController = self
bannerView.load(GAMRequest())
}
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 GAMBannerView.
self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GAMRequest request]];
}
GAMRequest nesneleri tek bir reklam isteğini temsil eder ve hedefleme bilgileri gibi öğelerle ilgili mülkler içerir.
Reklamları yenileme
Reklam biriminizi yenilenecek şekilde yapılandırdıysanız reklam yüklenmezse başka bir reklam istemeniz gerekmez. Google Mobile Ads SDK'sı, Ad Manager kullanıcı arayüzünde belirttiğiniz tüm yenileme hızlarına uyar. Yenilemeyi etkinleştirmediyseniz yeni bir istek gönderin. Reklam birimi yenileme hakkında daha fazla bilgi (ör. yenileme hızı ayarlama) için Mobil uygulamalarda reklamların yenileme hızı 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 GAMBannerView
ü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: GAMBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GAMBannerView *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 GAMBannerView
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:(GAMBannerView *)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ı animasyonlu hale getirmek 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:(GAMBannerView *)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
'teki 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: |
Manuel gösterim sayımı
Bir gösterimin ne zaman kaydedileceğine dair özel koşullarınız varsa gösterim ping'lerini Ad Manager'a manuel olarak gönderebilirsiniz. Bu işlem, öncelikle bir reklam yüklenmeden önce manuel gösterimler için GAMBannerView
etkinleştirilerek yapılabilir:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
Bir reklamın başarıyla döndürüldüğünü ve ekranda olduğunu belirlediğinizde gösterimi manuel olarak tetikleyebilirsiniz:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
Uygulama etkinlikleri
Uygulama etkinlikleri, uygulama kodlarına mesaj gönderebilen reklamlar oluşturmanıza olanak tanır. Uygulama, bu mesajlara göre işlem yapabilir.
GADAppEventDelegate
kullanarak Ad Manager'a özgü uygulama etkinliklerini dinleyebilirsiniz.
Bu etkinlikler, GADBannerViewDelegate
nesnesinin bannerViewDidReceiveAd:
çağrılmasından önce bile reklamın yaşam döngüsü sırasında herhangi bir zamanda gerçekleşebilir.
Swift
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
didReceiveAppEvent name: String, withInfo info: String?)
Objective-C
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
@optional
// Called when the banner receives an app event.
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info;
Uygulama etkinliği yöntemleriniz bir görünüm denetleyicisinde uygulanabilir:
Swift
import GoogleMobileAds
class ViewController: UIViewController, GADAppEventDelegate {}
Objective-C
@import GoogleMobileAds;
@interface ViewController : UIViewController <GADAppEventDelegate> {}
@end
Reklam isteği göndermeden önce appEventDelegate
mülkünü kullanarak temsilciyi ayarlamayı unutmayın.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
Aşağıda, bir uygulama etkinliği aracılığıyla rengi belirterek uygulamanızın arka plan rengini nasıl değiştireceğinizi gösteren bir örnek verilmiştir:
Swift
func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
withInfo info: String?) {
if name == "color" {
guard let info = info else { return }
switch info {
case "green":
// Set background color to green.
view.backgroundColor = UIColor.green
case "blue":
// Set background color to blue.
view.backgroundColor = UIColor.blue
default:
// Set background color to black.
view.backgroundColor = UIColor.black
}
}
}
Objective-C
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info {
if ([name isEqual:@"color"]) {
if ([info isEqual:@"green"]) {
// Set background color to green.
self.view.backgroundColor = [UIColor greenColor];
} else if ([info isEqual:@"blue"]) {
// Set background color to blue.
self.view.backgroundColor = [UIColor blueColor];
} else {
// Set background color to black.
self.view.backgroundColor = [UIColor blackColor];
}
}
}
appEventDelegate
adresine renk uygulama etkinliği mesajları gönderen ilgili reklam öğesi:
<html>
<head>
<script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Send a color=green event when ad loads.
admob.events.dispatchAppEvent("color", "green");
document.getElementById("ad").addEventListener("click", function() {
// Send a color=blue event when ad is clicked.
admob.events.dispatchAppEvent("color", "blue");
});
});
</script>
<style>
#ad {
width: 320px;
height: 50px;
top: 0px;
left: 0px;
font-size: 24pt;
font-weight: bold;
position: absolute;
background: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="ad">Carpe diem!</div>
</body>
</html>
iOS API Demo uygulamasında uygulama etkinliklerinin uygulanmasıyla ilgili Ad Manager uygulama etkinlikleri örneğine bakın.
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ükseklikte olan bu banner'lar 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.