Anúncios em 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, seja fixados na parte de cima ou de baixo da tela ou inline com o conteúdo conforme o usuário rola a tela. 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 os 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.

Banner adaptativo fixo

Os anúncios de banner adaptativo âncora são anúncios de proporção fixa, e não os anúncios de tamanho fixo normais. A proporção é semelhante ao padrão do setor de 320 x 50. Depois que você especifica a largura total disponível, ele retorna 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

• Conclua 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 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 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 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 programaticamente ou pelo Interface Builder.

De forma programática

Uma GADBannerView também pode ser instanciada diretamente. O exemplo a seguir cria um GADBannerView:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: BannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    let viewWidth = view.frame.inset(by: view.safeAreaInsets).width

    // Here the current interface orientation is used. Use
    // landscapeAnchoredAdaptiveBanner or
    // portraitAnchoredAdaptiveBanner if you prefer to load an ad of a
    // particular orientation,
    let adaptiveSize = currentOrientationAnchoredAdaptiveBanner(width: viewWidth)
    bannerView = BannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: BannerView) {
    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 BannerView, crie um UIViewRepresentable:

private struct BannerViewContainer: UIViewRepresentable {
  let adSize: AdSize

  init(_ adSize: AdSize) {
    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)
  }
BannerContentView.swift

Para gerenciar a inicialização e o comportamento do BannerView, crie um Coordinator:

class BannerCoordinator: NSObject, BannerViewDelegate {

  private(set) lazy var bannerView: BannerView = {
    let banner = BannerView(adSize: parent.adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = self
    return banner
  }()

  let parent: BannerViewContainer

  init(_ parent: BannerViewContainer) {
    self.parent = parent
  }
BannerContentView.swift

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 = currentOrientationAnchoredAdaptiveBanner(width: geometry.size.width)

    VStack {
      Spacer()
      BannerViewContainer(adSize)
        .frame(height: adSize.size.height)
    }
  }
BannerContentView.swift

Objective-C

Nesse 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

Interface Builder

É 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 ao centerX da supervisualização.

O tamanho do anúncio do banner ainda é definido de forma programática:

Swift

bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 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 BannerView.
  bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
  bannerView.rootViewController = self

  bannerView.load(Request())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
BannerContentView.swift

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.

Dica:é possível usar chamadas de carregamento de anúncios para criar um cache de anúncios carregados antes de exibi-los, para que eles possam ser mostrados sem latência quando necessário. Como os anúncios expiram após uma hora, limpe esse cache e recarregue com novos anúncios a cada hora.

Atualizar um anúncio

Se você configurou o bloco de anúncios para atualização, não é necessário solicitar outro anúncio quando ele não é carregado. 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, faça uma nova solicitação. Para mais detalhes sobre a atualização de blocos de anúncios, como definir uma taxa de atualização, consulte Usar a atualização automática para anúncios de banner.

Observação: ao definir uma taxa de atualização na interface da AdMob, a atualização automática só ocorre se o banner estiver visível na tela.

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.

Registrar eventos de banner

Para se registrar em eventos de anúncios de banner, defina a propriedade delegate em GADBannerView como um objeto que implementa o protocolo GADBannerViewDelegate. Geralmente, a classe que implementa anúncios 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, BannerViewDelegate {

  var bannerView: BannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // ...
    bannerView.delegate = self
  }
}

SwiftUI

banner.delegate = self
BannerContentView.swift

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. Portanto, basta implementar os métodos que você quiser. Este exemplo implementa cada método e registra uma mensagem no console:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print("bannerViewDidReceiveAd")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("bannerViewDidRecordImpression")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("bannerViewWillPresentScreen")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("bannerViewWillDIsmissScreen")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  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");
}

Consulte o exemplo de delegação de anúncios para conferir uma implementação de métodos de delegação de banner no app de demonstração da API iOS.

Swift Objective-C

Casos de uso

Confira alguns exemplos de casos de uso para esses métodos de evento de anúncio.

Adicionar um banner à hierarquia de visualização quando um anúncio for recebido

Talvez seja melhor atrasar 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: BannerView) {
  // 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: BannerView) {
  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 causados por anúncios, registre esses métodos GADBannerViewDelegate.

Para detectar 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 do iOS
bannerViewWillPresentScreen:	viewWillDisappear: do UIViewController
bannerViewWillDismissScreen:	viewWillAppear: do UIViewController
bannerViewDidDismissScreen:	viewDidAppear: do UIViewController

Liberar um recurso de anúncio

Quando terminar de usar um anúncio de banner, libere os recursos dele.

Para liberar o recurso do anúncio, remova o anúncio da hierarquia de visualização e elimine todas as referências dele:

Swift

// Remove banner from view hierarchy.
bannerView.removeFromSuperview()

// Drop reference to the banner ad.
bannerView = nil

Objective-C

// Remove banner from view hierarchy.
[self.bannerView removeFromSuperview];

// Drop reference to the banner ad.
self.bannerView = nil;

Outros recursos

Exemplos no GitHub

• Exemplo de anúncios de banner adaptativo fixos: 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.

Confira outros tópicos

• Privacidade do usuário