В этом руководстве рассказывается, как загрузить фиксированный адаптивный баннер в приложение для iOS.
Требования
Прежде чем продолжить, настройте Google Mobile Ads SDK.
Всегда используйте тестовые объявления
При создании и тестировании приложений используйте тестовые объявления, а не реальные. В противном случае ваш аккаунт может быть заблокирован.
Проще всего загрузить тестовые объявления, используя идентификатор тестового рекламного блока для баннеров iOS:
/21775744923/example/adaptive-banner
Он специально настроен так, чтобы возвращать тестовые объявления для каждого запроса. Вы можете использовать его в своих приложениях при написании кода, тестировании и отладке. Перед публикацией приложения не забудьте заменить его идентификатором своего рекламного блока.
Подробнее о том, как работают тестовые объявления Google Mobile Ads SDK, читайте в статье Тестовые объявления.
Создание объекта GAMBannerView
Баннеры показываются в объектах GAMBannerView, поэтому сначала нужно добавить GAMBannerView в иерархию View. Обычно это делается программно или с помощью Interface Builder.
Программные средства
Экземпляр GAMBannerView также можно создать напрямую.
В следующем примере создается объект GAMBannerView:
Swift
// Initialize the banner view.
bannerView = AdManagerBannerView()
bannerView.delegate = self
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),
])
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)
}
Добавьте UIViewRepresentable в иерархию View, указав значения height и width:
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = largeAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[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 activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[bannerView.bottomAnchor
constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];
self.bannerView = bannerView;
Interface Builder
Вы можете добавить GAMBannerView в раскадровку или файл XIB. При использовании этого метода обязательно добавьте ограничения по позиции только для баннера. Например, если адаптивный баннер показывается в нижней части экрана, нижний край баннера должен совпадать с верхним краем Bottom Layout Guide, а ограничение centerX должно быть равно centerX суперпредставления.
Как задать размер объявления
Большие адаптивные баннеры – это формат, предназначенный для макетов без прокрутки. По сравнению со стандартными фиксированными адаптивными баннерами у этих баннеров больше максимальная высота (до 20 % от высоты экрана, от 50 до 150 точек). Это увеличенное пространство оптимизировано для видеоконтента.
В примере ниже показано, как получить размер большого фиксированного адаптивного баннера.
Swift
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
Задайте размер объявления, который не превышает размер экрана устройства.
Чтобы определить максимальный размер экрана на устройствах iOS 26 и более поздних версий, используйте свойство UIWindowScene.effectiveGeometry.coordinateSpace. На устройствах с iOS 18 и более ранними версиями используйте свойство UIWindowScene.coordinateSpace.
Подробнее об ограничениях по размеру…
Загрузка объявления
После того как вы добавите объект GAMBannerView и настроите его свойства, например adUnitID, можно загружать объявление. Для этого вызовите метод loadRequest: для объекта GAMRequest:
Swift
func loadBannerAd(bannerView: AdManagerBannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(AdManagerRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[self.bannerView loadRequest:[GAMRequest request]];
Объекты GAMRequest представляют собой отдельные запросы объявлений и содержат свойства, например информацию о таргетинге.
Как обновить объявление
Если вы настроили обновление рекламного блока, то вам не нужно запрашивать другое объявление, когда не удается загрузить текущее. Google Mobile Ads SDK учитывает частоту обновления, заданную в интерфейсе Менеджера рекламы. Если вы не включили обновление, отправьте новый запрос. Подробнее о том, как задать частоту обновления рекламных блоков, читайте в статье Частота обновления объявлений в мобильных приложениях.
Обработка изменений ориентации
При изменении ориентации экрана приложения, например с portrait на горизонтальную, доступная ширина баннера часто также меняется. Чтобы в новом макете показывалось объявление подходящего размера, запросите новый баннер. Если ширина баннера статична или ограничения макета позволяют изменить размер, пропустите этот шаг.
Swift
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate(alongsideTransition: { _ in
// Load a new ad for the new orientation.
})
}
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];
}
Рекламные события
С помощью GADBannerViewDelegate вы можете отслеживать события жизненного цикла, например когда объявление закрыто или пользователь покинул приложение.
Регистрация событий баннера
Чтобы зарегистрироваться для получения событий баннера, задайте для свойства delegate в GAMBannerView объект, который реализует протокол GADBannerViewDelegate. Как правило, класс, реализующий баннеры, также выступает в качестве класса делегата. В этом случае свойству delegate можно присвоить значение self.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
bannerView.delegate = self;
Как реализовать события баннеров
Все методы в GADBannerViewDelegate необязательны, поэтому вы можете реализовать только те, которые вам нужны. В этом примере реализуется каждый метод и регистрируется сообщение в консоли:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print("Banner ad loaded.")
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print("Banner ad failed to load: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print("Banner ad recorded an impression.")
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print("Banner ad recorded a click.")
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print("Banner ad will present screen.")
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print("Banner ad will dismiss screen.")
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print("Banner ad did dismiss screen.")
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}
- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
Пример реализации методов делегата баннера в демонстрационном приложении iOS API можно найти в разделе Ad Delegate.
Примеры использования
Ниже приведены примеры использования этих методов.
Добавление баннера в иерархию View после получения объявления
Вы можете отложить добавление GAMBannerView в иерархию View до получения объявления. Для этого нужно прослушивать событие bannerViewDidReceiveAd::
Swift
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:, чтобы анимировать баннер после его возврата, как показано в примере ниже.
Swift
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: UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: UIViewController |
Подсчет количества показов вручную
Если у вас есть особые условия, при которых должен регистрироваться показ, вы можете вручную отправлять в Менеджер рекламы запросы ping. Для этого перед загрузкой объявления нужно включить GAMBannerView для показов, регистрируемых вручную:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
Если вы определили, что объявление было успешно возвращено и находится на экране, вы можете вручную активировать показ:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
События в приложении
Вы можете отслеживать события в приложении, относящиеся к Менеджеру рекламы, с помощью GADAppEventDelegate.
Эти события могут происходить в любой момент жизненного цикла объявления, даже до вызова метода bannerViewDidReceiveAd: объекта GADBannerViewDelegate.
Чтобы зарегистрироваться для получения событий приложения, задайте для свойства делегата в GAMBannerView объект, реализующий протокол GADAppEventDelegate. Как правило, класс, реализующий баннеры, также выступает в качестве класса делегата. В этом случае свойству делегата можно присвоить значение self.
Swift
// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
Objective-C
// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
Ниже показано, как изменить цвет фона приложения, указав цвет в событии приложения.
Swift
func bannerView(
_ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
if name == "color" {
if info == "green" {
// Set background color to green.
view.backgroundColor = UIColor.green
} else if info == "blue" {
// Set background color to blue.
view.backgroundColor = UIColor.blue
} else {
// 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>
Пример реализации событий приложения в демонстрационном приложении iOS API можно найти в разделе "События приложения Менеджера рекламы".
Дополнительные ресурсы
Примеры на GitHub
- Пример фиксированных адаптивных баннеров: Swift | SwiftUI | Objective-C
- Демонстрация продвинутых функций: Swift | Objective-C
Дальнейшие действия
Сворачиваемые баннеры
Сворачиваемые баннеры – это баннеры, которые сначала показываются в виде большого оверлея, но их можно свернуть до стандартного размера. Попробуйте использовать его, чтобы повысить эффективность. Подробнее о сворачиваемых баннерах…
Встроенные адаптивные баннеры
Встроенные адаптивные баннеры больше и выше фиксированных. Их высота может быть разной, вплоть до высоты экрана устройства. Встроенные адаптивные баннеры рекомендуется использовать вместо фиксированных адаптивных баннеров в приложениях, где баннеры размещаются в прокручиваемом контенте. Подробнее о встроенных адаптивных баннерах…