Баннерная реклама — это прямоугольные объявления, занимающие часть макета приложения. Она остается на экране во время взаимодействия пользователя с приложением, либо закрепляясь в верхней или нижней части экрана, либо встраиваясь в контент по мере прокрутки пользователем. Баннерная реклама может автоматически обновляться через определенный промежуток времени. См. раздел «Обзор баннерной рекламы» для получения дополнительной информации.
В этом руководстве показано, как начать работу с адаптивными баннерными объявлениями с привязкой к конкретному устройству, которые оптимизируют размер объявления для каждого устройства, используя указанную вами ширину объявления.
Адаптивный баннер с привязкой к основе
Адаптивные баннерные объявления с привязкой к экрану — это объявления с фиксированным соотношением сторон, в отличие от обычных объявлений фиксированного размера. Соотношение сторон аналогично отраслевому стандарту 320x50. После указания доступной полной ширины возвращается объявление с оптимальной высотой для этой ширины. Оптимальная высота не меняется при запросах с одного и того же устройства, и окружающие элементы не нужно перемещать при обновлении объявления.
Предварительные требования
- Пройдите руководство по началу работы .
Всегда проводите тестирование с помощью тестовых объявлений.
При разработке и тестировании приложений обязательно используйте тестовые объявления, а не реальные, рабочие объявления. Несоблюдение этого правила может привести к блокировке вашего аккаунта.
Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для баннеров iOS:
/21775744923/example/adaptive-banner
Он специально настроен на возврат тестовых объявлений для каждого запроса, и вы можете свободно использовать его в своих приложениях во время кодирования, тестирования и отладки. Просто убедитесь, что вы заменили его на свой собственный идентификатор рекламного блока перед публикацией приложения.
Для получения дополнительной информации о том, как работают тестовые объявления в Mobile Ads SDK, см. раздел «Тестовые объявления» .
Создайте GAMBannerView
Баннерная реклама отображается в объектах GAMBannerView , поэтому первым шагом к интеграции баннерной рекламы является включение объекта GAMBannerView в иерархию представлений. Обычно это делается либо программно, либо с помощью Interface Builder.
Программно
Объект GAMBannerView также можно создать напрямую. В следующем примере создается объект GAMBannerView :
Быстрый
// Initialize the banner view.
bannerView = AdManagerBannerView()
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 в иерархию представлений, указав значения height и width :
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
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;
Конструктор интерфейсов
Вы можете добавить GAMBannerView в раскадровку или файл xib. При использовании этого метода убедитесь, что ограничения по положению применяются только к баннеру. Например, при отображении адаптивного баннера внизу экрана установите нижнюю границу баннера равной верхней границе нижней направляющей компоновки, а ограничение centerX — равному centerX родительского элемента.
Установите размер объявления
Установите для структуры GADSize тип адаптивного баннера с привязкой к определенному месту и заданной шириной:
Быстрый
// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
Загрузить рекламу
После того, как GAMBannerView создан и настроены его свойства, такие как adUnitID , настало время загрузить рекламу. Это делается путем вызова loadRequest: для объекта GAMRequest :
Быстрый
bannerView.load(AdManagerRequest())
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
[self.bannerView loadRequest:[GAMRequest request]];
Объекты GAMRequest представляют собой отдельный запрос к рекламному объявлению и содержат свойства, например, для указания информации о таргетинге.
Обновить рекламу
Если вы настроили обновление рекламного блока, вам не нужно запрашивать новый рекламный блок, если предыдущий не загружается. Google Mobile Ads SDK учитывает любую частоту обновления, указанную вами в пользовательском интерфейсе Ad Manager. Если вы не включили обновление, отправьте новый запрос. Для получения более подробной информации об обновлении рекламного блока, например, о настройке частоты обновления, см. раздел «Частота обновления для рекламы в мобильных приложениях» .
Обработка изменений ориентации
При изменении ориентации экрана вашего приложения, например, с portrait режима на альбомный, доступная ширина баннера также часто меняется. Чтобы убедиться, что вы отображаете рекламу соответствующего размера для нового макета, запросите новый баннер. Если ширина вашего баннера статична или если ограничения макета позволяют изменить размер, пропустите этот шаг.
Быстрый
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 .
Быстрый
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
self.bannerView.delegate = self;
Реализовать события баннера
Каждый из методов в GADBannerViewDelegate помечен как необязательный, поэтому вам нужно реализовать только те методы, которые вам необходимы. В этом примере реализован каждый метод, и в консоль выводится сообщение:
Быстрый
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print(#function)
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print(#function + ": " + error.localizedDescription)
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print(#function)
}
Objective-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");
}
Пример реализации методов делегата баннера можно посмотреть в демонстрационном приложении iOS API Delegate.
Варианты использования
Вот несколько примеров использования этих методов обработки рекламных событий.
После получения объявления добавьте баннер в иерархию представлений.
Возможно, вам захочется отложить добавление GAMBannerView в иерархию представлений до получения объявления. Это можно сделать, отслеживая событие bannerViewDidReceiveAd: :
Быстрый
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: для анимации баннерной рекламы после её получения, как показано в следующем примере:
Быстрый
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: |
bannerViewWillDismissScreen: | viewWillAppear: |
bannerViewDidDismissScreen: | viewDidAppear: |
Ручной подсчет оттисков
Вы можете вручную отправлять уведомления о показах в Ad Manager, если у вас есть особые условия для регистрации показов. Это можно сделать, предварительно включив GAMBannerView для ручных показов перед загрузкой объявления:
Быстрый
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
Когда вы убедитесь, что объявление успешно получено и отображается на экране, вы можете вручную запустить показ:
Быстрый
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
События приложений
Вы можете отслеживать события приложения, специфичные для Ad Manager, используя GADAppEventDelegate . Эти события могут происходить в любое время в течение жизненного цикла объявления, даже до вызова метода bannerViewDidReceiveAd: объекта GADBannerViewDelegate .
Для регистрации событий приложения установите свойство delegate объекта GAMBannerView на объект, реализующий протокол GADAppEventDelegate . Как правило, класс, реализующий интерфейс баннерной рекламы, также выступает в качестве класса-делегата, в этом случае свойство delegate можно установить на self .
Быстрый
// 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;
Вот пример, демонстрирующий, как изменить цвет фона вашего приложения, указав цвет из события приложения:
Быстрый
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
Следующие шаги
Складные баннеры
Сворачиваемые баннеры — это баннеры, которые изначально отображаются в виде увеличенного всплывающего окна с кнопкой для сворачивания объявления до меньшего размера. Рекомендуется использовать их для дальнейшей оптимизации производительности. Подробнее см. в разделе «Сворачиваемые баннеры» .
Встроенные адаптивные баннеры
Встроенные адаптивные баннеры — это более крупные и высокие баннеры по сравнению с привязанными адаптивными баннерами. Их высота может быть переменной и соответствовать высоте экрана устройства. Встроенные адаптивные баннеры рекомендуются вместо привязанных адаптивных баннеров для приложений, размещающих баннерную рекламу в прокручиваемом контенте. Подробнее см. в разделе «Встроенные адаптивные баннеры» .