Anúncios de banner

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 Visão geral dos anúncios de bannerpara mais informações.

Este guia mostra como começar a usar anúncios de banner adaptativo fixo, que maximizam a performance otimizando o tamanho do anúncio para cada dispositivo usando uma largura de anúncio especificada por você.

Banner adaptativo fixo

Os anúncios de banner adaptativo fixos têm proporção fixa, e não os anúncios de tamanho fixo. A proporção é semelhante ao padrão do setor de 320 x 50. Assim que você especificar a largura total disponível, ele retornará um anúncio com a altura ideal para essa largura. A altura ideal não muda entre solicitações do mesmo dispositivo, e as visualizações ao redor não precisam se mover quando o anúncio é atualizado.

Pré-requisitos

Sempre teste 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/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. Só não se esqueça de 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 os anúncios de banner é incluir um GADBannerView na hierarquia de visualização. Isso normalmente é feito de forma programática ou pelo Criador de interfaces.

De forma programática

Um GADBannerView também pode ser instanciado diretamente. Confira um exemplo de como criar um GADBannerView, alinhado à parte inferior central da área segura da tela:

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)
    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];
  
  // 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];
  [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 oferecemos restrições de largura ou altura, já que o tamanho do anúncio fornecido dá ao banner um tamanho de conteúdo intrínseco para dimensionar a visualização.

Criador de interfaces

Um GADBannerView 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 como a parte superior do Guia de layout inferior e defina o X central como o X central da visualizaçã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 GADBannerView estiver e as propriedades dele configuradas, é hora de carregar um anúncio. Para fazer 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())
}

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 objetosGADRequest representam uma única solicitação de anúncio e contêm propriedades de itens como informações de segmentação.

Se o anúncio não for carregado, não será necessário solicitar outro explicitamente, desde que você tenha configurado o bloco de anúncios para atualizar. O SDK dos anúncios para dispositivos móveis do Google respeita qualquer taxa de atualização especificada na interface do AdMob. Se não tiver ativado a atualização, você precisará emitir uma nova solicitação.

Eventos de anúncio

O GADBannerViewDelegate permite 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 usar eventos de anúncio de banner, defina a propriedade delegate no GADBannerView como um objeto que implemente o protocolo GADBannerViewDelegate. Geralmente, a classe que implementa os anúncios de banner também atua como a classe do delegado. 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 em 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 delegado do anúncio de uma implementação de métodos de delegação de banner no app de demonstração da API para iOS.

Swift Objective-C

Casos de uso

Veja alguns exemplos de casos de uso para esses métodos de eventos 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

Também é possível usar o evento bannerViewDidReceiveAd: para animar um anúncio de banner quando ele for retornado, conforme mostrado neste exemplo:

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. Caso queira rastrear se esses eventos foram causados por anúncios, faça o registro nesses 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 que seu app não detecte métodos equivalentes em UIViewController ou UIApplication. Confira uma tabela que mostra os métodos para 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

Outros recursos

Exemplos no GitHub

Próximas etapas

Banners que podem ser recolhidos

Os anúncios de banner que podem ser recolhidos são inicialmente apresentados como uma sobreposição maior, com um botão para recolhê-los. Use esse recurso para otimizar ainda mais seu desempenho. Consulte os 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 fixos fixados. 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 adaptativos fixos, para apps que os colocam em conteúdo rolável. Consulte banners adaptáveis inline para mais detalhes.

Confira outros temas