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.
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 a cada solicitud, y puedes usarlo mientras programas, evaluas y depuras tus propias aplicaciones. Solo tienes que 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 objetoGADBannerView
.adUnitID
: el ID del bloque de anuncios desde el que el objetoGADBannerView
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; }
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.
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 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
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.
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 de 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