Banner Reklamlar

Banner reklamlar, uygulama düzeninin bir kısmını kaplayan dikdörtgen reklamlardır. Bunlar, 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ır. Banner reklamlar, belirli bir süre sonra otomatik olarak yenilenebilir. Daha fazla bilgi için Banner reklamlara genel bakış bölümüne bakın.

Bu kılavuzda, belirttiğiniz reklam genişliğini kullanarak her cihaz için reklam boyutunu optimize ederek performansı en üst düzeye çıkaran sabit uyarlanabilir banner reklamları kullanmaya nasıl başlayacağınız gösterilmektedir.

Sabit uyarlanabilir banner

Sabit uyarlanabilir banner reklamlar, normal sabit boyutlu reklamlar yerine sabit en boy oranlı reklamlardır. En boy oranı, 320*50 endüstri standardına benzer. Kullanılabilecek tam genişliği belirtmenizin ardından, size bu genişliğe uygun optimum yüksekliğe sahip bir reklam döndürür. Optimum yükseklik, aynı cihazdan yapılan istekler arasında değişmez ve reklam yenilendiğinde etrafındaki görünümlerin taşınması gerekmez.

Ö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ını 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: /6499/example/adaptive-banner

Her istek için test reklamı döndürecek şekilde özel olarak yapılandırılmıştır. Kodlama, test etme ve hata ayıklama sırasında bu özelliği kendi uygulamalarınızda kullanabilirsiniz. Bunun için uygulamanızı yayınlamadan önce bunu 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ı konusuna bakın.

GAMBannerView oluşturma

Banner reklamlar GAMBannerView nesneleri halinde görüntülendiğinden, banner reklamları entegre etmenin ilk adımı görünüm hiyerarşinize bir GAMBannerView eklemektir. Bu işlem genellikle programatik olarak veya Arayüz Oluşturucu aracılığıyla yapılır.

Programatik olarak

GAMBannerView dosyası doğrudan da örneklenebilir. Ekranın güvenli alanının alt orta kısmına hizalanmış bir GAMBannerView özelliğinin nasıl oluşturulacağına ilişkin örneği burada bulabilirsiniz:

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)
    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)
      ])
   }
   
}

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

Bu durumda, sağlanan reklam boyutu banner'a görünümün boyutlandırılması için banner'a doğal bir içerik boyutu vereceğinden genişlik veya yükseklik kısıtlaması yapmayız.

Arayüz Oluşturucu

GAMBannerView, resimli taslak veya xib dosyasına eklenebilir. Bu yöntemi kullanırken banner'a yalnızca 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ılavuzu'nun üst kısmına, ortadaki X değerini ise üst görüntülemenin ortadaki X değerine ayarlayın.

Banner'ın reklam boyutu programatik olarak ayarlanır:

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Reklam yükle

GAMBannerView uygulandıktan ve özellikleri yapılandırıldıktan sonra sıra reklam yüklenir. Bu işlem, GAMRequest nesnesinde loadRequest: çağrısı yapılarak gerçekleştirilir:

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/6499/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/6499/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 özellikler içerir.

Reklamınız yüklenemezse reklam biriminizi yenilenecek şekilde yapılandırdığınız sürece açıkça başka bir reklam isteğinde bulunmanız gerekmez. Google Mobile Ads SDK'sı, Ad Manager kullanıcı arayüzünde belirttiğiniz tüm yenileme hızına uyar. Yenilemeyi etkinleştirmediyseniz yeni bir istek göndermeniz gerekir.

Reklam etkinlikleri

GADBannerViewDelegate uygulamasını kullanarak, bir reklamın kapatılması veya kullanıcının uygulamadan ayrılması gibi yaşam döngüsü olaylarını dinleyebilirsiniz.

Banner etkinliklerine kaydolma

Banner reklam etkinliklerine kaydolmak için GAMBannerView bölgesindeki delegate özelliğini GADBannerViewDelegate protokolünü uygulayan bir nesne olarak ayarlayın. Genel olarak, banner reklamları uygulayan sınıf aynı zamanda yetki verilen sınıf olarak da işlev görür. Bu durumda, delegate özelliği self olarak ayarlanabilir.

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

@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 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 uygulanır ve konsola bir mesaj kaydedilir:

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")
}

