Banner Reklamlar

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 canlı üretim reklamları yerine test reklamları kullandığınızdan emin olun. Bu işlemi yapmazsanız 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ş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 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)
  }
BannerContentView.swift

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
  }
BannerContentView.swift

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)
    }
  }
BannerContentView.swift

Objective-C

Bu durumda, sağlanan reklam boyutu banner'a görünümün boyutunu belirleyecek 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 ayarlanmaya devam eder:

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())
BannerContentView.swift

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 özellikleri içerir.

İpucu: Reklam yükleme çağrılarını kullanarak, göstermeden önce önceden yüklenmiş reklamların önbelleğini oluşturabilirsiniz. Böylece, reklamlar gerektiğinde sıfır gecikmeli olarak gösterilebilir. Reklamların süresi bir saat sonra sona erdiğinden bu önbelleği temizlemeniz ve her saat yeni reklamlarla yeniden yüklemeniz gerekir.

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ı, 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.

Not: Ad Manager kullanıcı arayüzünde yenileme hızı ayarlandığında otomatik yenileme yalnızca banner ekranda görünüyorsa gerçekleşir.

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
BannerContentView.swift

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.

Swift Objective-C

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ı 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 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ı

Önemli: Manuel gösterim sayma yalnızca doğrudan satılan ve şirket içi kampanyalarla (yani doğrudan Ad Manager'da trafiğe eklenen reklam öğeleri) uyumludur. Dolgu veya üçüncü taraf ağ reklamları için kullanılmamalıdır. Daha fazla bilgi için bu Yardım Merkezi makalesini inceleyin.

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];

Not: bannerViewDidReceiveAd: geri çağırma işlevi çağrıldığında gösterimler otomatik olarak tetiklenir. Bu özelliği yalnızca gösterim sayısını farklı bir zamanda kaydetmek istiyorsanız kullanmayı düşünmeniz gerekir.

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.

Swift Objective-C

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.

Diğer konuları keşfedin

• Kullanıcı gizliliği