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

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

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

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

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

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

Предпосылки

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

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

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

ca-app-pub-3940256099942544/2435281174

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

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

Создать GADBannerView

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

Программно

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

Быстрый 

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

Чтобы использовать BannerView , создайте 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

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

Вы можете добавить GADBannerView в раскадровку или 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

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

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

Быстрый 

bannerView.load(Request())
ViewController.swift

SwiftUI 

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

Objective-C 

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

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

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

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

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

При изменении ориентации экрана вашего приложения, например, с 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 в GADBannerView на объект, реализующий протокол 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

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

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

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

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

Быстрый 

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

Objective-C 

- (void)bannerViewDidReceiveAd:(GADBannerView *)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:(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 | SwiftUI | Objective-C
  • Демонстрация расширенных функций: Swift | Objective-C

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

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

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

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

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

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