Anuncios de banner

Los anuncios de banner son anuncios rectangulares de imagen o de texto que ocupan un lugar en la interfaz de una aplicación. Permanecen en pantalla mientras los usuarios interactúan con la aplicación y pueden actualizarse automáticamente después de un cierto periodo de tiempo. Si es la primera vez que utilizas la publicidad para móviles, son un excelente punto de partida.

En esta guía aprenderás a utilizar AdMob para integrar anuncios de banner en aplicaciones iOS. Además de fragmentos de código e instrucciones, encontrarás información sobre cómo definir el tamaño más adecuado para los banners, así como enlaces a otros recursos.

Requisitos previos

• Importa el SDK de anuncios de Google para móviles, ya sea de forma independiente o como parte de Firebase.

Comprobar siempre las aplicaciones con anuncios de prueba

Cuando crees y pruebes tus aplicaciones, utiliza siempre anuncios de prueba en lugar de anuncios de producción activos. De lo contrario, podríamos suspender tu cuenta.

La forma más sencilla de cargar anuncios de prueba es mediante el ID de bloque de anuncios de prueba que hemos creado para banners de iOS: ca-app-pub-3940256099942544/2934735716

Lo hemos configurado especialmente para devolver anuncios de prueba a cada solicitud, y puedes usarlo para programar, probar y depurar tus propias aplicaciones. Solo tienes que sustituirlo por el ID de uno de tus bloques de anuncios antes de publicar la aplicación.

Si quieres obtener más información sobre cómo funcionan los anuncios de prueba del SDK de anuncios para móviles, consulta la guía Anuncios de prueba.

Crear un objeto GADBannerView

Los anuncios de banner se muestran en objetos GADBannerView, por lo que lo primero que debes hacer para integrarlos es incluir un objeto GADBannerView en tu jerarquía de vistas. Esto se suele hacer en Interface Builder o de forma programática.

Interface Builder

Puedes añadir un objeto GADBannerView a un archivo Storyboard o XIB, como harías con cualquier otra vista similar. Al usar este método, es necesario añadir restricciones de anchura y de altura en función del tamaño del anuncio que quieres mostrar. Por ejemplo, si quieres mostrar un banner (320x50), usa una restricción de anchura de 320 puntos y una restricción de altura de 50 puntos.

Mediante programación

También se puede crear directamente una instancia de GADBannerView. A continuación, te mostramos un ejemplo de cómo crear un objeto GADBannerView que esté alineado con la parte inferior central del área segura de la pantalla y que tenga un tamaño de banner de 320x50:

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: kGADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: bottomLayoutGuide,
                          attribute: .top,
                          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:kGADAdSizeBanner];

  [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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  

@end

En este caso no especificamos restricciones de anchura ni de altura, ya que el contenido del banner tiene un tamaño intrínseco que ajusta el tamaño de la vista.

Si no quieres utilizar un tamaño estándar definido por una constante, puedes utilizar GADAdSizeFromCGSize para configurar un tamaño personalizado. Para obtener más información, consulta la sección sobre el tamaño de los banners.

Configurar las propiedades de GADBannerView

Para cargar y mostrar anuncios, es necesario configurar algunas propiedades para GADBannerView.

• rootViewController: este controlador de vistas se utiliza para mostrar una superposición cuando se hace clic en el anuncio. Como valor, normalmente se le da el controlador que contiene GADBannerView.
• adUnitID: el objeto GADBannerView debe cargar anuncios procedentes de este ID de bloque de anuncios.

A continuación se muestra un ejemplo de código en el que se indica cómo configurar las dos propiedades necesarias en el método viewDidLoad de un 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;
}

Nota: Los ID de bloque de anuncios se crean en la interfaz de AdMob y representan el lugar de la aplicación donde aparecen los anuncios. Por ejemplo, si muestras anuncios de banner en dos controladores de vistas, puedes crear un bloque de anuncios para cada uno.

Cargar anuncios

Tras configurar GADBannerView y sus propiedades, es el momento de cargar un anuncio. Para ello, se llama a loadRequest: en un 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]];
}

Los objetos GADRequest representan una única solicitud de anuncio y contienen propiedades de elementos tales como la información sobre la segmentación.

Nota: Si el anuncio no se carga, no es necesario que solicites explícitamente otro, siempre que hayas configurado tu bloque de anuncios para que se actualice. El SDK de anuncios de Google para móviles se atiene a cualquier frecuencia de actualización que hayas especificado en la interfaz de AdMob. Si no has habilitado dicha actualización, deberás hacer otra solicitud.

Eventos de anuncios

Mediante GADBannerViewDelegate, puedes recibir información sobre los eventos del ciclo de vida, como cuando se cierra un anuncio o el usuario abandona la aplicación.

Permitir eventos de banner

