Banner Reklamlar

Banner reklamlar, uygulama düzeninde cihaz ekranının üst veya alt kısmında bir yer kaplar. Bu reklamlar, kullanıcılar uygulamayla etkileşimde bulunurken ekranda kalır ve belirli bir süre sonra otomatik olarak yenilenebilir. Mobil reklamcılıkta yeniyseniz, mobil reklamlar mükemmel bir başlangıç noktasıdır.

Bu kılavuzda,Ad Manager banner reklamların iOS uygulamasına nasıl entegre edileceği gösterilmektedir. Kod snippet'leri ve talimatların yanı sıra banner'ları doğru şekilde boyutlandırmayla ilgili bilgiler ve ek kaynakların bağlantıları da bulunmaktadır.

Ön koşullar

Her zaman test reklamlarıyla test etme

Uygulamalarınızı oluştururken ve test ederken canlı, üretim reklamları yerine test reklamlarını kullandığınızdan emin olun. Bunu yapmazsanız hesabınız askıya alınabilir.

Test reklamlarını yüklemenin en kolay yolu, iOS banner'larına özel test reklam birimi kimliğimizi kullanmaktır: /6499/example/banner

Her istek için test reklamı döndürecek şekilde özel olarak yapılandırılmıştır. Kodlama, test ve hata ayıklama sırasında bu özelliği kendi uygulamalarınızda da 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 nasıl çalıştığı hakkında daha fazla bilgi için Test Reklamları konusuna bakın.

GAMBannerViewoluşturun

Banner reklamlar, GAMBannerView nesneleri içinde görüntülenir. Bu nedenle, banner reklamları entegre etmenin ilk adımı, görünüm hiyerarşinize bir GAMBannerView eklemektir. Bu işlem genellikle Arayüz Oluşturucu ile veya programlı olarak yapılır.

Arayüz Oluşturucu

GAMBannerView, tipik bir görünümde olduğu gibi resimli taslak veya xib dosyasına eklenebilir. Bu yöntemi kullanırken, görüntülemek istediğiniz reklam boyutuyla eşleşecek genişlik ve yükseklik sınırlamaları eklediğinizden emin olun. Örneğin, bir banner (320x50) görüntülerken 320 puntoluk genişlik ve 50 punto yükseklik sınırlaması kullanın.

Programatik olarak

Bir GAMBannerView doğrudan örneklenebilir. Aşağıda, 320x50 banner boyutunda, ekranın güvenli alanının alt orta kısmına hizalı bir GAMBannerView öğesinin nasıl oluşturulacağına ilişkin bir örnek verilmiştir:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GAMBannerView(adSize: GADAdSizeBanner)

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

Objective-C

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [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ü boyutlandırmak için içsel bir içerik boyutu vereceğinden genişlik veya yükseklik sınırlamaları belirlemeyiz.

Sabit bir değerle tanımlanmış standart bir boyut kullanmak istemiyorsanız GADAdSizeFromCGSize kullanarak özel bir boyut ayarlayabilirsiniz. Daha fazla bilgi için banner boyutu bölümüne bakın.

Mülkleri GAMBannerView yapılandırma

Reklamları yüklemek ve görüntülemek için GAMBannerView birkaç özelliğin ayarlanmasını gerektirir.

  • rootViewController - Bu görüntüleme denetleyicisi, reklam tıklandığında bir yer paylaşımı sunmak için kullanılır. Normalde GAMBannerView öğesini içeren görünüm denetleyicisine ayarlanmalıdır.
  • adUnitID: GAMBannerView öğesinin reklamları yüklemesi gereken reklam birimi kimliğidir.

Aşağıda, bir UIViewController'ın viewDidLoad yönteminde gerekli iki özelliğin nasıl ayarlanacağını gösteren bir kod örneği verilmiştir:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
}

Reklam yükle

GAMBannerView yerleştirildikten ve özellikleri yapılandırıldıktan sonra sıra bir reklam yüklemeye gelir. Bu, bir GAMRequest nesnesinde loadRequest: çağrısı yapılarak yapılır:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
  bannerView.load(GAMRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GAMRequest request]];
}