-   (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 yetkilendirme yöntemlerinin uygulanması için Reklam Temsilcisi örneğini inceleyin.

Swift Hedef-C

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ünüm hiyerarşisine banner ekleme

Görünüm hiyerarşisine GAMBannerView eklemeyi bir reklam alınana kadar ertelemek isteyebilirsiniz. Bunu, bannerViewDidReceiveAd: etkinliğini dinleyerek yapabilirsiniz:

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Banner reklam animasyonu

Aşağıdaki örnekte gösterildiği gibi, döndürülen banner reklama animasyon eklemek için bannerViewDidReceiveAd: etkinliğini de kullanabilirsiniz:

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Uygulamayı duraklatma ve devam ettirme

GADBannerViewDelegate protokolü, bir tıklamanın yer paylaşımının sunulmasına veya kapatılmasına neden olması gibi etkinlikler hakkında sizi bilgilendirecek yöntemlere sahiptir. Bu etkinliklerin reklamlardan kaynaklanıp kaynaklanmadığını takip etmek istiyorsanız bu GADBannerViewDelegate yöntemleri için kaydolun.

Yalnızca reklam tıklamalarından gelenleri değil, tüm yer paylaşımlı sunumları veya harici tarayıcı çağrılarını yakalamak için uygulamanızın UIViewController veya UIApplication üzerindeki eşdeğer yöntemleri dinlemesi daha iyidir. GADBannerViewDelegate yöntemleriyle aynı anda çağrılan eşdeğer iOS yöntemlerini gösteren bir tablo aşağıda verilmiştir:

Manuel gösterim sayma

Bir gösterimin ne zaman kaydedilmesi gerektiğine dair özel koşullarınız varsa gösterim ping'lerini Ad Manager'a manuel olarak gönderebilirsiniz. Bu işlem, bir reklam yüklenmeden önce manuel gösterimler için bir GAMBannerView etkinleştirilerek yapılabilir:

bannerView.enableManualImpressions = true

self.bannerView.enableManualImpressions = YES;

Bir reklamın başarıyla döndürüldüğünü ve ekranda olduğunu belirlediğinizde manuel olarak gösterim tetikleyebilirsiniz:

bannerView.recordImpression()

[self.bannerView recordImpression];

Uygulama etkinlikleri

Uygulama etkinlikleri, çocuğunuzun uygulama koduna mesaj gönderebilen reklamlar oluşturmanıza olanak tanır. Uygulama, daha sonra bu mesajlara dayalı olarak işlem yapabilir.

GADAppEventDelegate kullanarak Ad Manager'a özel uygulama etkinliklerini dinleyebilirsiniz. Bu etkinlikler, GADBannerViewDelegate nesnesinin bannerViewDidReceiveAd: çağrılmasından önce bile, reklamın yaşam döngüsü boyunca herhangi bir zamanda gerçekleşebilir.

// 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?)

// 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:

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

Reklam isteğinde bulunmadan önce appEventDelegate özelliğini kullanarak yetkiyi ayarlamayı unutmayın.

bannerView.appEventDelegate = self

self.bannerView.appEventDelegate = self;

Bir uygulama etkinliği aracılığıyla rengi belirterek uygulamanızın arka plan renginin nasıl değiştirileceğini gösteren bir örneği aşağıda bulabilirsiniz:

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

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

Aşağıda da appEventDelegate adlı cihaza renkli uygulama etkinliği mesajları gönderen ilgili reklam öğesi gösterilmektedir:

<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ı için Ad Manager Uygulama Etkinlikleri örneğini inceleyin.

Swift Hedef-C

Ek kaynaklar

GitHub'daki örnekler

• Sabit uyarlanabilir banner reklam örneği: Swift | Objective-C

• İleri seviye özellikler demosu: Swift | Objective-C

Sonraki adımlar

Daraltılabilir banner'lar

Daraltılabilir banner reklamlar, başlangıçta reklamı daha küçük bir boyuta daraltmak için bir düğmenin yer aldığı daha büyük bir yer paylaşımı olarak sunulan banner reklamlardır. Performansınızı daha da optimize etmek için bu rapordan yararlanabilirsiniz. Daha fazla bilgi için daraltılabilir banner reklamlar konusuna 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. Değişken yükseklikte ve cihaz ekranı kadar uzun olabilir. Satır içi uyarlanabilir banner'lar, kaydırılabilir içeriğe banner reklam yerleştiren uygulamalar için sabit uyarlanabilir banner reklamların yerine önerilir. Daha fazla ayrıntı için satır içi uyarlanabilir banner'lar bölümüne bakın.

Diğer konuları keşfedin

• Kullanıcı gizliliği