Banner Reklamlar

Platform seçin: Android iOS Unity Flutter

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 bir 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. Kullanılabilir tam genişliği belirttiğinizde, 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 çevreleyen görünümlerin hareket etmesi gerekmez.

Ön koşullar

Her zaman test reklamlarıyla test yapın

Uygulamalarınızı oluşturup test ederken canlı yayınlanan üretim reklamları yerine test reklamlarını 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

Bu kimlik, her istek için test reklamları döndürecek şekilde özel olarak yapılandırılmıştır ve 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 çalışma ş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 etmeye yönelik 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 olarak

GAMBannerView doğrudan da oluşturulabilir. Aşağıdaki örnek, GAMBannerView oluşturur:

Swift

// Initialize the BannerView.
bannerView = BannerView()

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
BannerSnippets.swift

SwiftUI

AdManagerBannerView kullanmak için UIViewRepresentable oluşturun:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

UIViewRepresentable ve width değerlerini belirterek UIViewRepresentable öğenizi görünüm hiyerarşisine ekleyin:height

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

Objective-C

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
    // Align the banner's bottom edge with the safe area's bottom edge
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

Interface Builder

Bir storyboard 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österirken banner görünümünün alt kısmını Bottom Layout Guide'ın üst kısmına eşit olacak şekilde ayarlayın ve centerX kısıtlamasını üst görünümün centerX değerine eşit olacak şekilde ayarlayın.

Banner'ın reklam boyutu programatik olarak ayarlanmaya devam eder:

Swift

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

Objective-C

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

Reklam yükleme

GAMBannerView yerleştirilip adUnitID gibi özellikleri yapılandırıldıktan sonra reklam yükleme zamanı gelir. Bu işlem, GAMRequest nesnesinde loadRequest: çağrılarak yapılır:

Swift

bannerView.load(AdManagerRequest())
ViewController.swift

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
BannerContentView.swift

Objective-C

[self.bannerView loadRequest:[GAMRequest request]];
ViewController.m

GAMRequest nesneleri tek bir reklam isteğini temsil eder ve hedefleme bilgileri gibi öğeler için özellikler içerir.

Reklamı yenileme

Reklam biriminizi yenilenecek şekilde yapılandırdıysanız reklam yüklenemediğinde 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ızlarına uyar. Yenilemeyi etkinleştirmediyseniz yeni bir istek gönderin. Yenileme hızı ayarlama gibi reklam birimi yenileme hakkında daha fazla bilgi için Mobil uygulamalarda reklamların yenileme hızı başlıklı makaleyi inceleyin.

Reklam etkinlikleri

GADBannerViewDelegate kullanarak yaşam döngüsü etkinliklerini (ör. bir reklam kapatıldığında veya kullanıcı uygulamadan çıktığında) dinleyebilirsiniz.

Banner etkinliklerine kaydolma

Banner reklam etkinliklerine kaydolmak için delegate özelliğini GADBannerViewDelegate protokolünü uygulayan bir nesneye ayarlayın.GAMBannerView Genellikle banner reklamları uygulayan sınıf aynı zamanda temsilci sınıfı olarak da işlev görür. Bu durumda delegate özelliği self olarak ayarlanabilir.

Swift

bannerView.delegate = self
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

Banner etkinliklerini uygulama

GADBannerViewDelegate bölümündeki 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:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

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");
}
ViewController.m

iOS API Demo uygulamasında banner temsilci yöntemlerinin uygulanması için reklam temsilcisi örneğine bakın.

Swift Objective-C

Kullanım alanları

Bu reklam etkinliği yöntemlerinin kullanım alanlarına ilişkin bazı örnekleri aşağıda bulabilirsiniz.

Reklam alındıktan sonra görünüm hiyerarşisine banner ekleme

Reklam alınana kadar GAMBannerView öğesini görünüm hiyerarşisine eklemeyi geciktirmek isteyebilirsiniz. Bunu, bannerViewDidReceiveAd: etkinliğini dinleyerek yapabilirsiniz:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // 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ı animasyonlu hale getirme

Ayrıca, aşağıdaki örnekte gösterildiği gibi, döndürüldükten sonra bir banner reklamı bir kez canlandırmak için bannerViewDidReceiveAd: etkinliğini de kullanabilirsiniz:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  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ıklama sonucunda yer paylaşımının gösterilmesi veya kapatılması gibi etkinlikler hakkında sizi bilgilendirecek yöntemler bulunur. Bu etkinliklerin reklamlardan kaynaklanıp kaynaklanmadığını izlemek istiyorsanız aşağıdaki GADBannerViewDelegate yöntemlere kaydolun.

Yalnızca reklam tıklamalarından gelenler değil, her tür yer paylaşımı sunumunu veya harici tarayıcı çağrısını yakalamak için uygulamanızın UIViewController veya UIApplication üzerindeki eşdeğer yöntemleri dinlemesi daha iyi olur. Aşağıdaki tabloda, GADBannerViewDelegate yöntemleriyle aynı anda çağrılan eşdeğer iOS yöntemleri gösterilmektedir:

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

Manuel gösterim sayımı

Gösterimin ne zaman kaydedilmesi gerektiğiyle ilgili ö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 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];

Uygulama etkinlikleri

Uygulama etkinlikleri, uygulama kodlarına mesaj gönderebilen reklamlar oluşturmanıza olanak tanır. Uygulama daha sonra bu mesajlara göre işlem yapabilir.

GADAppEventDelegate kullanarak Ad Manager'a özgü uygulama etkinliklerini dinleyebilirsiniz. Bu etkinlikler, reklamın yaşam döngüsü boyunca herhangi bir zamanda, hatta GADBannerViewDelegate nesnesinin bannerViewDidReceiveAd: çağrılmasından önce bile 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: AdManagerBannerView,
    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, AppEventDelegate {}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

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

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

Uygulama etkinliği aracılığıyla rengi belirterek uygulamanızın arka plan rengini nasıl değiştireceğinizi gösteren bir örneği aşağıda bulabilirsiniz:

Swift

func bannerView(_ banner: AdManagerBannerView, 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];
    }
  }
}

Ayrıca, appEventDelegate adresine renk uygulama etkinliği mesajları gönderen ilgili reklam öğesini aşağıda bulabilirsiniz:

<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 Objective-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 yer paylaşımı olarak sunulan ve reklamı daha küçük bir boyuta daraltma düğmesi 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üksekliğe sahiptir ve cihaz ekranı kadar uzun olabilir. Kaydırılabilir içeriklere banner reklam yerleştiren uygulamalarda sabit uyarlanabilir banner reklamlar yerine satır içi uyarlanabilir banner'lar önerilir. Daha fazla bilgi için satır içi uyarlanabilir banner'lar bölümüne bakın.

Diğer konuları keşfedin