Os anúncios de banner são retangulares e ocupam uma parte do layout de um 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 Visão geral dos anúncios de banner para mais informações.
Este guia mostra como começar a usar os 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 de 320 x 50. Depois de especificar a largura total disponível, você recebe um anúncio com a altura ideal para essa largura. A altura ideal não muda nas solicitações do mesmo dispositivo, e as visualizações ao redor não precisam se mover quando o anúncio é atualizado.
Pré-requisitos
- Leia o Guia explicativo.
Sempre faça testes 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:
/6499/example/adaptive-banner
Ele foi configurado especialmente para retornar anúncios de teste para cada solicitação. Você pode usá-lo nos seus próprios apps durante a programação, o teste e a depuração. Apenas lembre-se de substituí-lo pelo seu próprio ID de 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 uma GAMBannerView
Os anúncios de banner são exibidos em objetos GAMBannerView
.
Portanto, a primeira etapa para integrar anúncios de banner é incluir um GAMBannerView
na hierarquia de visualização. Isso geralmente é feito de maneira programática ou
pelo Criador de interfaces.
De forma programática
Um GAMBannerView
também pode ser instanciado diretamente.
Confira um exemplo de como criar um GAMBannerView
alinhado à parte de baixo central da área segura da tela:
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GAMBannerView! 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 = GAMBannerView(adSize: adaptiveSize) addBannerViewToView(bannerView) } func addBannerViewToView(_ bannerView: GAMBannerView) { 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) GAMBannerView *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 = [[GAMBannerView alloc] initWithAdSize:adaptiveSize]; [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 fornecemos restrições de largura ou altura, já que o tamanho do anúncio fornecido dará ao banner um tamanho intrínseco do conteúdo para dimensionar a visualização.
Criador de interfaces
Um GAMBannerView
pode ser adicionado a um storyboard ou
arquivo xib. Ao usar esse método, adicione apenas restrições de posição ao 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 da parte de baixo e o X central igual ao X central 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 a GAMBannerView
estiver pronta e as propriedades dela
configuradas, é hora de carregar um anúncio. Para fazer isso, chame loadRequest:
em um
objeto
GAMRequest
:
Swift
override func viewDidLoad() { super.viewDidLoad() ... // Set the ad unit ID and view controller that contains the GAMBannerView. bannerView.adUnitID = "/6499/example/adaptive-banner" bannerView.rootViewController = self bannerView.load(GAMRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... // Set the ad unit ID and view controller that contains the GAMBannerView. self.bannerView.adUnitID = @"/6499/example/adaptive-banner"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GAMRequest request]]; }
Os objetos GAMRequest representam uma única solicitação de anúncio e contêm propriedades para itens como informações de segmentação.
Se o anúncio não for carregado, você não precisará solicitar outro explicitamente, desde que o bloco de anúncios esteja configurado para ser atualizado. O SDK dos anúncios para dispositivos móveis do Google respeitará qualquer taxa de atualização especificada na interface do Ad Manager. Se você não ativou a atualização, vai precisar 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.
Como registrar eventos de banner
Para se registrar em eventos de anúncio de banner, defina a propriedade delegate
em GAMBannerView
como um objeto que implementa o protocolo GADBannerViewDelegate
. Geralmente, a classe que implementa 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: GAMBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GAMBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
Implementação de eventos de banner
Cada um dos métodos em GADBannerViewDelegate
é marcado como opcional. Portanto, 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"); }
Veja o exemplo de delegado de anúncio para uma implementação de métodos de delegação de banner no aplicativo API Demo para iOS.
Casos de uso
Confira alguns exemplos de casos de uso desses métodos de evento de anúncio.
Adicionar um banner à hierarquia de visualização assim que um anúncio for recebido.
É recomendável adiar a adição de uma GAMBannerView
à
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 as above. addBannerViewToView(bannerView) }
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView { // Add bannerView to view and add constraints as above. [self addBannerViewToView:self.bannerView]; }
Animação de um anúncio de banner
Também é possível usar o evento bannerViewDidReceiveAd:
para animar um anúncio de banner quando 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:(GAMBannerView *)bannerView { bannerView.alpha = 0; [UIView animateWithDuration:1.0 animations:^{ bannerView.alpha = 1; }]; }
Como 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 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 aqueles provenientes de cliques em anúncios, é melhor seu app detectar os
métodos equivalentes em UIViewController
ou UIApplication
. Veja a seguir uma tabela
que mostra os métodos do iOS equivalentes 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 |
Contagem manual de impressões
É possível enviar pings de impressão manualmente para o Ad Manager se você tiver condições
especiais para o registro de uma impressão. Isso pode ser feito ativando um GAMBannerView
para impressões manuais antes de carregar um anúncio:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
Quando você determina que um anúncio foi retornado com êxito e está sendo exibido na tela, é possível disparar uma impressão manualmente:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
Eventos de apps
Com os eventos de aplicativos, você pode criar anúncios que enviam mensagens ao código do aplicativo. O app pode realizar ações com base nessas mensagens.
É possível detectar eventos de aplicativos específicos do Ad Manager usando GADAppEventDelegate
.
Esses eventos podem ocorrer a qualquer momento durante o ciclo de vida do anúncio, mesmo antes que o
bannerViewDidReceiveAd:
do objeto GADBannerViewDelegate
seja chamado.
Swift
// Implement your app event within this method. The delegate will be // notified when the SDK receives an app event message from the ad. // Called when the banner receives an app event. optional public func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String, withInfo info: String?)
Objective-C
// Implement your app event within this method. The delegate will be // notified when the SDK receives an app event message from the ad. @optional // Called when the banner receives an app event. - (void)bannerView:(GAMBannerView *)banner didReceiveAppEvent:(NSString *)name withInfo:(NSString *)info;
Os métodos de evento do app podem ser implementados em um controlador de visualização:
Swift
import GoogleMobileAds class ViewController: UIViewController, GADAppEventDelegate { }
Objective-C
@import GoogleMobileAds; @interface ViewController : UIViewController <GADAppEventDelegate> { } @end
Lembre-se de definir o delegado usando a propriedade appEventDelegate
antes de fazer
a solicitação de um anúncio.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
Confira um exemplo de como mudar a cor de fundo do app especificando a cor em um evento do app:
Swift
func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String, withInfo info: String?) { if name == "color" { guard let info = info else { return } switch info { case "green": // Set background color to green. view.backgroundColor = UIColor.green case "blue": // Set background color to blue. view.backgroundColor = UIColor.blue default: // 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]; } } }
Confira o criativo correspondente que envia mensagens coloridas de evento do app para
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>
Veja o exemplo de eventos de aplicativo do Ad Manager de uma implementação de eventos de aplicativo no app API Demo para iOS.
Outros recursos
Exemplos no GitHub
- Exemplo de anúncios de banner adaptativo fixo: Swift | Objective-C
- Demonstração de recursos avançados: Swift | Objective-C
Próximas etapas
Banners que podem ser recolhidos
Os anúncios de banner que podem ser recolhidos são apresentados inicialmente como uma sobreposição maior, com um botão para recolhê-los para um tamanho menor. Considere usá-la para otimizar ainda mais seu desempenho. Consulte anúncios de banner que podem ser recolhidos 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 ter a mesma altura da tela do dispositivo. Recomendamos o uso de banners adaptativos inline, em vez de anúncios de banner adaptativo fixo para apps que posicionam anúncios de banner em conteúdo rolável. Consulte banners adaptativos in-line para mais detalhes.