Banner reklamları oluşturma

Platform seçin: Android iOS Unity Flutter Android (Eski)

Banner reklamlar uygulama düzeninin bir bölümünü kaplayan dikdörtgen reklamlardır. Sabit uyarlanabilir banner'lar her zaman ekrandadır. Ekran boyutunun% 20'si kadar maksimum yükseklikle (maksimum yükseklik 150 piksel) ekranın en üstüne veya en altına sabitlenir. Her cihaz için reklam boyutunu optimize etmek üzere uyarlanabilir banner'ları kullanın.

Bu kılavuzda, iOS uygulamasına sabit uyarlanabilir banner reklam yükleme işlemi ele alınmaktadır.

Ön koşullar

Devam etmeden önce Google Mobile Ads SDK ayarlarını yapın.

Her zaman test reklamlarıyla test edin

Uygulamalarınızı oluşturup test ederken canlı ve üretim reklamları yerine test reklamlarını kullandığınızdan emin olun. Bu koşula uymamanız halinde 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 ve kodlama, test etme ve hata ayıklama sırasında kendi uygulamalarınızda ücretsiz olarak kullanabilirsiniz. Uygulamanızı yayınlamadan önce bu kimliği kendi reklam birimi kimliğinizle değiştirdiğinizden emin olun.

Google Mobile Ads SDK 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 olarak

Bir GAMBannerView doğrudan da örneklenebilir. Aşağıdaki örnekte GAMBannerView oluşturuluyor:

Swift

// Initialize the banner view.
bannerView = AdManagerBannerView()
bannerView.delegate = self

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

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

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

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

Objective-C

// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;

bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[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 activateConstraints:@[
  // Align the banner's bottom edge with the safe area's bottom edge
  [bannerView.bottomAnchor
      constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
  // Center the banner horizontally in the view
  [bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];

self.bannerView = bannerView;

Interface Builder

Film şeridine 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ı Alt Düzen Kılavuzu'nun üst kısmına eşit olarak ayarlayın ve centerX kısıtlamasını üst görünümün centerX değerine eşit olarak ayarlayın.

Reklam boyutunu ayarlama

Büyük uyarlanabilir banner'lar, kaydırılmayan düzenler için tasarlanmış daha büyük bir biçim sunar. Bu banner'lar, standart sabit uyarlanabilir banner'lara kıyasla daha yüksek bir maksimum yüksekliğe (ekran yüksekliğinin% 20'si, 50 ile 150 puan arasında) izin verir. Bu artırılmış alan, video içerikleri için optimize edilmiştir.

Aşağıdaki örnekte büyük bir sabit uyarlanabilir banner boyutu alınmaktadır:

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

Reklam yükleme

GAMBannerView yerleştirildikten ve adUnitID gibi özellikleri yapılandırıldıktan sonra reklam yükleme zamanı gelmiştir. Bunu yapmak için bir GAMRequest nesnesinde loadRequest: yöntemini çağırın:

Swift

func loadBannerAd(bannerView: AdManagerBannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(AdManagerRequest())
}

SwiftUI

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

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

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

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, Ad Manager kullanıcı arayüzünde belirttiğiniz yenileme hızı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.

Yön değişikliklerini işleme

Uygulamanızın ekran yönü değiştiğinde (ör. portrait modundan yatay moda geçildiğinde) banner'ın kullanılabilir genişliği de genellikle değişir. Yeni düzende uygun boyutta bir reklam görüntülediğinizden emin olmak için yeni bir banner isteyin. Banner genişliğiniz statikse veya düzen kısıtlamalarınız yeniden boyutlandırmayı destekliyorsa bu adımı atlayın.

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}

Reklam etkinlikleri

GADBannerViewDelegate kullanarak 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 delegate özelliğini GAMBannerView üzerinde GADBannerViewDelegate protokolünü uygulayan bir nesneye 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

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

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("Banner ad loaded.")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("Banner ad failed to load: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("Banner ad recorded an impression.")
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print("Banner ad recorded a click.")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("Banner ad will present screen.")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("Banner ad will dismiss screen.")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print("Banner ad did dismiss screen.")
}

Objective-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}

- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}

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 bazı örnek kullanım alanları aşağıda verilmiştir.

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

Görünüm hiyerarşisine GAMBannerView eklemeyi reklam alınana kadar erteleyebilirsiniz. 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 reklama animasyon ekleme

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 nedeniyle yer paylaşımının gösterilmesi veya kapatılması gibi etkinlikleri size bildiren 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, tüm yer paylaşımı sunumlarını 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 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

GADAppEventDelegate kullanarak Ad Manager'a özgü uygulama etkinliklerini dinleyebilirsiniz. Bu etkinlikler, reklamın yaşam döngüsü sırasında herhangi bir zamanda, hatta GADBannerViewDelegate nesnesinin bannerViewDidReceiveAd: yöntemi çağrılmadan önce bile gerçekleşebilir.

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

Swift

// Set this property before making the request for an ad.
bannerView.appEventDelegate = self

Objective-C

// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;

Aşağıda, bir uygulama etkinliğinden renk belirterek uygulamanızın arka plan rengini nasıl değiştireceğinizi gösteren bir örnek verilmiştir:

Swift

func bannerView(
  _ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
  if name == "color" {
    if info == "green" {
      // Set background color to green.
      view.backgroundColor = UIColor.green
    } else if info == "blue" {
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    } else {
      // 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 uygulama etkinliği mesajlarını appEventDelegate adresine gönderen ilgili reklam öğesi yer almaktadır:

<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 daraltmak için bir düğme içeren banner reklamlardır. Performansınızı daha da optimize etmek için bu stratejiyi 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 büyük ve daha uzun banner'lardır. Yükseklikleri değişkendir ve cihaz ekranı kadar yüksek olabilirler. 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'lar bölümüne bakın.

Diğer konuları keşfedin