Anuncios de banner

Los anuncios de banner ocupan un espacio determinado en la interfaz de una aplicación, ya sea en la parte superior de la pantalla del dispositivo o en la inferior. Permanecen en la pantalla mientras los usuarios interactúan con la aplicación y pueden actualizarse automáticamente después de un periodo de tiempo determinado. Si es la primera vez que utilizas la publicidad para móviles, son un excelente punto de partida. Caso de éxito

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

Requisitos previos

• Importar 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 testes tus aplicaciones, utiliza siempre anuncios de prueba en lugar de anuncios reales que se estén publicando. De lo contrario, podríamos suspender tu cuenta.

La forma más sencilla de cargar anuncios de prueba es usar el ID de bloque de anuncios de prueba que hemos creado para evaluar los 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.

Para 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.

De forma programática

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 de la zona 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 especificar un tamaño personalizado con GADAdSizeFromCGSize. 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 de GADBannerView.

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

A continuación se muestra un ejemplo de código en el que se indica cómo configurar las dos propiedades necesarias mediante el método viewDidLoad de una clase 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 vista, puedes crear un bloque de anuncios para cada uno.

Cargar anuncios

Cuando hayas configurado GADBannerView y sus propiedades, será el momento de cargar un anuncio. Para hacerlo, 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 y has configurado tu bloque de anuncios para que se actualice, no es necesario que solicites explícitamente otro; el SDK de anuncios de Google para móviles se atiene a la frecuencia de actualización que hayas especificado en la interfaz de AdMob. Si no has habilitado la actualización, deberás hacer otra solicitud.

Eventos de anuncio

Mediante GADBannerViewDelegate, puedes procesar los eventos relacionados con el 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, asigna a la propiedad delegate de GADBannerView 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, a la propiedad delegate se le puede dar 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

Todos los métodos de GADBannerViewDelegate son opcionales, por lo que solo tienes que implementar los que quieras. 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 API Demo de iOS, consulta el ejemplo correspondiente del delegado de anuncios.

Swift Objective-C

Casos prácticos

Aquí puedes ver algunos ejemplos prácticos que ilustran esos métodos de eventos de anuncios.

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

Es recomendable no añadir GADBannerView a la jerarquía de vistas hasta después de haber recibido el anuncio. Para hacerlo, puedes procesar el 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 anuncio de banner

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 invoca un navegador externo o provoca que aparezca o se cierre una superposición. Para rastrear si esos eventos provienen de anuncios, debes permitir los métodos de GADBannerViewDelegate.

Si quieres capturar todo tipo de presentaciones superpuestas o invocaciones de navegadores externos, y no solo aquellas que provienen de clics en anuncios, lo mejor es que tu aplicación procese 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 esta 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
Anchura proporcionada x Altura adaptativa	Banner adaptativo	Teléfonos y tablets	N/D
Anchura de pantalla x 32|50|90	Banner inteligente	Teléfonos y tablets	kGADAdSizeSmartBannerPortrait kGADAdSizeSmartBannerLandscape
Consulta más información sobre los banners adaptativos, que sustituirán a los banners inteligentes.

Tamaños de anuncios personalizados

Para definir un tamaño de banner personalizado, especifica el tamaño que quieras mediante la función GADAdSizeFromCGSize, tal como se muestra más abajo:

Swift

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

Objective‑C

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

Otros recursos

Ejemplos en GitHub

• Ejemplo 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

Casos de éxito

• Ejemplo de caso práctico