Настройка баннерной рекламы, Настройка баннерной рекламы

Выберите платформу: Android (бета-версия)Новый Android iOS Unity Flutter

Баннерная реклама — это прямоугольные объявления, занимающие часть макета приложения. Адаптивные баннеры всегда отображаются на экране, прикрепляясь к верхней или нижней части экрана, с максимальной высотой 20% от размера экрана и максимальной высотой 150 пикселей. Для оптимизации размера рекламы для каждого устройства используйте адаптивные баннеры.

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

Предварительные требования

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

Всегда проводите тестирование с помощью тестовых объявлений.

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

Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для баннеров iOS:

ca-app-pub-3940256099942544/2435281174

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

Для получения дополнительной информации о том, как работают тестовые объявления Google Mobile Ads SDK , см. раздел «Тестовые объявления» .

Создайте GADBannerView

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

Программно

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

Быстрый

// Initialize the banner view.
bannerView = BannerView()
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

Для использования BannerView создайте объект 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 в иерархию представлений, указав значения height и width :

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

Objective-C

// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView 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;

Конструктор интерфейсов

Вы можете добавить GADBannerView в раскадровку или файл xib. При использовании этого метода убедитесь, что ограничения по положению применяются только к баннеру. Например, при отображении адаптивного баннера внизу экрана установите нижнюю границу баннера равной верхней границе нижней направляющей компоновки, а ограничение centerX — равному centerX родительского элемента.

Установите размер объявления

В следующем примере отображается большой адаптивный баннер с привязкой к определенному месту:

Быстрый

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

Загрузить рекламу

После того, как GADBannerView создан и настроены его свойства, такие как adUnitID , настало время загрузить рекламу. Это делается путем вызова loadRequest: для объекта GADRequest :

Быстрый

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

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:[GADRequest request]];

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

Обновить рекламу

Если вы настроили автоматическое обновление рекламного блока, вам не нужно запрашивать новый рекламный блок, если предыдущий не загрузился. Google Mobile Ads SDK учитывает любую частоту обновления, указанную вами в пользовательском интерфейсе AdMob. Если вы не включили автоматическое обновление, отправьте новый запрос. Для получения более подробной информации об обновлении рекламного блока, например, о настройке частоты обновления, см. раздел «Использование автоматического обновления для баннерной рекламы» .

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

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

Быстрый

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 объекта GADBannerView на объект, реализующий протокол GADBannerViewDelegate . Как правило, класс, реализующий интерфейс баннерной рекламы, также выступает в качестве класса-делегата, в этом случае свойство delegate можно установить на self .

Быстрый

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

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

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

Быстрый

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:(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 Delegate.

Swift Objective-C

Варианты использования

Вот несколько примеров использования этих методов обработки рекламных событий.

После получения объявления добавьте баннер в иерархию представлений.

Возможно, вам захочется отложить добавление GADBannerView в иерархию представлений до получения объявления. Это можно сделать, отслеживая событие bannerViewDidReceiveAd: :

Быстрый

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

Objective-C

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

Анимируйте рекламный баннер

Также можно использовать событие bannerViewDidReceiveAd: для анимации баннерной рекламы после её получения, как показано в следующем примере:

Быстрый

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

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

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

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

Метод GADBannerViewDelegate метод iOS
bannerViewWillPresentScreen: viewWillDisappear:
bannerViewWillDismissScreen: viewWillAppear:
bannerViewDidDismissScreen: viewDidAppear:

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

Примеры на GitHub

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

Следующие шаги

Складные баннеры

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

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

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

Изучите другие темы