Os anúncios de banner ocupam um lugar dentro do layout de um app, na parte superior ou inferior da tela do dispositivo. Eles permanecem na tela enquanto os usuários interagem com o app e podem ser atualizados automaticamente após um determinado período. Se você é iniciante na publicidade para dispositivos móveis, eles são um bom ponto de partida. Estudo de caso.
Este guia mostra como integrar anúncios de banner daAdMob em um app iOS. Além de snippets de código e instruções, ela inclui informações sobre o dimensionamento correto de banners e links para outros recursos.
Pré-requisitos
- Conclua o guia Primeiros passos.
Sempre testar com anúncios de teste
Ao criar e testar seus apps, use anúncios de teste em vez de anúncios de produção ativos. 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/2934735716
Ele foi configurado especialmente para retornar anúncios de teste a cada solicitação, e você pode usá-lo nos seus próprios apps durante a programação, os testes e a depuração. Basta substituí-lo pelo ID do seu bloco de anúncios antes de publicar o app.
Para mais informações sobre como os anúncios de teste do SDK de anúncios para dispositivos móveis funcionam, consulte Anúncios de teste.
Criar um GADBannerView
Os anúncios de banner são exibidos em objetos GADBannerView
. Por isso, a primeira etapa para integrar esses anúncios é incluir um GADBannerView
na hierarquia de visualização. Isso
geralmente acontece com o Interface Builder ou de maneira programática.
Criador de interface
Uma GADBannerView
pode ser adicionada a um arquivo de storyboard ou xib como qualquer visualização típica. Ao usar esse método, adicione restrições de largura e altura para corresponder ao tamanho do anúncio que você quer exibir. Por exemplo,
ao exibir um banner (320 x 50), use uma restrição de largura de 320 pontos e uma
restrição de altura de 50 pontos.
De forma programática
Uma GADBannerView
também pode ser instanciada diretamente.
Veja um exemplo de como criar um GADBannerView
,
alinhado ao centro inferior da área segura da tela, com um
tamanho de banner de 320 x 50:
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() // In this case, we instantiate the banner with desired ad size. bannerView = GADBannerView(adSize: GADAdSizeBanner) addBannerViewToView(bannerView) } func addBannerViewToView(_ bannerView: GADBannerView) { bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(bannerView) 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) ]) } }
Objective-C
@import GoogleMobileAds; @interface ViewController () @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // In this case, we instantiate the banner with desired ad size. self.bannerView = [[GADBannerView alloc] initWithAdSize:GADAdSizeBanner]; [self addBannerViewToView:self.bannerView]; } - (void)addBannerViewToView:(UIView *)bannerView { bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:bannerView]; [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
Nesse caso, não restringimos a largura nem a altura porque o tamanho do anúncio fornecido fornecerá ao banner um tamanho de conteúdo intrínseco para dimensionar a visualização.
Se você não quiser usar um tamanho padrão definido por uma constante, defina um tamanho personalizado usando GADAdSizeFromCGSize
.
Consulte a seção de tamanho do banner para mais informações.
Configurar GADBannerView propriedades
Para carregar e exibir anúncios, GADBannerView
requer algumas propriedades definidas.
rootViewController
: é usado para apresentar uma sobreposição quando o anúncio é clicado. Normalmente, ele é definido como o controlador de visualização que contém oGADBannerView
.adUnitID
: ID do bloco de anúncios de onde oGADBannerView
precisa carregar os anúncios.
Este é um exemplo de código que mostra como definir as duas propriedades obrigatórias no método
viewDidLoad
de um UIViewController:
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; }
Carregar um anúncio
Depois que o GADBannerView
estiver em vigor e as propriedades dele
forem configuradas, é hora de carregar um anúncio. Para isso, chame loadRequest:
em um objeto GADRequest
:
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self bannerView.load(GADRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GADRequest request]]; }
Os objetosGADRequest representam uma única solicitação de anúncio e contêm propriedades para itens como informações de segmentação.
Eventos de anúncio
Com o uso de GADBannerViewDelegate
, você pode detectar eventos de ciclo de vida, como quando um anúncio é fechado ou o usuário sai do app.
Como registrar 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 os anúncios de banner também atua como a classe delegada. 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 } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
Como implementar eventos de banner
Cada um dos métodos no GADBannerViewDelegate
está marcado como opcional, então você
só precisa implementar os métodos que quer. 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"); }
Veja o exemplo de delegação de anúncio para uma implementação de métodos de delegação de banner no app de demonstração da API do iOS.
Casos de uso
Veja alguns exemplos de casos de uso para esses métodos de evento de anúncio.
Adicionar um banner à hierarquia de visualização assim que um anúncio for recebido
É possível atrasar a adição de um GADBannerView
à hierarquia de visualização até
que um anúncio seja recebido. Você pode fazer isso detectando o evento bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. 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
O evento bannerViewDidReceiveAd:
também pode ser usado para animar um anúncio de banner depois que ele é 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; }]; }
Como pausar e continuar 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 causados por anúncios,
faça o registro para estes métodos GADBannerViewDelegate
.
Para capturar todos os tipos de apresentações de sobreposição ou invocações de navegador externo,
não apenas aquelas provenientes de cliques no anúncio, é melhor que seu app detecte os
métodos equivalentes em UIViewController
ou UIApplication
. Veja uma tabela que mostra os métodos equivalentes para iOS que são invocados ao mesmo tempo que os métodos GADBannerViewDelegate
:
Método BidRequestDelegate | Método do iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: do UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: do UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: do UIViewController |
Tamanhos de banner
A tabela abaixo lista os tamanhos de banner padrão.
Tamanho em pontos (L x A) | Descrição | Disponibilidade | Constante do AdSize |
---|---|---|---|
320 x 50 | Banner | Smartphones e tablets | GADAdSizeBanner |
320 x 100 | Banner grande | Smartphones e tablets | GADAdSizeLargeBanner |
300 x 250 | Retângulo médio IAB | Smartphones e tablets | GADAdSizeMediumRectangle |
468 x 60 | Banner em tamanho real do IAB | Tablets | GADAdSizeFullBanner |
728 x 90 | Quadro de liderança do IAB | Tablets | GADAdSizeLeaderboard |
Largura fornecida x Altura adaptável | Banner adaptativo | Telefones e tablets | N/A |
Tamanhos de anúncio personalizados
Para definir um tamanho de banner personalizado, defina o tamanho desejado usando GADAdSizeFromCGSize
, conforme mostrado aqui:
Swift
let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))
Objective-C
GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));
Outros recursos
Exemplos no GitHub
Exemplos de anúncios de banner: Swift | Objective-C
Demonstração de recursos avançados: Swift | Objective-C
Exemplo de UITableView de banner no GitHub: Swift | Objective-C
Tutoriais em vídeo do Mobile Ads Garage
Histórias de sucesso
Próximas etapas
Saiba mais sobre a privacidade do usuário.