Баннерная реклама — это прямоугольная реклама, занимающая часть макета приложения. Они остаются на экране, пока пользователи взаимодействуют с приложением, либо закреплены в верхней или нижней части экрана, либо встроены в контент при прокрутке пользователем. Баннерная реклама может обновляться автоматически через определенный период времени. Дополнительную информацию см. в разделе Обзор баннерной рекламы .
В этом руководстве показано, как начать работу с привязанными адаптивными баннерными объявлениями , которые максимизируют эффективность за счет оптимизации размера объявления для каждого устройства с использованием указанной вами ширины объявления.
Закрепленный адаптивный баннер
Закрепленные адаптивные баннеры представляют собой рекламу с фиксированным соотношением сторон, а не обычную рекламу с фиксированным размером. Соотношение сторон соответствует отраслевому стандарту 320x50. Как только вы укажете доступную полную ширину, будет возвращено объявление с оптимальной высотой для этой ширины. Оптимальная высота не меняется при запросах с одного и того же устройства, а окружающие виды не должны перемещаться при обновлении объявления.
Предварительные условия
- Заполните руководство по началу работы .
Всегда тестируйте с помощью тестовых объявлений
При создании и тестировании приложений убедитесь, что вы используете тестовые объявления, а не действующие, рабочие. Несоблюдение этого требования может привести к блокировке вашего аккаунта.
Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для баннеров iOS:
ca-app-pub-3940256099942544/2435281174
Он был специально настроен для возврата тестовых объявлений по каждому запросу, и вы можете использовать его в своих приложениях при написании кода, тестировании и отладке. Просто убедитесь, что вы заменили его собственным идентификатором рекламного блока перед публикацией приложения.
Дополнительную информацию о том, как работают тестовые объявления Mobile Ads SDK, см. в разделе Тестовые объявления .
Создайте GADBannerView.
Баннерная реклама отображается в объектах GADBannerView , поэтому первым шагом на пути к интеграции баннерной рекламы является включение GADBannerView в иерархию представлений. Обычно это делается либо программно, либо с помощью Interface Builder.
Программно
Экземпляр GADBannerView также можно создать напрямую. В следующем примере создается GADBannerView :
Быстрый
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GADBannerView!
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 = GADBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
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)
])
}
}
SwiftUI
Чтобы использовать GADBannerView , создайте UIViewRepresentable :
private struct BannerView: UIViewRepresentable {
let adSize: GADAdSize
init(_ adSize: GADAdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> UIView {
// Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
// frame size changes; wrapping in a UIView container insulates the GADBannerView from size
// changes that impact the view returned from makeUIView.
let view = UIView()
view.addSubview(context.coordinator.bannerView)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
context.coordinator.bannerView.adSize = adSize
}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Для управления инициализацией и поведением GADBannerView создайте Coordinator :
class BannerCoordinator: NSObject, GADBannerViewDelegate {
private(set) lazy var bannerView: GADBannerView = {
let banner = GADBannerView(adSize: parent.adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
banner.delegate = self
return banner
}()
let parent: BannerView
init(_ parent: BannerView) {
self.parent = parent
}
Чтобы получить ширину представления, используйте GeometryReader . Этот класс вычисляет подходящий размер объявления для текущей ориентации устройства. Высота frame рассчитывается исходя из размера объявления.
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Цель-C
Обратите внимание, что в этом случае мы не задаем ограничений по ширине или высоте, поскольку указанный размер объявления будет придавать баннеру внутренний размер контента для определения размера представления.
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GADBannerView *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 = [[GADBannerView alloc] initWithAdSize:adaptiveSize];
[self addBannerViewToView:self.bannerView];
}
- (void)addBannerViewToView:(UIView *)bannerView {
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bannerView];
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
[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
Разработчик интерфейсов
Вы можете добавить GADBannerView в раскадровку или файл xib. При использовании этого метода обязательно добавляйте только ограничения положения баннера. Например, при отображении адаптивного баннера в нижней части экрана установите нижнюю часть представления баннера, равную верхней части нижнего руководства по макету, и установите ограничение centerX равное centerX суперпредставления.
Размер баннера по-прежнему задается программно:
Быстрый
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Цель-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Загрузить объявление
После того как GADBannerView создан и его свойства настроены, пришло время загрузить рекламу. Это делается путем вызова loadRequest: для объекта GADRequest :
Быстрый
override func viewDidLoad() {
super.viewDidLoad()
// Set the ad unit ID and view controller that contains the GADBannerView.
bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
bannerView.rootViewController = self
bannerView.load(GADRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
Цель-C
- (void)viewDidLoad {
[super viewDidLoad];
// Set the ad unit ID and view controller that contains the GADBannerView.
self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GADRequest request]];
}
Объекты GADRequest представляют собой один запрос объявления и содержат свойства для таких вещей, как информация о таргетинге.
Обновить объявление
Если вы настроили обновление рекламного блока, вам не нужно запрашивать другое объявление, если оно не загружается. Google Mobile Ads SDK учитывает любую частоту обновления, указанную вами в пользовательском интерфейсе AdMob. Если вы не включили обновление, отправьте новый запрос. Дополнительные сведения об обновлении рекламных блоков, например настройке частоты обновления, см. в разделе Использование автоматического обновления для баннерной рекламы .
Рекламные события
С помощью GADBannerViewDelegate вы можете прослушивать события жизненного цикла, например, когда объявление закрывается или пользователь покидает приложение.
Зарегистрируйтесь на баннерные мероприятия
Чтобы зарегистрироваться для событий баннерной рекламы, установите для свойства delegate в GADBannerView объект, реализующий протокол GADBannerViewDelegate . Обычно класс, реализующий рекламные баннеры, также действует как класс делегата, и в этом случае для свойства delegate можно установить значение self .
Быстрый
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Цель-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GADBannerView *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.
Варианты использования
Вот несколько примеров использования этих методов рекламных событий.
Добавьте баннер в иерархию представлений после получения объявления.
Возможно, вы захотите отложить добавление GADBannerView в иерархию представлений до тех пор, пока не будет получено объявление. Вы можете сделать это, прослушивая событие bannerViewDidReceiveAd: ::
Быстрый
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Цель-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)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:(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
Следующие шаги
Складные баннеры
Сворачиваемые рекламные баннеры — это рекламные баннеры, которые изначально представляются как наложенное изображение большего размера с кнопкой, позволяющей свернуть объявление до меньшего размера. Рассмотрите возможность его использования для дальнейшей оптимизации вашей производительности. Подробнее см. в разделе складные рекламные баннеры .
Встроенные адаптивные баннеры
Встроенные адаптивные баннеры больше и выше по сравнению с прикрепленными адаптивными баннерами. Они имеют переменную высоту и могут достигать высоты экрана устройства. Встроенные адаптивные баннеры рекомендуются вместо привязанных адаптивных баннеров для приложений, которые размещают рекламные баннеры в прокручиваемом контенте. Более подробную информацию см. в разделе встроенные адаптивные баннеры .