Banner Reklamlar

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ı, 320*50 endüstri standardına benzer. Bir kez mümkün olan tam genişliği belirtirseniz, bu değer size optimum belirlemektir. Optimum yükseklik, (reklam gösterildiğinde, etrafındaki görünümlerin hareket etmesine gerek yoktur) yenilenir.

Ön koşullar

Her zaman test reklamlarıyla test etme

Uygulamalarınızı oluştururken ve test ederken, uygulamalarınızın yanı sıra üretim reklamlarıdır. 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: /6499/example/adaptive-banner.

Her istek için test reklamları döndürecek şekilde özel olarak yapılandırılmıştır ve 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.

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 dosyası doğrudan da örneklenebilir. GAMBannerView oluşturma işleminin nasıl yapılacağına dair bir örneği aşağıda bulabilirsiniz: ekranın güvenli alanının alt ortasına hizalanı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)
    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];
  
  // 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 örnekte, geniş bir yelpazede olduğundan banner'a reklam boyutunu ayarlamak için banner'a doğal bir içerik görünüm.

Arayüz Oluşturucu

GAMBannerView, resimli taslak veya xib'e eklenebilir. dosyası olarak kaydedebilirsiniz. Bu yöntemi kullanırken, yalnızca belirli bir web sitesi için banner yer alır. Örneğin, sayfanın alt kısmında ekranın alt kısmını, banner görünümünün alt kısmının Düzen Kılavuzu'na gidin ve ortadaki X'i, üst görüntülemenin ortadaki X'e eşit olacak şekilde ayarlayın.

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: hattında GAMRequest nesne:

Swift

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

Objective-C

-   (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 ö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 verilmiş 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
  }
}

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

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

Şu konuma bir GAMBannerView eklemeyi ertelemek isteyebilirsiniz: görüntüleme hiyerarşisini geride bırakmaya devam eder. Bunu dinlemek için bannerViewDidReceiveAd: etkinliği için:

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

Bir banner reklamı bir kez canlandırmak için bannerViewDidReceiveAd: etkinliğini de kullanabilirsiniz aşağıdaki örnekte gösterildiği gibi döndürülür:

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ü, aşağıdakiler gibi etkinlikler hakkında sizi bilgilendirecek yöntemlere sahiptir: Bu, tıklama bir yer paylaşımının sunulmasına veya kapatılmasına neden olduğunda ortaya çıkar. Şunu istiyorsanız: etkinliklerin reklamlardan kaynaklanıp kaynaklanmadığını öğrenmek için GADBannerViewDelegate yöntem.

Her tür yer paylaşımlı sunuyu veya harici tarayıcı çağrısını yakalamak için yalnızca reklam tıklamalarından gelenleri dikkate alırsanız, uygulamanızın bu reklamları dinlemesi daha iyidir. UIViewController veya UIApplication üzerinde eşdeğer yöntemler kullanabilir. Bir tablo şununla aynı anda çağrılan eşdeğer iOS yöntemlerini gösteren GADBannerViewDelegate yöntem:

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 manuel olarak 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 özel 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ı.

Hızlı Hedef-C

Ek kaynaklar

GitHub'daki örnekler

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

Diğer konuları keşfedin