Сервис для
сео - оптимизаторов

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

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

  1. Предпосылки
  2. Создать GADBannerView
  3. Интерфейсный Разработчик
  4. Программный
  5. стриж
  6. Objective-C
  7. Настройте свойства GADBannerView
  8. стриж
  9. Objective-C
  10. Загрузить объявление
  11. стриж
  12. Objective-C
  13. Рекламные события
  14. стриж
  15. Objective-C
  16. Реализация баннерных событий
  17. стриж
  18. Objective-C
  19. Случаи применения
  20. Добавление баннера в иерархию просмотра после получения объявления
  21. стриж
  22. Objective-C
  23. Анимация рекламного баннера
  24. стриж
  25. Objective-C
  26. Приостановка и возобновление работы приложения
  27. Размеры баннера
  28. Нестандартные размеры объявлений
  29. стриж
  30. Objective-C
  31. Умные Баннеры
  32. стриж
  33. Objective-C
  34. стриж
  35. Objective-C
  36. Дополнительные ресурсы

Баннерная реклама - это прямоугольная графическая или текстовая реклама, которая занимает место в макете приложения

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

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

Предпосылки

Всегда тестируйте с тестовой рекламой

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

Самый простой способ загрузить тестовую рекламу - использовать наш специальный идентификатор тестового рекламного блока для баннеров iOS: ca-app-pub-3940256099942544/2934735716

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

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

Создать GADBannerView

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

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

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

Программный

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

стриж

import GoogleMobileAds