GAMRequest nesneler, tek bir reklam isteğini temsil eder ve hedefleme bilgileri gibi konularla ilgili ö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 istemenize gerek yoktur. Google Mobile Ads SDK'sı, kullanıcı arayüzünde belirttiğiniz tüm yenileme hızlarınaAd Manager uyar. Yenilemeyi etkinleştirmediyseniz yeni bir istek göndermeniz gerekir.

Reklam etkinlikleri

GADBannerViewDelegate kullanarak yaşam döngüsü olaylarını (ö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 özelliğini GADBannerViewDelegate protokolünü uygulayan bir nesne olarak ayarlayın. Genellikle banner reklamları uygulayan sınıf, temsilci sınıf olarak da işlev görür. Bu durumda, delegate özelliği self olarak ayarlanabilir.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.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 kapsamındaki yöntemlerin her biri isteğe bağlı olarak işaretlenmiştir. Bu nedenle tek yapmanız gereken istediğiniz yöntemleri uygulamaktır. Bu örnekte her bir yöntem uygulanır ve konsola bir mesaj kaydedilir:

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 yetki verme yöntemlerinin uygulanması için Reklam Yetkisi örneğine bakın.

Swift Hedef-C

Kullanım alanları

Aşağıda, bu reklam etkinliği yöntemlerinin bazı örnek kullanım alanları verilmiştir.

Reklam alındığında görünüm hiyerarşisine banner ekleme

Bir GAMBannerView öğesinin görünüm hiyerarşisine eklenmesini, bir reklam alınıncaya kadar ertelemek isteyebilirsiniz. Bunu, bannerViewDidReceiveAd: etkinliğini dinleyerek yapabilirsiniz:

Swift

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

Objective-C

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

Banner reklam animasyonu

Döndürülen bir banner reklamın animasyonunu oluşturmak için aşağıdaki örnekte gösterildiği gibi 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ü, bir tıklamanın bir yer paylaşımının sunulmasına veya kapatılmasına neden olması gibi etkinlikleri size bildiren yöntemlere sahiptir. Bu etkinliklerin reklamlardan kaynaklanıp kaynaklanmadığını izlemek istiyorsanız bu GADBannerViewDelegate yöntemlerine kaydolun.

Uygulamanızın, yalnızca reklam tıklamalarından gelenleri değil, tüm yer paylaşımlı sunuları veya harici tarayıcı çağrılarını yakalamak için UIViewController veya UIApplication üzerindeki eşdeğer yöntemleri dinlemesi daha iyi olur. GADBannerViewDelegate yöntemleriyle aynı anda çağrılan eşdeğer iOS yöntemlerini gösteren bir tabloyu aşağıda bulabilirsiniz:

GADBannerView bitirme yöntemi iOS yöntemi
bannerViewWillPresentScreen: UIViewController'ın viewWillDisappear:
bannerViewWillDismissScreen: UIViewController'ın viewWillAppear:
bannerViewDidDismissScreen: UIViewController'ın viewDidAppear:

Aşağıdaki tabloda standart banner boyutları listelenmiştir.

Nokta cinsinden boyut (GxY) Açıklama Kullanılabilirlik Reklam Boyutu sabiti
320x50 Banner Telefonlar ve tabletler GADAdSizeBanner
320x100 Büyük banner Telefonlar ve tabletler GADAdSizeLargeBanner
300x250 IAB orta boy dikdörtgen Telefonlar ve tabletler GADAdSizeMediumRectangle
468x60 IAB tam boyutlu banner Tabletler GADAdSizeFullBanner
728x90 IAB skor tablosu Tabletler GADAdSizeLeaderboard
Sağlanan genişlik x Uyarlanabilir yükseklik Uyarlanabilir banner Telefonlar ve Tabletler Yok

Özel reklam boyutları

Özel banner boyutu tanımlamak için GADAdSizeFromCGSize kullanarak istediğiniz boyutu ayarlayın. Bunun için aşağıdaki adımları uygulayın:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

Özel reklam boyutu

Standart reklam birimlerine ek olarak, Google Ad Manager her boyutlu reklam birimini bir uygulamada yayınlamanıza olanak tanır. Bir reklam isteği için tanımlanan reklam boyutu (genişlik, yükseklik), uygulamada görüntülenen reklam görünümünün boyutlarıyla (GAMBannerView) eşleşmelidir. Özel boyut ayarlamak için GADAdSizeFromCGSize değerini kullanın.

Swift

// Define custom GADAdSize of 250x250 for GAMBannerView.
let customAdSize = GADAdSizeFromCGSize(CGSize(width: 250, height: 250))
bannerView = GAMBannerView(adSize: customAdSize)

Objective-C

// Define custom GADAdSize of 250x250 for GAMBannerView
GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(250, 250));
self.bannerView = [[GAMBannerView alloc] initWithAdSize:customAdSize];

