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

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

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

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

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

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

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

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

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

Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для баннеров iOS: /6499/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)
    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)
      ])
   }
   
}

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

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

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

Совет: Чтобы реализовать рекламные баннеры с помощью SwiftUI, см. раздел Баннерная реклама .

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

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

Быстрый

  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 = "/6499/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

Цель-C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/6499/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
  }
}

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

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

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

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

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

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

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

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

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