Anúncios de banner

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, seja ancorado na parte superior ou inferior 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 o console anúncios de banner adaptativo, que maximiza o desempenho otimizando o tamanho do anúncio para cada dispositivo usando uma largura que você especificar.

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 320 x 50. Uma vez você especificar a largura total disponível, será retornado 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

• 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 iOS banners:

/21775744923/example/adaptive-banner

Ele foi configurado especialmente para retornar anúncios de teste para todas as solicitações, e você sem custos para usá-lo nos seus próprios apps durante a programação, o teste e a depuração. Apenas faça lembre-se de substituí-lo pelo seu próprio ID do bloco de anúncios antes de publicar o aplicativo.

Para mais informações sobre como funcionam os anúncios de teste do SDK para dispositivos móveis, consulte Testar Google Ads.

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 com o Interface Builder.

De forma programática

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

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)
    // 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 GAMBannerView, 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)
  }
BannerContentView.swift

Para gerenciar a inicialização e o comportamento do GAMBannerView, 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
  }
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 está definido como a altura calculada a partir do 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)
    }
  }
BannerContentView.swift

Objective-C

Observe que, nesse caso, não fornecemos restrições de largura ou altura, pois o O tamanho do anúncio fornecido dará ao banner um tamanho intrínseco do conteúdo para dimensionar visualização.

@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];
  // 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 GAMBannerView 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 programaticamente:

Swift

bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Carregar um anúncio

Quando a GAMBannerView estiver pronta e as propriedades dela, é hora de carregar um anúncio. Para 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 = "/21775744923/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

SwiftUI

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

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/21775744923/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 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 de anúncios para dispositivos móveis do Google respeita qualquer taxa de atualização especificada na interface do Ad Manager. Se você não ativou a atualização, será necessário emitir uma nova solicitaçã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 o cache e atualize a página com as informações anúncios por hora.

Eventos de anúncio

Com o uso de GADBannerViewDelegate, é possível detectar eventos de ciclo de vida, por exemplo, quando um anúncio é fechado ou o usuário sai do app.

Registrar eventos de banner

Para se inscrever em eventos de banner, defina a propriedade delegate em GAMBannerView como um objeto que implementa o protocolo GADBannerViewDelegate. Geralmente, a classe que implementa o banner também age como a classe delegada. Nesse caso, a propriedade delegate pode ser definido como self.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

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

SwiftUI

banner.delegate = self
BannerContentView.swift

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *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, só precisam implementar os métodos que você 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");
}

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.

Swift Objective-C

Casos de uso

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

Adicionar um banner à hierarquia de vistas assim que um anúncio for recebido

Talvez seja melhor atrasar a adição de uma GAMBannerView à hierarquia de visualização até que um anúncio seja recebido. Você pode fazer isso ouvindo para o evento bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)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 uma vez. ele será 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:(GAMBannerView *)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 descartada. Se você quiser rastrear se esses eventos foram causados por anúncios, registrar-se nesses GADBannerViewDelegate.

Para capturar todos os tipos de apresentações de sobreposição ou invocações de navegador externo, não somente aqueles provenientes de cliques nos anúncios, é melhor seu aplicativo ouvir os equivalentes em UIViewController ou UIApplication. Aqui está uma tabela mostrando os métodos do iOS equivalentes que são invocados ao mesmo tempo que GADBannerViewDelegate métodos:

Método GADBannerViewDelegate	Método iOS
bannerViewWillPresentScreen:	viewWillDisappear: do UIViewController
bannerViewWillDismissScreen:	viewWillAppear: do UIViewController
bannerViewDidDismissScreen:	viewDidAppear: do UIViewController

Contagem manual de impressões

Importante: a contagem manual de impressões só é compatível com campanhas vendidas diretamente e próprias, ou seja, criativos veiculados diretamente no Ad Manager. Ela não devem ser usadas para preenchimento ou anúncios de redes de terceiros. Para mais detalhes, consulte este artigo da Central de Ajuda.

É possível enviar pings de impressão manualmente para o Ad Manager se você tiver as condições de quando uma impressão deve ser registrada. Para isso, primeiro ative uma GAMBannerView para impressões manuais antes de carregar um anúncio:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Quando você determinar que um anúncio foi retornado e está na tela, é possível disparar manualmente uma impressão:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Observação :as impressões são disparadas automaticamente quando bannerViewDidReceiveAd: é invocado. Você só deve considerar o uso desse recurso se quiser registrar impressões em um momento diferente.

Eventos de apps

Com os eventos de apps, você pode criar anúncios que enviam mensagens para o código do app. O app pode realizar ações com base nessas mensagens.

É possível detectar eventos de apps específicos do Ad Manager usando GADAppEventDelegate. Esses eventos podem ocorrer a qualquer momento durante o ciclo de vida do anúncio, mesmo antes da O bannerViewDidReceiveAd: do objeto GADBannerViewDelegate é 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

Defina o representante 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 que mostra como mudar a cor de fundo do app especificando a cor por 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];
    }
  }
}

E este é o criativo correspondente que envia mensagens coloridas de evento de aplicativo 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>

Consulte o exemplo de eventos de app do Ad Manager para conferir uma implementação de eventos de app no aplicativo de demonstração da API iOS.

Swift Objective-C

Outros recursos

Exemplos no GitHub

• Exemplo de anúncios de banner adaptativo fixo: 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 que podem ser recolhidos são exibidos inicialmente como um banner maior com um botão para recolher o anúncio em um tamanho menor. Considere usar para otimizar ainda mais seu desempenho. Consulte Anúncios de banner colapsá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 adaptativos inline para mais detalhes.

Explorar outros tópicos

• Privacidade do usuário