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, estos anuncios son un excelente punto de partida. Caso práctico

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

• Hacer todo lo que se indica en la guía de introducción.

Probar siempre las aplicaciones con anuncios de prueba

Cuando crees y pruebes 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 que devuelva anuncios de prueba en cada solicitud, y puedes usarlo mientras programas, evalúas y depuras tus propias aplicaciones. Recuerda que debes sustituirlo por el ID de tu bloque de anuncios antes de publicar la aplicación.

Para obtener más información, consulta cómo funcionan los anuncios de prueba del SDK de anuncios para móviles.

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

    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: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.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 IDs 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 permitir 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 del delegado, 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

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

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 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 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 un anuncio de banner

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

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

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. 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
bannerViewWillPresentScreen:	viewWillDisappear: de UIViewController
bannerViewWillDismissScreen:	viewWillAppear: de UIViewController
bannerViewDidDismissScreen:	viewDidAppear: de UIViewController

Tamaños de banner

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

Tamaño en puntos (anchura x altura)	Descripción	Disponibilidad	Constante AdSize
320x50	Banner	Teléfonos y tablets	GADAdSizeBanner
320x100	Banner grande	Teléfonos y tablets	GADAdSizeLargeBanner
300x250	Rectángulo mediano de IAB	Teléfonos y tablets	GADAdSizeMediumRectangle
468x60	Banner de tamaño completo de IAB	Tablets	GADAdSizeFullBanner
728x90	Leaderboard de IAB	Tablets	GADAdSizeLeaderboard
Anchura proporcionada x Altura adaptativa	Banner adaptativo	Teléfonos y tablets	N/A

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

Recursos adicionales

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