В этом руководстве рассказывается, как загрузить адаптивный фиксированный баннер в приложение для iOS.
Требования
Прежде чем продолжить, настройте Google Mobile Ads SDK.
Всегда тестируйте с помощью тестовых объявлений
При создании и тестировании приложений используйте тестовые объявления, а не реальные. В противном случае ваш аккаунт может быть заблокирован.
Самый простой способ загрузить тестовые объявления – использовать специальный идентификатор тестового рекламного блока для баннеров iOS:
/21775744923/example/adaptive-banner
Он специально настроен так, чтобы возвращать тестовые объявления для каждого запроса, и вы можете использовать его в своих приложениях при написании кода, тестировании и отладке. Не забудьте заменить его на идентификатор своего рекламного блока перед публикацией приложения.
Подробнее о том, как работают тестовые объявления Google Mobile Ads SDK, можно узнать в статье Test Ads.
Как создать 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. При использовании этого метода добавляйте ограничения на позицию только для баннера. Например, если вы показываете адаптивный баннер в нижней части экрана, задайте нижнюю границу представления баннера равной верхней границе нижней направляющей макета, а ограничение 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);
Как загрузить объявление
После того как тег 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. Как правило, класс, реализующий баннеры, также выступает в качестве класса делегата, и в этом случае свойству delegate можно присвоить значение 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 можно найти в разделе Ad Manager App Events.
Дополнительные ресурсы
Примеры на GitHub
- Пример фиксированного адаптивного баннера: Swift | SwiftUI | Objective-C
- Демоверсии продвинутых функций: Swift | Objective-C
Дальнейшие действия
Сворачиваемые баннеры
Сворачиваемые баннеры сначала показываются в виде большого оверлея, который пользователь может свернуть до стандартного размера. Используйте его, чтобы повысить эффективность рекламы. Подробнее о сворачиваемых баннерах…
Встроенные адаптивные баннеры
Встроенные адаптивные баннеры больше и выше, чем фиксированные. Они имеют переменную высоту и могут занимать весь экран устройства. Встроенные адаптивные баннеры рекомендуются вместо фиксированных адаптивных баннеров для приложений, в которых баннеры размещаются в контенте с прокруткой. Подробнее о встроенных адаптивных баннерах…