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 há interação com o aplicativo. Ficam fixados na parte de cima ou de baixo, ou aparecem no meio do conteúdo quando o usuário rola a tela. Os anúncios de banner podem ser atualizados automaticamente após determinado período. Consulte a Visão geral sobre os anúncios de banner para mais informações.

Este guia mostra como começar a usar anúncios de banner adaptativos fixos, que maximizam a performance usando uma largura específica para cada tipo de dispositivo.

Banner adaptativo fixo

Nos anúncios de banner adaptativo fixo, o que é constante é a proporção, não o tamanho. A proporção é semelhante ao padrão do setor de 320 x 50. Depois que você determina a largura total disponível, ele retorna 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

• Leia o guia para iniciantes.

Sempre usar anúncios de teste

Ao criar e testar seus apps, use anúncios de teste em vez de anúncios de produção ativos. Se não, sua conta pode ser suspensa.

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:

/21775744923/example/adaptive-banner

Ele foi configurado especialmente para retornar anúncios de teste em todas as solicitações, e você pode usá-lo nos seus próprios apps durante a programação, os testes e a depuração. Só não se esqueça de 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 para dispositivos móveis funcionam, consulte Anúncios de teste.

Criar um GAMBannerView

Os anúncios de banner são exibidos em objetos GAMBannerView. Portanto, a primeira etapa para integrá-los é incluir um GAMBannerView na sua hierarquia de visualização, o que pode ser feito de forma programática ou pelo Interface Builder.

De forma programática

Um GAMBannerView também pode ser instanciado diretamente. O exemplo a seguir cria um GAMBannerView:

// Initialize the BannerView.
bannerView = BannerView()

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
BannerSnippets.swift

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
    // Align the banner's bottom edge with the safe area's bottom edge
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

Interface Builder

É 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, essa área da visualização do banner precisa ser igual ao topo do Bottom Layout Guide e a restrição centerX deve ser igual ao centerX da superview.

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

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

Carregar um anúncio

Depois que o GAMBannerView estiver no lugar e suas propriedades, como adUnitID, forem configuradas, é hora de carregar um anúncio. Para isso, chame loadRequest: em um objeto GAMRequest:

bannerView.load(AdManagerRequest())
ViewController.swift

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

[self.bannerView loadRequest:[GAMRequest request]];
ViewController.m

Os objetos GAMRequest representam uma única solicitação de anúncio e contêm propriedades para informações de segmentação, por exemplo.

Atualizar um anúncio

Se você configurou o bloco de anúncios para ser atualizado, não é preciso solicitar outro anúncio quando ele não carrega. O SDK dos anúncios para dispositivos móveis do Google respeita qualquer taxa de atualização especificada na interface do Ad Manager. Se você não tiver ativado a atualização, faça uma nova solicitação. Para mais detalhes sobre a atualização dos blocos de anúncios, como instruções para definir uma taxa de atualização, consulte Taxa de atualização dos anúncios em apps para dispositivos móveis.

Eventos de anúncios

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.

Registrar eventos de banner

Para registrar eventos sobre anúncios de banner, defina a propriedade delegate em GAMBannerView como um objeto que implementa o protocolo GADBannerViewDelegate. Em geral, a classe que implementa anúncios de banner também atua como a classe do delegado. Nesse caso, a propriedade delegate pode ser definida como self.

bannerView.delegate = self
ViewController.swift

banner.delegate = context.coordinator
BannerContentView.swift

self.bannerView.delegate = self;
ViewController.m

Implementar eventos de banner

Cada um dos métodos em GADBannerViewDelegate é marcado como opcional, então você só precisa implementar os desejados. Este exemplo implementa todos os métodos e registra uma mensagem no console.

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

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

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

- (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");
}
ViewController.m

Consulte o exemplo de Ad Delegate para uma implementação de métodos delegados de banner no app de demonstração da API iOS.

Swift Objective-C

Casos de uso

Veja alguns exemplos de casos de uso desses métodos de eventos de anúncios.

Como adicionar um banner à hierarquia da visualização depois que o anúncio for recebido

Só adicione GAMBannerView à hierarquia de visualização depois que um anúncio for recebido. Para fazer isso, identifique o evento bannerViewDidReceiveAd::

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

- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Animar um anúncio de banner

Você também pode usar o evento bannerViewDidReceiveAd: para animar um anúncio de banner assim que ele for retornado, conforme mostrado no exemplo a seguir:

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

- (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 uma sobreposição ser apresentada ou dispensada. Para monitorar se esses eventos foram causados por anúncios, faça o registro desses métodos GADBannerViewDelegate.

Para detectar todas as ocasiões em que uma sobreposição for apresentada ou que navegadores externos forem invocados, e não apenas aquelas que vêm de cliques em anúncios, é melhor que seu app identifique os métodos equivalentes em UIViewController ou UIApplication. Veja a seguir uma tabela que faz a correlação dos métodos iOS equivalentes que são invocados no mesmo momento que os GADBannerViewDelegate:

Contagem manual de impressões

É possível enviar pings de impressões manualmente para o Ad Manager se há condições especiais em relação a quando uma impressão deve ser registrada. Para fazer isso, ative um GAMBannerView para impressões manuais antes de carregar um anúncio:

bannerView.enableManualImpressions = true

self.bannerView.enableManualImpressions = YES;

Você poderá disparar uma impressão manualmente ao identificar que um anúncio foi retornado com sucesso e está sendo exibido na tela:

bannerView.recordImpression()

[self.bannerView recordImpression];

Eventos de aplicativos

Os eventos de aplicativos permitem criar anúncios que podem enviar mensagens ao código do app. O aplicativo pode, então, realizar ações com base nessas mensagens.

Você pode monitorar eventos específicos do Ad Manager usando GADAppEventDelegate. Esses eventos podem ocorrer a qualquer momento do ciclo de vida do anúncio, até mesmo antes que o bannerViewDidReceiveAd: do objeto GADBannerViewDelegate seja chamado.

// 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: AdManagerBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

// 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;

Seus métodos de evento do aplicativo podem ser implementados em um controlador de visualização:

import GoogleMobileAds

class ViewController: UIViewController, AppEventDelegate {}

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

Não se esqueça de definir o delegado usando a propriedade appEventDelegate antes de fazer a solicitação de um anúncio:

bannerView.appEventDelegate = self

self.bannerView.appEventDelegate = self;

Veja como mudar a cor de fundo do seu app especificando-a em um evento:

func bannerView(_ banner: AdManagerBannerView, 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
    }
  }
}

- (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];
    }
  }
}

Aqui está o criativo correspondente, que envia mensagens de evento sobre cores 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 do Google Ad Manager de uma implementação desses eventos no app 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 recolhíveis

Os anúncios de banner recolhível aparecem inicialmente como uma sobreposição maior, com um botão para os deixar menores. Considere usar esse tipo de anúncio para otimizar ainda mais sua performance. Consulte anúncios de banner recolhível para mais detalhes.

Banners adaptativos inline

Os banners adaptativos inline são maiores e mais altos do que os fixos. Eles têm altura variável e podem ser tão altos quanto a tela do dispositivo. Para apps que posicionam anúncios de banner em conteúdo rolável, recomendamos usar os banners adaptativos inline em vez dos adaptativos fixos. Consulte banners adaptativos inline para mais detalhes.

Confira outros temas

• Privacidade do usuário