Para registrarte en eventos de anuncios de banner, a la propiedad delegate el valor GADBannerView para un objeto que implemente el protocolo GADBannerViewDelegate. Por lo general, la clase que implementa anuncios de banner también actúa como clase delegada, en cuyo caso, se puede dar a la propiedad delegate el valor 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;
}

Implementar eventos de banner

Cada uno de los métodos de GADBannerViewDelegate está marcado como opcional, por lo que solo tienes que implementar los métodos que quieras usar. En este ejemplo se implementa cada método y se registra un mensaje en la consola:

Swift

/// Tells the delegate an ad request loaded an ad.
func adViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("adViewDidReceiveAd")
}

/// Tells the delegate an ad request failed.
func adView(_ bannerView: GADBannerView,
    didFailToReceiveAdWithError error: GADRequestError) {
  print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

/// Tells the delegate that a full-screen view will be presented in response
/// to the user clicking on an ad.
func adViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("adViewWillPresentScreen")
}

/// Tells the delegate that the full-screen view will be dismissed.
func adViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("adViewWillDismissScreen")
}

/// Tells the delegate that the full-screen view has been dismissed.
func adViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("adViewDidDismissScreen")
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
func adViewWillLeaveApplication(_ bannerView: GADBannerView) {
  print("adViewWillLeaveApplication")
}

Objective‑C

/// Tells the delegate an ad request loaded an ad.
- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  NSLog(@"adViewDidReceiveAd");
}

/// Tells the delegate an ad request failed.
- (void)adView:(GADBannerView *)adView
    didFailToReceiveAdWithError:(GADRequestError *)error {
  NSLog(@"adView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

/// Tells the delegate that a full-screen view will be presented in response
/// to the user clicking on an ad.
- (void)adViewWillPresentScreen:(GADBannerView *)adView {
  NSLog(@"adViewWillPresentScreen");
}

/// Tells the delegate that the full-screen view will be dismissed.
- (void)adViewWillDismissScreen:(GADBannerView *)adView {
  NSLog(@"adViewWillDismissScreen");
}

/// Tells the delegate that the full-screen view has been dismissed.
- (void)adViewDidDismissScreen:(GADBannerView *)adView {
  NSLog(@"adViewDidDismissScreen");
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
- (void)adViewWillLeaveApplication:(GADBannerView *)adView {
  NSLog(@"adViewWillLeaveApplication");
}

Si quieres ver cómo se implementan los métodos del delegado de banner en la aplicación de la API Demo de iOS, consulta el ejemplo correspondiente del delegado de anuncios.

Swift Objective-C

Casos prácticos

Aquí puedes ver algunos casos prácticos de ejemplo que ilustran estos métodos de eventos de anuncios.

Añadir un banner a la jerarquía de vistas cuando se ha recibido un anuncio

Es recomendable retrasar la incorporación de GADBannerView a la jerarquía de vistas hasta después de haber recibido un anuncio. Para ello, es necesario recibir información del evento adViewDidReceiveAd::

Swift

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

Objective‑C

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

Animar un banner publicitario

También puedes usar el evento adViewDidReceiveAd: para añadir animación a un anuncio de banner una vez devuelto, como se muestra en el siguiente ejemplo:

Swift

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

Objective‑C

- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  adView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    adView.alpha = 1;
  }];
}

Pausar y reanudar la aplicación

El protocolo GADBannerViewDelegate tiene métodos para informarte de eventos, como cuando un clic provoca que aparezca o se cierre una superposición, o invoca un navegador externo. Si quieres rastrear si esos eventos provienen de anuncios, debes permitir estos métodos de GADBannerViewDelegate.

Para capturar todo tipo de presentaciones superpuestas o invocaciones de navegadores externos, en vez de solo aquellas que provienen de clics en anuncios, lo mejor es que tu aplicación reciba información de los métodos equivalentes de UIViewController o UIApplication. En esta tabla se muestran los métodos de iOS equivalentes que se invocan al mismo tiempo que los métodos de GADBannerViewDelegate:

Método de GADBannerViewDelegate	Método de iOS
adViewWillPresentScreen:	viewWillDisappear: de UIViewController
adViewWillDismissScreen:	viewWillAppear: de UIViewController
adViewDidDismissScreen:	viewDidAppear: de UIViewController
adViewWillLeaveApplication:	applicationDidEnterBackground: de UIApplicationDelegate

Tamaños de banner

En la siguiente tabla se muestran los tamaños de banner estándar.

Tamaño en puntos (ancho x alto)	Descripción	Disponibilidad	Constante de AdSize
320x50	Banner	Teléfonos y tablets	kGADAdSizeBanner
320x100	Banner grande	Teléfonos y tablets	kGADAdSizeLargeBanner
300x250	Rectángulo mediano de IAB	Teléfonos y tablets	kGADAdSizeMediumRectangle
468x60	Banner de tamaño completo de IAB	Tablets	kGADAdSizeFullBanner
728x90	Leaderboard de IAB	Tablets	kGADAdSizeLeaderboard
Ancho de pantalla x 32|50|90	Banner inteligente	Teléfonos y tablets	kGADAdSizeSmartBannerPortrait kGADAdSizeSmartBannerLandscape