iOS API Demo uygulamasında özel reklam boyutu uygulaması için Ad Manager Birden Çok Reklam Boyutu örneğine bakın.

Swift Hedef-C

Birden çok reklam boyutu

Ad Manager, GAMBannerView içinde yayınlanmaya uygun olabilecek birden fazla reklam boyutu belirtmenize olanak tanır. Bu özelliği kullanmak için gereken üç adım vardır:

  1. Ad Manager kullanıcı arayüzünde, farklı boyutlu reklam öğeleriyle ilişkilendirilmiş aynı reklam birimini hedefleyen bir satır öğesi oluşturun.

  2. Uygulamanızda, GAMBannerView özelliği için validAdSizes özelliğini ayarlayın:

    Swift

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    bannerView.validAdSizes = [NSValueFromGADAdSize(GADAdSizeBanner),
        NSValueFromGADAdSize(GADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSize(width: 120, height: 20)))]
    

    Objective-C

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    self.bannerView.validAdSizes = @[
        NSValueFromGADAdSize(GADAdSizeBanner),
        NSValueFromGADAdSize(GADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSizeMake(120, 20)))
    ];
    
  3. Reklam boyutu değişikliğini algılamak için GADAdSizeDelegate yöntemini uygulayın.

    Swift

    public func bannerView(_ bannerView: GADBannerView, willChangeAdSizeTo size: GADAdSize)
    

    Objective-C

    • (void)bannerView:(GAMBannerView *)view willChangeAdSizeTo:(GADAdSize)size;
  4. Bir reklam isteğinde bulunmadan önce yetki verilmiş kullanıcıyı eklemeyi unutmayın.

    Swift

    bannerView.adSizeDelegate = self

    Objective-C

    self.bannerView.adSizeDelegate = self;

iOS API Demo uygulamasında özel reklam boyutu uygulaması için Ad Manager Birden Çok Reklam Boyutu örneğine bakın.

Swift Hedef-C

Manuel gösterim sayımı

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, reklam yüklenmeden önce manuel gösterimler için bir GAMBannerView'yi etkinleştirerek 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 manuel olarak bir gösterim tetikleyebilirsiniz:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Uygulama etkinlikleri

Uygulama etkinlikleri, kullanıcıların uygulama kodlarına mesaj gönderebilen reklamlar oluşturmanızı sağlar. Daha sonra uygulama, bu mesajlara göre işlem yapabilir.

GADAppEventDelegate kullanarak Ad Manager'a özel uygulama etkinliklerini dinleyebilirsiniz. Bu etkinlikler, GADBannerViewDelegate nesnesinin bannerViewDidReceiveAd: çağrısından önce bile, reklamın yaşam döngüsü boyunca 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, görüntüleme denetleyicisinde uygulanabilir:

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

Reklam isteğinde bulunmadan önce appEventDelegate özelliğini kullanarak yetki verilmiş kullanıcıyı 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 renginin nasıl değiştirileceğini 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];
    }
  }
}

Aşağıda, renk uygulaması etkinlik mesajlarını appEventDelegate adresine 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ğine bakın.

Swift Hedef-C

Ek kaynaklar

GitHub'daki örnekler

Mobile Ads Garage eğitim videoları

Sonraki adımlar

Kullanıcı gizliliği hakkında daha fazla bilgi edinin.