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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

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

Предпосылки

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

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

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

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

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

Создайте GAMBannerView

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

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

GAMBannerView можно добавить в раскадровку или xib-файл, как и любой обычный вид. При использовании этого метода не забудьте добавить ограничения по ширине и высоте, чтобы они соответствовали размеру объявления, которое вы хотите отображать. Например, при отображении баннера (320x50) используйте ограничение по ширине в 320 пунктов и ограничение по высоте в 50 пунктов.

Программно

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

Быстрый

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GAMBannerView(adSize: GADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: bottomLayoutGuide,
                          attribute: .top,
                          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];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  


@end

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

Если вы не хотите использовать стандартный размер, определяемый константой, вы можете задать собственный размер с помощью GADAdSizeFromCGSize . Дополнительную информацию см. в разделе «Размер баннера» .

Настройка свойств GAMBannerView

Чтобы загружать и отображать рекламу, GAMBannerView требует установки нескольких свойств.

  • rootViewController — этот контроллер представления используется для представления наложения при нажатии на объявление. Обычно он должен быть установлен на контроллер представления, который содержит GAMBannerView .
  • adUnitID — это идентификатор рекламного блока, из которого GAMBannerView должен загружать рекламу.

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

Быстрый

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
}

Цель-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
}

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

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

Быстрый

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
  bannerView.load(GAMRequest())
}

Цель-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GAMRequest request]];
}

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

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

С помощью 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.

Свифт Цель-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 viewDidAppear:

В таблице ниже перечислены стандартные размеры баннеров.

Размер в пунктах (ШхВ) Описание Доступность Константа AdSize
320x50 Баннер Телефоны и планшеты GADAdSizeBanner
320x100 Большой баннер Телефоны и планшеты GADAdSizeLargeBanner
300 x 250 IAB средний прямоугольник Телефоны и планшеты GADAdSizeMediumRectangle
468x60 Полноразмерный баннер IAB Таблетки GADAdSizeFullBanner
728x90 Таблица лидеров IAB Таблетки GADAdSizeLeaderboard
Предоставленная ширина x адаптивная высота Адаптивный баннер Телефоны и планшеты Н/Д

Пользовательские размеры объявлений

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

Быстрый

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Цель-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

Пользовательский размер объявления

В дополнение к стандартным рекламным блокам Google Ad Manager позволяет размещать рекламные блоки любого размера в приложении. Размер объявления (ширина, высота), определенный для запроса объявления, должен соответствовать размерам представления объявления ( GAMBannerView ), отображаемого в приложении. Чтобы задать собственный размер, используйте GADAdSizeFromCGSize .

Быстрый

// Define custom GADAdSize of 250x250 for GAMBannerView.
let customAdSize = GADAdSizeFromCGSize(CGSize(width: 250, height: 250))
bannerView = GAMBannerView(adSize: customAdSize)

Цель-C

// Define custom GADAdSize of 250x250 for GAMBannerView
GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(250, 250));
self.bannerView = [[GAMBannerView alloc] initWithAdSize:customAdSize];

См. пример с несколькими размерами объявлений в Менеджере рекламы, чтобы узнать о реализации нестандартных размеров объявлений в демонстрационном приложении iOS API.

Свифт Цель-C

Несколько размеров объявлений

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

  1. В интерфейсе Менеджера рекламы создайте позицию с таргетингом на тот же рекламный блок, который связан с креативами разных размеров.

  2. В своем приложении установите свойство validAdSizes в GAMBannerView :

    Быстрый

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    bannerView.validAdSizes = [NSValueFromGADAdSize(GADAdSizeBanner),
        NSValueFromGADAdSize(GADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSize(width: 120, height: 20)))]
    

    Цель-C

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    self.bannerView.validAdSizes = @[
        NSValueFromGADAdSize(GADAdSizeBanner),
        NSValueFromGADAdSize(GADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSizeMake(120, 20)))
    ];
    
  3. GADAdSizeDelegate метод GADAdSizeDelegate для обнаружения изменения размера объявления.

    Быстрый

    public func bannerView(_ bannerView: GADBannerView, willChangeAdSizeTo size: GADAdSize)
    

    Цель-C

    • (void)bannerView:(GAMBannerView *)view willChangeAdSizeTo:(GADAdSize)size;
  4. Не забудьте установить делегат перед тем, как сделать запрос на рекламу.

    Быстрый

    bannerView.adSizeDelegate = self

    Цель-C

    self.bannerView.adSizeDelegate = self;

См. пример с несколькими размерами объявлений в Менеджере рекламы, чтобы узнать о реализации нестандартных размеров объявлений в демонстрационном приложении iOS API.

Свифт Цель-C

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

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

Быстрый

bannerView.enableManualImpressions = true

Цель-C

self.bannerView.enableManualImpressions = YES;

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

Быстрый

bannerView.recordImpression()

Цель-C

[self.bannerView recordImpression];

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

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

Вы можете прослушивать события приложений Менеджера рекламы с помощью GADAppEventDelegate . Эти события могут произойти в любое время в течение жизненного цикла объявления, даже до GADBannerViewDelegate 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.

Свифт Цель-C

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

Примеры на GitHub

  • Пример баннерной рекламы: Swift | Цель-C

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

Видеоуроки Mobile Ads Garage