Баннерная реклама — это прямоугольная реклама, занимающая часть макета приложения. Они остаются на экране, пока пользователи взаимодействуют с приложением, либо закреплены в верхней или нижней части экрана, либо встроены в контент при прокрутке пользователем. Баннерная реклама может обновляться автоматически через определенный период времени. Дополнительную информацию см. в разделе Обзор баннерной рекламы .
В этом руководстве показано, как начать работу с привязанными адаптивными баннерными объявлениями , которые максимизируют эффективность за счет оптимизации размера объявления для каждого устройства с использованием указанной вами ширины объявления.
Закрепленный адаптивный баннер
Закрепленные адаптивные баннеры представляют собой рекламу с фиксированным соотношением сторон, а не обычную рекламу с фиксированным размером. Соотношение сторон соответствует отраслевому стандарту 320*50. Как только вы укажете полную доступную ширину, вам будет возвращено объявление с оптимальной высотой для этой ширины. Оптимальная высота не меняется при запросах с одного и того же устройства, а окружающие виды не должны перемещаться при обновлении объявления.
Предварительные условия
- Заполните руководство по началу работы .
Всегда тестируйте с помощью тестовых объявлений
При создании и тестировании приложений убедитесь, что вы используете тестовые объявления, а не действующие, рабочие. Несоблюдение этого требования может привести к блокировке вашего аккаунта.
Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для баннеров 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) 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
Обратите внимание, что в этом случае мы не задаем ограничений по ширине или высоте, поскольку указанный размер объявления будет придавать баннеру внутренний размер контента для определения размера представления.
Разработчик интерфейсов
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 = "/21775744923/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 = @"/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 } }
Цель-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.
Варианты использования
Вот несколько примеров использования этих методов рекламных событий.
Добавление баннера в иерархию представлений после получения объявления
Возможно, вы захотите отложить добавление 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];
События приложения
События приложения позволяют создавать рекламу, которая может отправлять сообщения в код приложения. Затем приложение может предпринимать действия на основе этих сообщений.
Вы можете прослушивать события приложения, специфичные для Менеджера рекламы, с помощью 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.
Дополнительные ресурсы
Примеры на GitHub
Следующие шаги
Складные баннеры
Сворачиваемые рекламные баннеры — это рекламные баннеры, которые изначально представляются как наложенное изображение большего размера с кнопкой, позволяющей свернуть объявление до меньшего размера. Рассмотрите возможность его использования для дальнейшей оптимизации вашей производительности. Подробнее см. в разделе складные рекламные баннеры .
Встроенные адаптивные баннеры
Встроенные адаптивные баннеры больше и выше по сравнению с прикрепленными адаптивными баннерами. Они имеют переменную высоту и могут достигать высоты экрана устройства. Встроенные адаптивные баннеры рекомендуются вместо привязанных адаптивных баннеров для приложений, которые размещают рекламные баннеры в прокручиваемом контенте. Более подробную информацию см. в разделе встроенные адаптивные баннеры .