import UIKit class ViewController: UIViewController { var bannerView: GADBannerView! override func viewDidLoad () {super.viewDidLoad () // В этом случае мы создаем экземпляр баннера с желаемым размером объявления. bannerView = GADBannerView (adSize: kGADAdSizeBanner) addBannerViewToView (bannerView)} func addBannerViewToView (_ bannerView: GADBannerView) {bannerView.translatesAutoresizingMaskIntoConstraints = ложный view.addSubview : .equal, toItem: bottomLayoutGuide, атрибут: .top, множитель: 1, константа: 0), NSLayoutConstraint (item: bannerView, атрибут: .centerX, relatedBy: .equal, toItem: view, атрибут: .centerX, множитель: 1 , константа: 0)])} }

Objective-C

@import GoogleMobileAds;

@interface ViewController () @property (неатомный, сильный) GADBannerView * bannerView; @end @implementation ViewController - (void) viewDidLoad {[super viewDidLoad]; // В этом случае мы создаем экземпляр баннера с желаемым размером объявления. self.bannerView = [[GADBannerView alloc] initWithAdSize: kGADAdSizeBanner]; [self addBannerViewToView: self.bannerView]; } - (void) addBannerViewToView: (UIView *) bannerView {bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview: bannerView]; [self.view addConstraints: @ [[NSLayoutConstraint constraintWithItem: атрибут bannerView: NSLayoutAttributeBottom relatedBy: NSLayoutRelationEqual toItem: атрибут self.bottomLayoutGuide: NSLayoutAttributeTop множитель: 1 константа: 0], [NSLayoutConstraint constraintWithItem: атрибут bannerView: NSLayoutAttributeCenterX relatedBy: NSLayoutRelationEqual toItem: самостоятельно. атрибут представления: множитель NSLayoutAttributeCenterX: 1 константа: 0]]]; } @end

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

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

Настройте свойства GADBannerView

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

  • RootViewController - Этот контроллер представления используется для представления наложения при нажатии на объявление. Обычно он должен быть установлен на контроллер представления, который содержит GADBannerView.
  • AdUnitId - Это идентификатор рекламного блока, из которого GADBannerView должен загружать рекламу.

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

стриж

переопределить func viewDidLoad () {super.viewDidLoad () ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self }

Objective-C

- (void) viewDidLoad {[super viewDidLoad]; ... self.bannerView.adUnitID = @ "ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; }

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

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

стриж

переопределить func viewDidLoad () {super.viewDidLoad () ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self bannerView.load (GADRequest ()) }

Objective-C

- (void) viewDidLoad {[super viewDidLoad]; ... self.bannerView.adUnitID = @ "ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; [self.bannerView loadRequest: [запрос GADRequest]]; }

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

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

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

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

стриж

import GoogleMobileAds

import UIKit class ViewController: UIViewController, GADBannerViewDelegate {var bannerView: GADBannerView! переопределить func viewDidLoad () {super.viewDidLoad () ... bannerView.delegate = self }}

Objective-C

@import GoogleMobileAds; @interface ViewController () < GADBannerViewDelegate > @property (неатомный, сильный) GADBannerView * bannerView; @end @implementation ViewController - (void) viewDidLoad {[super viewDidLoad]; ... self.bannerView.delegate = self; }

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

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

стриж

/// Сообщает делегату о запросе объявления, загрузившего объявление. func adViewDidReceiveAd (_ bannerView: GADBannerView) {print ("adViewDidReceiveAd")} /// Сообщает делегату, что запрос объявления не выполнен. func adView (_ bannerView: GADBannerView, didFailToReceiveAdWithError error: GADRequestError) {print ("adView: didFailToReceiveAdWithError: \ (error.localizedDescription)")} /// Сообщает делегату, что в ответ будет представлен полноэкранный вид /// пользователю, нажимающему на объявление. func adViewWillPresentScreen (_ bannerView: GADBannerView) {print ("adViewWillPresentScreen")} /// Сообщает делегату, что полноэкранное представление будет отклонено. func adViewWillDismissScreen (_ bannerView: GADBannerView) {print ("adViewWillDismissScreen")} /// Сообщает делегату, что полноэкранное представление было отклонено. func adViewDidDismissScreen (_ bannerView: GADBannerView) {print ("adViewDidDismissScreen")} /// Сообщает делегату, что пользовательский щелчок откроет другое приложение (например, /// App Store), фоновое для текущего приложения. func adViewWillLeaveApplication (_ bannerView: GADBannerView) {print ("adViewWillLeaveApplication")}

Objective-C

/// Сообщает делегату о запросе объявления, загрузившего объявление. - (void) adViewDidReceiveAd: (GADBannerView *) adView {NSLog (@ "adViewDidReceiveAd"); } /// Сообщает делегату, что запрос объявления не выполнен. - (void) adView: (GADBannerView *) adView didFailToReceiveAdWithError: (GADRequestError *) error {NSLog (@ "adView: didFailToReceiveAdWithError:% @", [error localizedDescription]); } /// Сообщает делегату, что полноэкранное представление будет представлено в ответ /// пользователю, нажимающему на объявление. - (void) adViewWillPresentScreen: (GADBannerView *) adView {NSLog (@ "adViewWillPresentScreen"); } /// Сообщает делегату, что полноэкранный режим будет отклонен. - (void) adViewWillDismissScreen: (GADBannerView *) adView {NSLog (@ "adViewWillDismissScreen"); } /// Сообщает делегату, что полноэкранный режим отклонен. - (void) adViewDidDismissScreen: (GADBannerView *) adView {NSLog (@ "adViewDidDismissScreen"); } /// Сообщает делегату, что пользовательский щелчок откроет другое приложение (например, /// App Store) с фоновым изображением текущего приложения. - (void) adViewWillLeaveApplication: (GADBannerView *) adView {NSLog (@ "adViewWillLeaveApplication"); }

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

стриж Objective-C

Случаи применения

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

Добавление баннера в иерархию просмотра после получения объявления

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

стриж

func adViewDidReceiveAd (_ bannerView: GADBannerView) {// Добавить баннер для просмотра и добавить ограничения, как указано выше. addBannerViewToView (bannerView)}

Objective-C

- (void) adViewDidReceiveAd: (GADBannerView *) adView {// Добавить adView для просмотра и добавить ограничения, как указано выше. [self addBannerViewToView: self.bannerView]; }

Анимация рекламного баннера

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

стриж

func adViewDidReceiveAd (_ bannerView: GADBannerView) {bannerView.alpha = 0 UIView.animate (withDuration: 1, анимации: {bannerView.alpha = 1})}

Objective-C

- (void) adViewDidReceiveAd: (GADBannerView *) adView {adView.alpha = 0; [UIView animateWithDuration: 1.0 анимации: ^ {adView.alpha = 1; }]; }

Приостановка и возобновление работы приложения

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

Чтобы отлавливать все типы наложенных презентаций или вызовов внешнего браузера, а не только те, которые возникают при кликах по рекламе, вашему приложению лучше прослушивать эквивалентные методы в UIViewController или UIApplication. Вот таблица, показывающая эквивалентные методы iOS, которые вызываются одновременно с методами GADBannerViewDelegate:

Метод GADBannerViewDelegate Метод iOS Метод adViewWillPresentScreen: представление UIViewControllerWillDisappear: adViewWillDismissScreen: представление UIViewControllerWillAppear: представление adDidDismissScreen: UIViewController viewDidAppeA

Размеры баннера

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

Размер в точках (ШхВ) Описание Доступность Постоянная AdSize 320x50 Баннер Телефоны и планшеты kGADAdSizeBanner 320x100 Большой баннер Телефоны и планшеты kGADAdSizeLargeBanner 300x250 IAB, средний прямоугольник Телефоны и планшеты kGADAdSizeMediumRectangle 468x60 Полноразмерный баннер IAB Таблетки для планшетов IGA KGADAdaderSizeBreadsizeBDGSDGSizeSizeBreadsBreadSizeSizeBreadSizeSignBackSizeSizeBreadSizeSignBackSDGSizeSizeBreadSizeSignBackSizeSizeBreadSizeSignBreadSizeSignSizeBreadSizeSignSerbableSizeSigningSignSerbSergSerbBegSerbins тоже! 5x5. Размер баннера. Размеры в точках (ШxВ). Описание Наличие Константа AdSize 320x50 Баннер Телефоны и планшеты kGADAdSizeBanner 320x100 Большой баннер Телефоны и планшеты kGADAdSizeLargeBanner 300x250 IAB среднего размера. | 90 Смарт-баннер Телефоны и планшеты kGADAdSizeSmartBannerPortrait
kGADAdSizeSmartBannerLandscape

Нестандартные размеры объявлений

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

стриж

let adSize = GADAdSizeFromCGSize (CGSize (ширина: 300, высота: 50))

Objective-C

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

Умные Баннеры

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

Смарт-баннеры на iPhone имеют высоту 50 точек в портретной и 32 точки в альбомной. На iPad высота составляет 90 точек как в портретной, так и в альбомной ориентации.

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

Чтобы использовать смарт-баннеры, просто укажите kGADAdSizeSmartBannerPortrait (для портретной ориентации) или kGADAdSizeSmartBannerLandscape (для альбомной ориентации) для размера объявления:

стриж

let bannerView = GADBannerView (adSize: kGADAdSizeSmartBannerPortrait)

Objective-C

GADBannerView * bannerView = [[GADBannerView alloc] initWithAdSize: kGADAdSizeSmartBannerPortrait];

Начиная с добавления безопасной области для iOS 11, для баннеров полной ширины вы должны также добавить ограничения от краев баннера до краев безопасной области. Вот фрагмент кода, показывающий, как это сделать:

стриж

func addBannerViewToView (_ bannerView: GADBannerView) {bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview (bannerView), если #available (iOS 11.0, *) {// В iOS 11 нам нужно ограничить представление безопасной областью. positionBannerViewFullWidthAtBottomOfSafeArea (bannerView)} else {// В более низких версиях iOS безопасная область недоступна, поэтому мы используем // руководство по нижнему макету и видим края. positionBannerViewFullWidthAtBottomOfView (bannerView)}} // MARK: - просмотр позиционирования @available (iOS 11, *) func positionBannerViewFullWidthAtBottomOfSafeArea (_ bannerView: UIView) {// Позиционировать баннер. Прикрепите его к нижней части безопасной зоны. // Сделаем его ограниченным краями безопасной области. let guide = view.safeAreaLayoutGuide NSLayoutConstraint.activate ([guide.leftAnchor.constraint (equalTo: bannerView.leftAnchor), guide.rightAnchor.constraint (equalTo: bannerView.rightAnchor), guide.bottomAnchor.constraint (equal)): )} func positionBannerViewFullWidthAtBottomOfView (_ bannerView: UIView) {view.addConstraint (NSLayoutConstraint (item: bannerView, атрибут: .leading, relatedBy: .equal, toItem: view, атрибут: .leading, множитель: 1, константа: 0)) представление .addConstraint (NSLayoutConstraint (item: bannerView, атрибут: .trailing, relatedBy: .equal, toItem: view, атрибут: .trailing, множитель: 1, константа: 0)) view.addConstraint (NSLayoutConstraint (item: bannerView, attribute:. bottom, relatedBy: .equal, toItem: bottomLayoutGuide, атрибут: .top, множитель: 1, константа: 0))}

Objective-C

- (void) addBannerViewToView: (UIView *) bannerView {bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview: bannerView]; if (@available (ios 11.0, *)) {// В iOS 11 нам нужно ограничить представление безопасной областью. [self positionBannerViewFullWidthAtBottomOfSafeArea: bannerView]; } else {// В более низких версиях iOS безопасная область недоступна, поэтому мы используем // руководство по разметке снизу и видим края. [self positionBannerViewFullWidthAtBottomOfView: bannerView]; }} #pragma mark - позиционирование представления - (void) positionBannerViewFullWidthAtBottomOfSafeArea: (UIView * _Nonnull) bannerView NS_AVAILABLE_IOS (11.0) {// Разместить баннер. Прикрепите его к нижней части безопасной зоны. // Сделаем его ограниченным краями безопасной области. UILayoutGuide * guide = self.view.safeAreaLayoutGuide; [NSLayoutConstraint activConstraints: @ [[guide.leftAnchor constraintEqualToAnchor: bannerView.leftAnchor], [guide.rightAnchor constraintEqualToAnchor: bannerView.rightAnchor], [guide.bottomAnchor constraintEqualToAnchor: bannerViewchor] ]om } - (void) positionBannerViewFullWidthAtBottomOfView: (UIView * _Nonnull) bannerView {[self.view addConstraint: [NSLayoutConstraint constraintWithItem: атрибут представления баннера: NSLayoutAttributeLeading relatedBy: атрибут NSLayoutRelationEqual toTell: NSL): константа самоопределения: множитель: NSL: 0: множитель: нисходящий: множитель: константа самообмена: нисходящий метод: NSI: атрибут лояльности: константа-самооценка: множитель: константа самообмена: нисходящий метод: NSL: атрибуты логики: NSL; [self.view addConstraint: [NSLayoutConstraint constraintWithItem: атрибут bannerView: NSLayoutAttributeTrailing relatedBy: NSLayoutRelationEqual toItem: атрибут self.view: множитель NSLayoutAttributeTrailing: 1 константа: 0]]; [self.view addConstraint: [NSLayoutConstraint constraintWithItem: атрибут bannerView: NSLayoutAttributeBottom relatedBy: NSLayoutRelationEqual toItem: self.bottomLayoutGuide атрибут: NSLayoutAttributeTop множитель: 1 константа: 0]]; }

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

Образцы на GitHub

Мобильные объявления Гараж видео уроки

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

  • Если вы еще этого не сделали, создайте свое собственное приложение и рекламный блок для баннеров в Пользовательский интерфейс AdMob и используйте свой недавно созданный идентификатор приложения и идентификатор рекламного блока в своем коде. Не забудьте настроить ваше устройство с помощью тестовой рекламы.
  • Узнать о ориентация на рекламу а также руководство рекламного баннера ,
  • Попробуйте другой формат рекламы: