Banner reklamlar, uygulama düzeninin bir kısmını kaplayan dikdörtgen reklamlardır. Onlar Kullanıcılar uygulamayla etkileşim kurarken ekranda kalır. kullanıcı sayfayı kaydırırken içerikle satır içi şekilde ayarlayabilirsiniz. Banner Reklamlar belirli bir süre sonra otomatik olarak yenilenebilir. Bkz. Banner reklamlara genel bakış konulu videomuzu izleyin.
Bu kılavuzda, sabitlenmiş reklamları nasıl kullanmaya başlayacağınız uyarlanabilir banner reklamlar reklam boyutunu her cihaz için optimize ederek performansı artıran belirttiğiniz reklam genişliğidir.
Sabit uyarlanabilir banner
Sabit uyarlanabilir banner reklamlar, normal reklamlar yerine sabit en boy oranlı reklamlardır. sabit boyutlu reklamlar En boy oranı, 320x50 endüstri standardına benzer. Bir kez mümkün olan tam genişliği belirtirseniz, görebilirsiniz. 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 etme
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 için özel test reklam birimi kimliğimizi kullanmaktır banner'lar:
/21775744923/example/adaptive-banner
Her istek için test reklamları döndürecek şekilde özel olarak yapılandırılmıştır. kod yazma, test etme ve hata ayıklama sırasında kendi uygulamalarınızda kullanabileceğiniz ücretsiz bir araçtır. Sadece uygulamanızı yayınlamadan önce bunu kendi reklam birimi kimliğinizle değiştirdiğinizden emin olun.
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
olarak gösterilir
bu nedenle, banner reklamları entegre etmek için atılacak ilk adım bir GAMBannerView
eklemektir.
değişiklik görebilirsiniz. Bu işlem genellikle
programatik olarak
arayüz oluşturucuyla bunu yapabilirsiniz.
Programatik olarak
GAMBannerView
doğrudan da oluşturulabilir.
Aşağıdaki örnek bir GAMBannerView
oluşturur:
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 bir 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 öğrenmek için GeometryReader
değerini kullanın. Bu sınıf
geçerli cihaz yönü için uygun reklam boyutunu hesaplar. İlgili içeriği oluşturmak için kullanılan
frame
, reklam boyutundan hesaplanan yüksekliğe ayarlandı.
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 örnekte, geniş bir yelpazede olduğundan banner'a reklam boyutunu ayarlamak için banner'a doğal bir içerik görünüm.
@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
Arayüz Oluşturucu
Bir taslak tahtasına veya xib dosyasına GAMBannerView
ekleyebilirsiniz. Bunu kullanırken
yöntemini kullanıyorsanız, banner'a yalnızca konum kısıtlamaları eklediğinizden emin olun. Örneğin,
ekranın altında uyarlanabilir bir banner görüntülediğinizde, alt kısmı ayarlayın.
üst kısmına eşit olan banner görünümünün ve
centerX
üst izlemenin centerX
değerine eşit.
Banner'ın reklam boyutu programatik olarak ayarlanır:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Reklam yükle
GAMBannerView
uygulandıktan ve özelliklerinden sonra
bir reklam yükleme zamanı gelmiş demektir. Bu işlem,loadRequest:
GAMRequest
nesne:
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 şeylere ilişkin özellikleri içerebilir.
Reklamınız yüklenemiyorsa, başka bir reklam için açıkça istekte bulunmanıza gerek reklam biriminizi yenilenecek şekilde yapılandırdığınız sürece; Google Mobile Ads SDK'sı Ad Manager'de belirttiğiniz yenileme hızına uyar Kullanıcı arayüzü. Yenilemeyi etkinleştirmediyseniz yeni bir istek göndermeniz gerekir.
Reklam etkinlikleri
GADBannerViewDelegate
kullanarak yaşam döngüsü olaylarını dinleyebilirsiniz.
Örneğin bir reklam kapatıldığında veya kullanıcının uygulamadan ayrılması gibi.
Banner etkinliklerine kaydolma
Banner reklam etkinliklerine kaydolmak için delegate
özelliğini şurada ayarlayın:
GAMBannerView
öğesini uygulayan bir nesneye
GADBannerViewDelegate
protokolü. Genellikle, banner'ı uygulayan sınıf
reklamları aynı zamanda yetki verilen sınıf olarak da işlev görür. Bu durumda delegate
mülkü
self
olarak ayarlanmalıdır.
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 etkinlikleri uygulama
GADBannerViewDelegate
bölümündeki yöntemlerin her biri isteğe bağlı olarak işaretlenmiştir.
yalnızca istediğiniz yöntemleri uygulamanız gerekir. Bu örnekte, Google Etiket Yöneticisi'ne
ve konsola bir mesaj kaydeder:
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ı.
Kullanım alanları
Aşağıda, bu reklam etkinliği yöntemlerinin bazı kullanım alanlarına örnekler verilmiştir.
Reklam alındıktan sonra görüntüleme hiyerarşisine banner ekleyin
Şu konuma bir GAMBannerView
eklemeyi ertelemek isteyebilirsiniz:
görüntüleme hiyerarşisini geride bırakmaya devam eder. 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 reklamı canlandırma
Ayrıca, 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:(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 vardır. Şunu istiyorsanız:
etkinliklerin reklamlardan kaynaklanıp kaynaklanmadığını öğrenmek için
GADBannerViewDelegate
yöntem.
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: öğesi |
bannerViewWillDismissScreen: |
UIViewController'ın viewWillAppear: öğesi |
bannerViewDidDismissScreen: |
UIViewController'ın viewDidAppear: öğesi |
Manuel gösterim sayma
Özel bir feed'iniz varsa gösterim ping'lerini Ad Manager'a
bir gösterimin ne zaman kaydedileceğine ilişkin koşullar içerir. Bu, öncelikle
Bir reklam yüklenmeden önce manuel gösterimler için GAMBannerView
etkinleştirildiğinde:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
Bir reklamın başarıyla döndürüldüğünü ve ekranda gösterildiğini belirlediğinizde, bir gösterimi manuel olarak tetikleyebilirsiniz:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
Uygulama etkinlikleri
Uygulama etkinlikleri, çocuğunuzun uygulama koduna mesaj gönderebilen reklamlar oluşturmanıza olanak tanır. İlgili içeriği oluşturmak için kullanılan uygulamanız daha sonra bu mesajlara dayalı işlemler yapabilir.
GADAppEventDelegate
kullanarak Ad Manager'a özgü uygulama etkinliklerini dinleyebilirsiniz.
Bu etkinlikler, reklamın yaşam döngüsü boyunca herhangi bir zamanda,
GADBannerViewDelegate
nesnesinin bannerViewDidReceiveAd:
çağrılır.
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 denetleyicide uygulanabilir:
Swift
import GoogleMobileAds
class ViewController: UIViewController, GADAppEventDelegate {}
Objective-C
@import GoogleMobileAds;
@interface ViewController : UIViewController <GADAppEventDelegate> {}
@end
Oluşturmadan önce appEventDelegate
özelliğini kullanarak yetki verilen kullanıcıyı ayarlamayı unutmayın
reklam isteği.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
Uygulamanızın arka plan rengini aşağıdaki gibi değiştireceğinizi gösteren bir örnek rengi bir uygulama etkinliği aracılığıyla belirterek:
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];
}
}
}
Burada da, renk uygulama etkinliği mesajlarını şuraya gönderen ilgili reklam öğesi
appEventDelegate
:
<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>
Uygulama etkinliklerinin uygulanması için: iOS API Demo uygulaması.
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 boyutta daraltmayı sağlayacak bir düğme bulunan yer paylaşımlı reklam. Şunu kullanabilirsiniz: kullanarak performansınızı daha da optimize edebilirsiniz. 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 büyük ve daha uzundur banner'lar. Değişken yükseklikte ve cihaz ekranı kadar uzun olabilir. Satır içi uyarlanabilir banner'lar, şunun için sabit uyarlanabilir banner reklamların yerine önerilir: Kaydırılabilir içeriğe banner reklam yerleştiren uygulamalar. Bkz. Satır içi uyarlanabilir daha fazla bilgi için bolca fırsat sunuyor.