Как настроить баннеры

Баннеры – это прямоугольные объявления, которые размещаются на определенном месте в макете приложения. Фиксированные адаптивные баннеры всегда видны на экране, закреплены в его верхней или нижней части и имеют максимальную высоту 20 % от размера экрана (не более 150 пикселей). Чтобы оптимизировать размер объявлений для каждого устройства, используйте адаптивные баннеры.

В этом руководстве рассказывается, как загрузить фиксированный адаптивный баннер в приложение для iOS.

Требования

Прежде чем продолжить, настройте Google Mobile Ads SDK.

Всегда используйте тестовые объявления

При создании и тестировании приложений используйте тестовые объявления, а не реальные. В противном случае ваш аккаунт может быть заблокирован.

Проще всего загрузить тестовые объявления, используя идентификатор тестового рекламного блока для баннеров iOS:

/21775744923/example/adaptive-banner

Он специально настроен так, чтобы возвращать тестовые объявления для каждого запроса. Вы можете использовать его в своих приложениях при написании кода, тестировании и отладке. Перед публикацией приложения не забудьте заменить его идентификатором своего рекламного блока.

Подробнее о том, как работают тестовые объявления Google Mobile Ads SDK, читайте в статье Тестовые объявления.

Создание объекта GAMBannerView

Баннеры показываются в объектах GAMBannerView, поэтому сначала нужно добавить GAMBannerView в иерархию View. Обычно это делается программно или с помощью Interface Builder.

Программные средства

Экземпляр GAMBannerView также можно создать напрямую. В следующем примере создается объект GAMBannerView:

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, создайте UIViewRepresentable:

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 в иерархию View, указав значения height и width:

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

Вы можете добавить GAMBannerView в раскадровку или файл XIB. При использовании этого метода обязательно добавьте ограничения по позиции только для баннера. Например, если адаптивный баннер показывается в нижней части экрана, нижний край баннера должен совпадать с верхним краем Bottom Layout Guide, а ограничение centerX должно быть равно centerX суперпредставления.

Как задать размер объявления

Большие адаптивные баннеры – это формат, предназначенный для макетов без прокрутки. По сравнению со стандартными фиксированными адаптивными баннерами у этих баннеров больше максимальная высота (до 20 % от высоты экрана, от 50 до 150 точек). Это увеличенное пространство оптимизировано для видеоконтента.

В примере ниже показано, как получить размер большого фиксированного адаптивного баннера.

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

Задайте размер объявления, который не превышает размер экрана устройства. Чтобы определить максимальный размер экрана на устройствах iOS 26 и более поздних версий, используйте свойство UIWindowScene.effectiveGeometry.coordinateSpace. На устройствах с iOS 18 и более ранними версиями используйте свойство UIWindowScene.coordinateSpace. Подробнее об ограничениях по размеру…

Загрузка объявления

После того как вы добавите объект GAMBannerView и настроите его свойства, например adUnitID, можно загружать объявление. Для этого вызовите метод loadRequest: для объекта GAMRequest:

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 представляют собой отдельные запросы объявлений и содержат свойства, например информацию о таргетинге.

Как обновить объявление

Если вы настроили обновление рекламного блока, то вам не нужно запрашивать другое объявление, когда не удается загрузить текущее. Google Mobile Ads SDK учитывает частоту обновления, заданную в интерфейсе Менеджера рекламы. Если вы не включили обновление, отправьте новый запрос. Подробнее о том, как задать частоту обновления рекламных блоков, читайте в статье Частота обновления объявлений в мобильных приложениях.

Обработка изменений ориентации

При изменении ориентации экрана приложения, например с portrait на горизонтальную, доступная ширина баннера часто также меняется. Чтобы в новом макете показывалось объявление подходящего размера, запросите новый баннер. Если ширина баннера статична или ограничения макета позволяют изменить размер, пропустите этот шаг.

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

Рекламные события

С помощью GADBannerViewDelegate вы можете отслеживать события жизненного цикла, например когда объявление закрыто или пользователь покинул приложение.

