Anúncios em banner

Os anúncios de banner ocupam um lugar dentro do layout de um app, na parte superior ou inferior da tela do dispositivo. Eles permanecem na tela enquanto os usuários interagem com o app e podem ser atualizados automaticamente após um determinado período. Se você é iniciante na publicidade para dispositivos móveis, eles são um bom ponto de partida. Estudo de caso.

Este guia mostra como integrar anúncios de banner daAdMob em um app iOS. Além de snippets de código e instruções, ela inclui informações sobre o dimensionamento correto de banners e links para outros recursos.

Pré-requisitos

• Conclua o guia Primeiros passos.

Sempre testar 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/2934735716

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

Criar um GADBannerView

Os anúncios de banner são exibidos em objetos GADBannerView. Por isso, a primeira etapa para integrar esses anúncios é incluir um GADBannerView na hierarquia de visualização. Isso geralmente acontece com o Interface Builder ou de maneira programática.

Criador de interface

Uma GADBannerView pode ser adicionada a um arquivo de storyboard ou xib como qualquer visualização típica. Ao usar esse método, adicione restrições de largura e altura para corresponder ao tamanho do anúncio que você quer exibir. Por exemplo, ao exibir um banner (320 x 50), use uma restrição de largura de 320 pontos e uma restrição de altura de 50 pontos.

De forma programática

Uma GADBannerView também pode ser instanciada diretamente. Veja um exemplo de como criar um GADBannerView, alinhado ao centro inferior da área segura da tela, com um tamanho de banner de 320 x 50:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)

    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];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [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 restringimos a largura nem a altura porque o tamanho do anúncio fornecido fornecerá ao banner um tamanho de conteúdo intrínseco para dimensionar a visualização.

Se você não quiser usar um tamanho padrão definido por uma constante, defina um tamanho personalizado usando GADAdSizeFromCGSize. Consulte a seção de tamanho do banner para mais informações.

Configurar GADBannerView propriedades

Para carregar e exibir anúncios, GADBannerView requer algumas propriedades definidas.

• rootViewController: é usado para apresentar uma sobreposição quando o anúncio é clicado. Normalmente, ele é definido como o controlador de visualização que contém o GADBannerView.
• adUnitID: ID do bloco de anúncios de onde o GADBannerView precisa carregar os anúncios.

Este é um exemplo de código que mostra como definir as duas propriedades obrigatórias no método viewDidLoad de um UIViewController:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

Observação: os IDs de blocos de anúncios são criados na IU da AdMob e representam um local no seu app em que os anúncios são exibidos. Se você exibe anúncios de banner em dois controladores de vista, por exemplo, pode criar um bloco de anúncios para cada um.

Carregar um anúncio

Depois que o GADBannerView estiver em vigor e as propriedades dele forem configuradas, é hora de carregar um anúncio. Para isso, chame loadRequest: em um objeto GADRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GADRequest request]];
}

Os objetosGADRequest representam uma única solicitação de anúncio e contêm propriedades para itens como informações de segmentação.

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

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.

Como registrar eventos de banner

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

Swift Objective-C

Casos de uso

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

O evento bannerViewDidReceiveAd: também pode ser usado para animar um anúncio de banner depois que ele é 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:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Como pausar e continuar 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 aquelas provenientes de cliques no anúncio, é melhor que seu app detecte os métodos equivalentes em UIViewController ou UIApplication. Veja uma tabela que mostra os métodos equivalentes para iOS que são invocados ao mesmo tempo que os métodos GADBannerViewDelegate:

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

Tamanhos de banner

A tabela abaixo lista os tamanhos de banner padrão.

Tamanho em pontos (L x A)	Descrição	Disponibilidade	Constante do AdSize
320 x 50	Banner	Smartphones e tablets	GADAdSizeBanner
320 x 100	Banner grande	Smartphones e tablets	GADAdSizeLargeBanner
300 x 250	Retângulo médio IAB	Smartphones e tablets	GADAdSizeMediumRectangle
468 x 60	Banner em tamanho real do IAB	Tablets	GADAdSizeFullBanner
728 x 90	Quadro de liderança do IAB	Tablets	GADAdSizeLeaderboard
Largura fornecida x Altura adaptável	Banner adaptativo	Telefones e tablets	N/A

Tamanhos de anúncio personalizados

Para definir um tamanho de banner personalizado, defina o tamanho desejado usando GADAdSizeFromCGSize, conforme mostrado aqui:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

Outros recursos

Exemplos no GitHub

• Exemplos de anúncios de banner: Swift | Objective-C

• Demonstração de recursos avançados: Swift | Objective-C

• Exemplo de UITableView de banner no GitHub: Swift | Objective-C

Tutoriais em vídeo do Mobile Ads Garage

• Implementação de banner
• Práticas recomendadas para banners

Histórias de sucesso

• Exemplo de caso de uso

Próximas etapas

Saiba mais sobre a privacidade do usuário.