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

Выберите платформу: Android iOS Unity Flutter

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

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

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

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

Предпосылки

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

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

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

/21775744923/example/adaptive-banner

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

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

Создать GAMBannerView

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

Программно

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

Быстрый 

// Initialize the BannerView.
bannerView = BannerView()

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),
])
BannerSnippets.swift

SwiftUI

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

Добавьте свой 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)
}
BannerContentView.swift

Objective-C 

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.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
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

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

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

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

Установите структуру GADSize для привязанного типа адаптивного баннера с указанной шириной:

Быстрый 

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

Objective-C 

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

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

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

Быстрый 

bannerView.load(AdManagerRequest())
ViewController.swift

SwiftUI 

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

Objective-C 

[self.bannerView loadRequest:[GAMRequest request]];
ViewController.m

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

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

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

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

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

Быстрый 

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}
BannerSnippets.swift

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];
}
BannerSnippets.m

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

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

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

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

Быстрый 

bannerView.delegate = self
ViewController.swift

SwiftUI 

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C 

self.bannerView.delegate = self;
ViewController.m

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

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

Быстрый 

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

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");
}
ViewController.m

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

Swift Objective-C

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

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

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

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

Быстрый 

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

Objective-C 

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

Objective-C 

self.bannerView.enableManualImpressions = YES;

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

Быстрый 

bannerView.recordImpression()

Objective-C 

[self.bannerView recordImpression];

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

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

Вы можете прослушивать события приложения, специфичные для Менеджера рекламы, с помощью 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: AdManagerBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-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, AppEventDelegate {}

Objective-C 

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

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

Быстрый 

bannerView.appEventDelegate = self

Objective-C 

self.bannerView.appEventDelegate = self;

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

Быстрый 

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

Objective-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>

Реализацию событий приложения в демонстрационном приложении API iOS см. в примере «События приложения Менеджера рекламы».

Swift Objective-C

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

Примеры на GitHub

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

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

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

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

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

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

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