Регистрация событий баннера

Чтобы зарегистрироваться для получения событий баннера, задайте для свойства delegate в GAMBannerView объект, который реализует протокол GADBannerViewDelegate. Как правило, класс, реализующий баннеры, также выступает в качестве класса делегата. В этом случае свойству delegate можно присвоить значение self.

Swift

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

Как реализовать события баннеров

Все методы в GADBannerViewDelegate необязательны, поэтому вы можете реализовать только те, которые вам нужны. В этом примере реализуется каждый метод и регистрируется сообщение в консоли:

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 можно найти в разделе Ad Delegate.

Swift Objective-C

Примеры использования

Ниже приведены примеры использования этих методов.

Добавление баннера в иерархию View после получения объявления

Вы можете отложить добавление GAMBannerView в иерархию View до получения объявления. Для этого нужно прослушивать событие bannerViewDidReceiveAd::

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

Как анимировать баннер

Вы также можете использовать событие bannerViewDidReceiveAd:, чтобы анимировать баннер после его возврата, как показано в примере ниже.

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

Как приостановить и возобновить работу приложения

Протокол GADBannerViewDelegate содержит методы, которые позволяют получать уведомления о событиях, например когда клик приводит к показу или закрытию оверлея. Если вы хотите отслеживать, связаны ли эти события с рекламой, зарегистрируйте эти методы GADBannerViewDelegate.

Чтобы отслеживать все типы оверлеев или вызовов внешнего браузера, а не только те, которые происходят в результате кликов по объявлениям, в приложении лучше использовать эквивалентные методы для UIViewController или UIApplication. В таблице ниже приведены эквивалентные методы iOS, которые вызываются одновременно с методами GADBannerViewDelegate.

Метод GADBannerViewDelegate Способ для iOS
bannerViewWillPresentScreen: viewWillDisappear: UIViewController
bannerViewWillDismissScreen: viewWillAppear: UIViewController
bannerViewDidDismissScreen: viewDidAppear: UIViewController

Подсчет количества показов вручную

Если у вас есть особые условия, при которых должен регистрироваться показ, вы можете вручную отправлять в Менеджер рекламы запросы ping. Для этого перед загрузкой объявления нужно включить GAMBannerView для показов, регистрируемых вручную:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Если вы определили, что объявление было успешно возвращено и находится на экране, вы можете вручную активировать показ:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

События в приложении

Вы можете отслеживать события в приложении, относящиеся к Менеджеру рекламы, с помощью GADAppEventDelegate. Эти события могут происходить в любой момент жизненного цикла объявления, даже до вызова метода bannerViewDidReceiveAd: объекта GADBannerViewDelegate.

Чтобы зарегистрироваться для получения событий приложения, задайте для свойства делегата в GAMBannerView объект, реализующий протокол GADAppEventDelegate. Как правило, класс, реализующий баннеры, также выступает в качестве класса делегата. В этом случае свойству делегата можно присвоить значение self.

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;

Ниже показано, как изменить цвет фона приложения, указав цвет в событии приложения.

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

Ниже приведен код креатива, который отправляет в 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>

Пример реализации событий приложения в демонстрационном приложении iOS API можно найти в разделе "События приложения Менеджера рекламы".

Swift Objective-C

Дополнительные ресурсы

Примеры на GitHub

  • Демонстрация продвинутых функций: Swift | Objective-C

Дальнейшие действия

Сворачиваемые баннеры

Сворачиваемые баннеры – это баннеры, которые сначала показываются в виде большого оверлея, но их можно свернуть до стандартного размера. Попробуйте использовать его, чтобы повысить эффективность. Подробнее о сворачиваемых баннерах…

Встроенные адаптивные баннеры

Встроенные адаптивные баннеры больше и выше фиксированных. Их высота может быть разной, вплоть до высоты экрана устройства. Встроенные адаптивные баннеры рекомендуется использовать вместо фиксированных адаптивных баннеров в приложениях, где баннеры размещаются в прокручиваемом контенте. Подробнее о встроенных адаптивных баннерах…

Другие темы