Os anúncios de banner são retangulares e ocupam uma parte do layout do app. Eles permanecem na tela enquanto os usuários interagem com o app e ficam fixados na parte de cima ou de baixo da tela ou inline com o conteúdo conforme a rolagem do usuário. Os anúncios de banner podem ser atualizados automaticamente após um determinado período. Consulte a Visão geral dos anúncios de banner para mais informações.
Este guia mostra como começar a usar anúncios de banner adaptativo ancorados, que maximizam a performance otimizando o tamanho do anúncio para cada dispositivo usando uma largura de anúncio que você especificar.
Banner adaptativo fixo
Os anúncios de banner adaptativo fixo são de proporção fixa, e não normais. A proporção é semelhante ao padrão do setor 320 x 50. Depois de especificar a largura total disponível, o anúncio vai retornar com a altura ideal para essa largura. A altura ideal não muda em solicitações do mesmo dispositivo, e as visualizações ao redor não precisam se mover quando o anúncio é atualizado.
Pré-requisitos
- Concluir o Guia para iniciantes.
Sempre teste com anúncios de teste
Ao criar e testar seus apps, use anúncios de teste em vez de publicidade de produção ativa. Sua conta poderá ser suspensa se isso não for feito.
A maneira mais fácil de carregar anúncios de teste é usar nosso ID de bloco de anúncios de teste dedicado para banners do iOS:
ca-app-pub-3940256099942544/2435281174
Ele foi configurado especialmente para retornar anúncios de teste para cada solicitação, e você pode usá-lo nos seus próprios apps durante a programação, o teste e a depuração. Basta substituí-lo pelo seu próprio ID do bloco de anúncios antes de publicar o app.
Para mais informações sobre como os anúncios de teste do SDK para dispositivos móveis funcionam, consulte Anúncios de teste.
Criar um GADBannerView
Os anúncios de banner são exibidos em objetos GADBannerView
.
Portanto, a primeira etapa para integrar anúncios de banner é incluir um GADBannerView
na hierarquia de visualização. Isso geralmente é feito de forma programática ou
pelo Interface Builder.
De forma programática
Um GADBannerView
também pode ser instanciado diretamente.
O exemplo a seguir cria um GADBannerView
:
Swift
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
Para usar um GADBannerView
, crie um 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)
}
Para gerenciar a inicialização e o comportamento do GADBannerView
, crie um
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
}
Para saber a largura da visualização, use GeometryReader
. Essa classe
calcula o tamanho de anúncio adequado para a orientação atual do dispositivo. O
frame
é definido como a altura calculada com base no tamanho do anúncio.
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Objective-C
Observe que, neste caso, não fornecemos restrições de largura ou altura, já que o tamanho do anúncio fornecido vai dar ao banner um tamanho de conteúdo intrínseco para dimensionar a visualização.
@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
Criador de interfaces
É possível adicionar um GADBannerView
a um storyboard ou arquivo xib. Ao usar esse
método, adicione apenas restrições de posição no banner. Por exemplo,
ao mostrar um banner adaptativo na parte de baixo da tela, defina a parte de baixo
da visualização do banner igual à parte de cima do guia de layout inferior e defina a restrição
centerX
igual à centerX
da supervisualização.
O tamanho do anúncio do banner ainda é definido de maneira programática:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Carregar um anúncio
Depois que o GADBannerView
estiver em vigor e as propriedades
configuradas, será hora de carregar um anúncio. Para isso, chame loadRequest:
em um
objeto
GADRequest
:
Swift
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())
Objective-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]];
}
Os objetos GADRequest representam uma única solicitação de anúncio e contêm propriedades para coisas como informações de segmentação.
Se o anúncio não carregar, não será necessário solicitar outro de forma explícita, desde que você tenha configurado o bloco de anúncios para atualização. O SDK dos anúncios para dispositivos móveis do Google respeita qualquer taxa de atualização especificada na interface da AdMob. Se você não tiver ativado a atualização, será necessário emitir uma nova solicitação.
Eventos de anúncio
Com o uso de GADBannerViewDelegate
, é possível detectar eventos de ciclo de vida,
como quando um anúncio é fechado ou o usuário sai do app.
Registrar-se para eventos de banner
Para se inscrever em eventos de banner, defina a propriedade delegate
em
GADBannerView
como um objeto que implementa o
protocolo GADBannerViewDelegate
. Geralmente, a classe que implementa anúncios
de banner também atua como a classe representante. Nesse caso, a propriedade delegate
pode
ser definida como self
.
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ...
self.bannerView.delegate = self;
}
Implementar eventos de banner
Cada um dos métodos em GADBannerViewDelegate
é marcado como opcional, então você
só precisa implementar os métodos que quiser. Este exemplo implementa cada método
e registra uma mensagem no console:
Swift
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")
}
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");
}
Confira o exemplo de Representante de anúncio para conferir uma implementação de métodos de representante de banner no aplicativo de demonstração da API iOS.
Casos de uso
Confira alguns exemplos de casos de uso para esses métodos de evento de anúncio.
Adicionar um banner à hierarquia de vistas assim que um anúncio for recebido
É recomendável adiar a adição de uma GADBannerView
à
hierarquia de visualização até que um anúncio seja recebido. Para fazer isso, detecte
o evento bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Animar um anúncio de banner
Também é possível usar o evento bannerViewDidReceiveAd:
para animar um anúncio de banner depois
que ele for retornado, conforme mostrado no exemplo a seguir:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
Pausar e retomar o app
O protocolo GADBannerViewDelegate
tem métodos para notificar você sobre eventos, como
quando um clique faz com que uma sobreposição seja apresentada ou dispensada. Se você quiser
rastrear se esses eventos foram devido a anúncios, registre-se para esses
métodos GADBannerViewDelegate
.
Para capturar todos os tipos de apresentações de sobreposição ou invocações de navegador externo, não
apenas aquelas que vêm de cliques em anúncios, é melhor que seu app detecte os
métodos equivalentes em UIViewController
ou UIApplication
. Confira uma tabela
que mostra os métodos equivalentes do iOS que são invocados ao mesmo tempo que
os métodos GADBannerViewDelegate
:
Método GADBannerViewDelegate | Método iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: do UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: do UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: do UIViewController |
Outros recursos
Exemplos no GitHub
- Exemplo de anúncios de banner adaptativo fixados: Swift | SwiftUI | Objective-C
- Demonstração de recursos avançados: Swift | Objective-C
Próximas etapas
Banners que podem ser recolhidos
Os anúncios de banner recolhível são anúncios de banner que são inicialmente apresentados como uma sobreposição maior, com um botão para recolher o anúncio para um tamanho menor. Considere usá-lo para otimizar ainda mais sua performance. Consulte Anúncios de banner recolhíveis para mais detalhes.
Banners adaptativos inline
Os banners adaptativos inline são maiores e mais altos em comparação com os banners adaptativos fixos. Eles têm altura variável e podem ser tão altos quanto a tela do dispositivo. Os banners adaptativos inline são recomendados em vez dos anúncios de banner adaptativo fixo para apps que colocam anúncios de banner em conteúdo rolável. Consulte banners adaptáveis inline para mais detalhes.