Anúncios de banner

Selecione a plataforma: Android iOS Unity Flutter

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 inline quando o usuário rola a tela. Esses anúncios podem ser atualizados automaticamente após determinado período. Consulte a Visão geral sobre os anúncios de banner para mais informações.

Neste guia, mostramos 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 adaptativos fixos, 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. Caso contrário, sua conta poderá ser suspensa.

A maneira mais fácil de carregá-los é usando nosso ID de bloco de anúncios de teste dedicado para anúncios de banner no iOs:

ca-app-pub-3940256099942544/2435281174

Ele foi configurado especialmente para retornar anúncios de teste em todas as solicitações e pode ser usado nos seus próprios apps durante a programação, os testes e a depuração. Substitua pelo ID do seu bloco de anúncios antes de publicar o aplicativo.

Consulte Anúncios de teste para mais informações sobre como esse tipo de publicidade do SDK para dispositivos móveis funciona.

Criar uma GADBannerView

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

De forma programática

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

Swift

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

SwiftUI

Para usar uma BannerView, crie um UIViewRepresentable:

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

Adicione o UIViewRepresentable à hierarquia de visualização, especificando os valores height e width:

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

Objective-C

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

Criador de interfaces

É possível adicionar uma 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, a parte inferior 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.

Definir o tamanho do anúncio

Defina o struct GADSize como um tipo de banner adaptativo fixo com uma largura especificada:

Swift

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

Objective-C

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

Carregar um anúncio

Quando a GADBannerView estiver no lugar e suas propriedades, como adUnitID, forem configuradas, é hora de carregar um anúncio. Para isso, chame loadRequest: em um objeto GADRequest:

Swift

bannerView.load(Request())
ViewController.swift

SwiftUI

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

Objective-C

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

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

Dica: use chamadas de carregamento de anúncios para criar um cache de anúncios pré-carregados antes do momento em que você pretende mostrá-los, para que os anúncios possam ser exibidos com latência zero 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 ser atualizado, não é necessário 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 da AdMob. 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 Usar a atualização automática para seus anúncios de banner.

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

Processar mudanças de orientação

Quando a orientação da tela do app muda, por exemplo, do modo portrait para paisagem, a largura disponível para o banner também muda. Para garantir que você mostre um anúncio de tamanho adequado para o novo layout, solicite um novo banner. Se a largura do banner for estática ou se as restrições de layout puderem processar a mudança de tamanho, pule esta etapa.

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}
BannerSnippets.swift

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}
BannerSnippets.m

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 de anúncios de banner, defina a propriedade delegate em GADBannerView como um objeto que implementa o protocolo GADBannerViewDelegate. Em geral, a classe que implementa anúncios de banner também atua como a classe delegada. Nesse caso, a propriedade delegate pode ser definida como self.

Swift

bannerView.delegate = self
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

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 que quiser. Neste exemplo, cada um dos métodos é implementado, e uma mensagem é registrada no console:

Swift

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

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");
}
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

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

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

Só adicione GADBannerView à hierarquia de visualização depois que um anúncio for 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

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:

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 uma sobreposição ser apresentada ou dispensada. Para monitorar se esses eventos foram causados por anúncios, faça o registro dos 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. Confira a seguir uma tabela que faz a correlação dos métodos para iOS equivalentes que são invocados no mesmo momento que os GADBannerViewDelegate:

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

Outros recursos

Exemplos no GitHub

• Exemplo de anúncios de banner adaptativos fixos: 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 são apresentados inicialmente como uma sobreposição maior, com um botão para deixá-lo menor. Considere usar esse recurso para otimizar ainda mais sua performance. Consulte anúncios de banner recolhível para mais detalhes.

Banners adaptativos inline

Os banners adaptativos in-line 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. Os banners adaptativos inline são recomendados em vez dos anúncios de banner adaptativo fixo para apps que mostram anúncios de banner em conteúdo rolável. Consulte banners adaptativos inline para mais detalhes.

Confira outros temas

• Privacidade do usuário