Рекламные баннеры

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

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

Закрепленный адаптивный баннер

Закрепленные адаптивные баннеры представляют собой рекламу с фиксированным соотношением сторон, а не обычную рекламу с фиксированным размером. Соотношение сторон соответствует отраслевому стандарту 320x50. Как только вы укажете доступную полную ширину, будет возвращено объявление с оптимальной высотой для этой ширины. Оптимальная высота не меняется при запросах с одного и того же устройства, а окружающие виды не должны перемещаться при обновлении объявления.

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

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

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

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

ca-app-pub-3940256099942544/2435281174

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

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

Создайте GADBannerView.

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

Программно

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

Быстрый

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  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 = GADBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    // This example doesn't give width or height constraints, as the provided
    // ad size gives the banner an intrinsic content size to size the view.
    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)
      ])
  }
}

SwiftUI

Чтобы использовать GADBannerView , создайте UIViewRepresentable :

private struct BannerView: UIViewRepresentable {
  let adSize: GADAdSize

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

  func makeUIView(context: Context) -> UIView {
    // Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
    // frame size changes; wrapping in a UIView container insulates the GADBannerView from size
    // changes that impact the view returned from makeUIView.
    let view = UIView()
    view.addSubview(context.coordinator.bannerView)
    return view
  }

  func updateUIView(_ uiView: UIView, context: Context) {
    context.coordinator.bannerView.adSize = adSize
  }

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }

Для управления инициализацией и поведением GADBannerView создайте Coordinator :

class BannerCoordinator: NSObject, GADBannerViewDelegate {

  private(set) lazy var bannerView: GADBannerView = {
    let banner = GADBannerView(adSize: parent.adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(GADRequest())
    banner.delegate = self
    return banner
  }()

  let parent: BannerView

  init(_ parent: BannerView) {
    self.parent = parent
  }

Чтобы получить ширину представления, используйте GeometryReader . Этот класс вычисляет подходящий размер объявления для текущей ориентации устройства. Высота frame рассчитывается исходя из размера объявления.

var body: some View {
  GeometryReader { geometry in
    let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)

    VStack {
      Spacer()
      BannerView(adSize)
        .frame(height: adSize.size.height)
    }
  }

Цель-C

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

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GADBannerView *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 = [[GADBannerView alloc] initWithAdSize:adaptiveSize];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  // This example doesn't give width or height constraints, as the provided
  // ad size gives the banner an intrinsic content size to size the view.
  [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

Разработчик интерфейсов

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

Размер баннера по-прежнему задается программно:

Быстрый

bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Цель-C

self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

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

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

Быстрый

override func viewDidLoad() {
  super.viewDidLoad()
  // Set the ad unit ID and view controller that contains the GADBannerView.
  bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
  bannerView.rootViewController = self

  bannerView.load(GADRequest())
}

SwiftUI

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

Цель-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Set the ad unit ID and view controller that contains the GADBannerView.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GADRequest request]];
}

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

Обновить объявление

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

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

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

Зарегистрируйтесь на баннерные мероприятия

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

Быстрый

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // ...
    bannerView.delegate = self
  }
}

SwiftUI

banner.delegate = self

Цель-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

-   (void)viewDidLoad {
  [super viewDidLoad];
  // ...
  self.bannerView.delegate = self;
}

Реализация баннерных событий

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

Быстрый

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

Цель-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");
}

См. пример Ad Delegate для реализации методов делегата баннера в демонстрационном приложении iOS API.

Swift Objective-C

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

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

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

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

Быстрый

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

Цель-C

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

Анимация рекламного баннера

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

Быстрый

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

Цель-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 | Цель-C

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

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

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

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

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

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