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

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

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

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

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

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

• Заполните руководство по началу работы .

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

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

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

/21775744923/example/adaptive-banner

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

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

Создайте GAMBannerView

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

Программно

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

Быстрый

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

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

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    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

Чтобы использовать GAMBannerView , создайте 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)
  }
BannerContentView.swift

Чтобы управлять инициализацией и поведением GAMBannerView , создайте 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
  }
BannerContentView.swift

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

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

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

Цель-C

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

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GAMBannerView *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 = [[GAMBannerView 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

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

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

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

Быстрый

bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Цель-C

self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

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

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

Быстрый

override func viewDidLoad() {
  super.viewDidLoad()
  // Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/21775744923/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

SwiftUI

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

Цель-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;

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

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

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

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

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

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

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

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

Быстрый

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

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

SwiftUI

banner.delegate = self
BannerContentView.swift

Цель-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *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

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

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

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

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

Быстрый

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

Цель-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)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:(GAMBannerView *)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:

Ручной подсчет показов

Важно! Подсчет показов вручную возможен только для кампаний с прямой продажей и собственных кампаний (то есть креативов, размещаемых непосредственно в Менеджере рекламы). Его не следует использовать для заполнения или рекламы в сторонних сетях. Более подробную информацию можно найти в этой статье Справочного центра .

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

Быстрый

bannerView.enableManualImpressions = true

Цель-C

self.bannerView.enableManualImpressions = YES;

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

Быстрый

bannerView.recordImpression()

Цель-C

[self.bannerView recordImpression];

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

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

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

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

Быстрый

// 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: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

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

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

Быстрый

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {}

Цель-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

Не забудьте установить делегат с помощью свойства appEventDelegate перед отправкой запроса на объявление.

Быстрый

bannerView.appEventDelegate = self

Цель-C

self.bannerView.appEventDelegate = self;

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

Быстрый

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

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

• Демонстрация расширенных функций: Swift | Цель-C

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

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

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

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

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

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

• Конфиденциальность пользователя