Tamaños de anuncios personalizados

Para definir un tamaño de banner personalizado, configura el tamaño que quieras mediante GADAdSizeFromCGSize, tal como se muestra a continuación:

Swift

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

Objective‑C

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

Banners inteligentes

Los banners inteligentes son bloques de anuncios de banner que se adaptan al ancho de pantalla de distintos dispositivos y en cualquier orientación. Estos anuncios detectan la anchura y la orientación del dispositivo en cuestión y ajustan la vista de anuncio en consecuencia.

En los iPhone, los banners inteligentes tienen una altura de 50 puntos en la orientación vertical y 32 puntos en la horizontal. En los iPad, la altura es de 90 puntos tanto en vertical como en horizontal.

Si un anuncio de imagen no es lo suficientemente grande como para ocupar todo el espacio asignado, la imagen se centra y se rellena el espacio a ambos lados.

Para usar los banners inteligentes, tan solo tienes que indicar kGADAdSizeSmartBannerPortrait (orientación vertical) o kGADAdSizeSmartBannerLandscape (orientación horizontal) en el tamaño del anuncio:

Swift

let bannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)

Objective‑C

GADBannerView *bannerView = [[GADBannerView alloc]
      initWithAdSize:kGADAdSizeSmartBannerPortrait];

Desde que se añadió el área segura en iOS 11, en el caso de los banners que ocupan todo el ancho, también tienes que incluir restricciones para los bordes del banner, de modo que coincidan con los bordes del área segura. Aquí tienes un fragmento de código que muestra cómo hacerlo:

Swift

func addBannerViewToView(_ bannerView: GADBannerView) {
  bannerView.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(bannerView)
  if #available(iOS 11.0, *) {
    // In iOS 11, we need to constrain the view to the safe area.
    positionBannerViewFullWidthAtBottomOfSafeArea(bannerView)
  }
  else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    positionBannerViewFullWidthAtBottomOfView(bannerView)
  }
}

// MARK: - view positioning
@available (iOS 11, *)
func positionBannerViewFullWidthAtBottomOfSafeArea(_ bannerView: UIView) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
    guide.leftAnchor.constraint(equalTo: bannerView.leftAnchor),
    guide.rightAnchor.constraint(equalTo: bannerView.rightAnchor),
    guide.bottomAnchor.constraint(equalTo: bannerView.bottomAnchor)
  ])
}

func positionBannerViewFullWidthAtBottomOfView(_ bannerView: UIView) {
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .leading,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .leading,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .trailing,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .trailing,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .bottom,
                                        relatedBy: .equal,
                                        toItem: bottomLayoutGuide,
                                        attribute: .top,
                                        multiplier: 1,
                                        constant: 0))
}

Objective‑C

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  if (@available(ios 11.0, *)) {
    // In iOS 11, we need to constrain the view to the safe area.
    [self positionBannerViewFullWidthAtBottomOfSafeArea:bannerView];
  } else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    [self positionBannerViewFullWidthAtBottomOfView:bannerView];
  }
}

#pragma mark - view positioning

- (void)positionBannerViewFullWidthAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;

  [NSLayoutConstraint activateConstraints:@[
    [guide.leftAnchor constraintEqualToAnchor:bannerView.leftAnchor],
    [guide.rightAnchor constraintEqualToAnchor:bannerView.rightAnchor],
    [guide.bottomAnchor constraintEqualToAnchor:bannerView.bottomAnchor]
  ]];
}

- (void)positionBannerViewFullWidthAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeLeading
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeLeading
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeTrailing
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeTrailing
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

Otros recursos

Ejemplos en GitHub

• Ejemplos de anuncios de banner: Swift | Objective‑C

• Demostración de funciones avanzadas: Swift | Objective‑C

• Ejemplo de UITableView para anuncios de banner en GitHub: Swift | Objective‑C

Tutoriales de vídeo de la serie Mobile Ads Garage

• Implementación de banners
• Prácticas recomendadas para el uso de banners

Pasos siguientes

• Si no lo has hecho aún, crea tu propia aplicación y un bloque de anuncios de banner en la interfaz de AdMob y usa el ID de aplicación y el ID del bloque de anuncios recién creados en tu código. Recuerda configurar el dispositivo con anuncios de prueba.
• Obtén más información acerca de la segmentación publicitaria y las prácticas recomendadas para anuncios de banner.
• Prueba otro formato de anuncio:
  • Intersticial
  • Vídeo bonificado
  • Nativo