Los anuncios de banner ocupan un lugar en el diseño de la app, ya sea en la parte superior o inferior de la pantalla del dispositivo. Permanecen en la pantalla mientras los usuarios interactúan con la app y se pueden actualizar automáticamente después de un período determinado. Si es la primera vez que usas la publicidad para dispositivos móviles, este es un excelente punto de partida. Caso de éxito
En esta guía, se muestra cómo integrar anuncios de banner deAdMob en una app para iOS. Además de los fragmentos y las instrucciones de código, incluye información sobre el tamaño adecuado de los banners y vínculos a recursos adicionales.
Prerequisites
- Importa el SDK de anuncios de Google para dispositivos móviles ya mismo o como parte de Firebase.
Probar siempre con anuncios de prueba
Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios de producción publicados. De lo contrario, podría suspenderse tu cuenta.
La forma más fácil de cargar anuncios de prueba es usar nuestro ID de bloque de anuncios de prueba exclusivo para banners de iOS:
ca-app-pub-3940256099942544/2934735716
Se configuró especialmente para mostrar anuncios de prueba en cada solicitud, y puedes usarlo en tus propias apps durante la codificación, las pruebas y la depuración. Asegúrate de reemplazarlo con tu propio ID de bloque de anuncios antes de publicar la app.
Para obtener más información sobre cómo funcionan los anuncios de prueba del SDK de anuncios para dispositivos móviles, consulta Anuncios de prueba.
Crea un GADBannerView
Los anuncios de banner se muestran en objetos GADBannerView
, por lo que el primer paso para integrar los anuncios de banner es incluir un GADBannerView
en tu jerarquía de vistas. Por lo general, esto se hace con el compilador de interfaces o de manera programática.
Compilador de interfaz
Se puede agregar un GADBannerView
a un storyboard o archivo xib
como cualquier vista típica. Cuando uses este método, asegúrate de agregar restricciones de ancho y alto para que coincidan con el tamaño del anuncio que deseas mostrar. Por ejemplo, cuando muestres un banner (320 x 50), usa una restricción de ancho de 320 puntos y una restricción de altura de 50 puntos.
De manera programática
También se puede crear una instancia de GADBannerView
de forma directa.
A continuación, se muestra un ejemplo de cómo crear un GADBannerView
, alineado con el centro de la parte inferior del área segura de la pantalla, con un tamaño de banner de 320 x 50:
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
Ten en cuenta que, en este caso, no permitimos restricciones de ancho ni alto, ya que el tamaño del anuncio proporcionado le dará al banner un tamaño de contenido intrínseco para ajustar el tamaño de la vista.
Si no deseas usar un tamaño estándar definido por una constante, puedes configurar un tamaño personalizado con GADAdSizeFromCGSize
.
Consulta la sección de tamaño de banner para obtener más información.
Configurar GADBannerView propiedades
Para cargar y mostrar anuncios, GADBannerView
debe configurarse algunas propiedades.
rootViewController
: Este controlador de vista se usa para presentar una superposición cuando se hace clic en el anuncio. Por lo general, se debe configurar en el controlador de vista que contenga elGADBannerView
.adUnitID
: Este es el ID del bloque de anuncios desde el queGADBannerView
debe cargar los anuncios.
A continuación, se muestra un ejemplo de código que muestra cómo establecer las dos propiedades obligatorias 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; }
Carga un anuncio
Una vez que el GADBannerView
esté configurado y sus propiedades estén configuradas, será el momento de cargar un anuncio. Para ello, se debe llamar 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 objetosGADRequest representan una sola solicitud de anuncio y contienen propiedades para elementos como la orientación.
Eventos de anuncios
Mediante GADBannerViewDelegate
, puedes escuchar eventos de ciclo de vida, como cuando se cierra un anuncio o el usuario abandona la app.
Cómo registrarse en eventos de banner
Si deseas registrarte para eventos de anuncios de banner, establece la propiedad delegate
de GADBannerView
en un objeto que implemente el protocolo GADBannerViewDelegate
. Por lo general, la clase que implementa anuncios de banner también actúa como la clase delegada, en cuyo caso la propiedad delegate
se puede establecer en 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; }
Cómo implementar eventos de banner
Cada uno de los métodos de GADBannerViewDelegate
se marca como opcional, por lo que solo debes implementar los métodos que desees. 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"); }
Consulta el ejemplo de delegado de anuncios para ver una implementación de métodos delegados de banners en la app de demostración de la API de iOS.
Casos de uso
A continuación, se incluyen algunos casos de uso de ejemplo para estos métodos de eventos de anuncios.
Cómo agregar un banner a la jerarquía de vistas una vez que se recibe un anuncio
Es posible que desees retrasar la adición de un GADBannerView
a la jerarquía de vistas hasta
después de recibir un anuncio. Para ello, escucha 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]; }
Cómo animar un anuncio de banner
También puedes usar el evento bannerViewDidReceiveAd:
para animar un anuncio de banner una vez que se muestra, 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 app
El protocolo GADBannerViewDelegate
tiene métodos para notificarte de eventos, como cuando un clic hace que se presente o se descarte una superposición.
Si deseas hacer un seguimiento de si estos eventos se debieron a anuncios, regístrate para estos métodos de GADBannerViewDelegate
.
Para detectar todos los tipos de presentaciones de superposiciones o de invocaciones de navegadores externos, no solo aquellos que se producen por clics en anuncios, es mejor que tu app detecte los métodos equivalentes en UIViewController
o UIApplication
. En la siguiente tabla,
se muestran los métodos de iOS equivalentes que se invocan al mismo tiempo que
los métodos GADBannerViewDelegate
:
Método GADBannerViewDelegate | Método de iOS |
---|---|
bannerViewWillPresentScreen: |
UIViewControllerviewWillDisappear: |
bannerViewWillDismissScreen: |
UIViewControllerviewWillAppear: |
bannerViewDidDismissScreen: |
UIViewControllerviewDidAppear: |
Tamaños de banner
En la siguiente tabla, se indican los tamaños de banner estándar.
Tamaño en puntos (ancho x alto) | Descripción | Disponibilidad | Constante de AdSize |
---|---|---|---|
320 x 50 | Banner | Teléfonos y tablets | GADAdSizeBanner |
320 x 100 | Banner grande | Teléfonos y tablets | GADAdSizeLargeBanner |
300 x 250 | Rectángulo mediano de IAB | Teléfonos y tablets | GADAdSizeMediumRectangle |
468 x 60 | Banner de tamaño completo de IAB | Tablets | GADAdSizeFullBanner |
728 x 90 | Tabla de clasificación de IAB | Tablets | GADAdSizeLeaderboard |
Ancho proporcionado x Altura adaptable | Banner adaptable | Teléfonos y tablets | N/A |
Tamaños de anuncios personalizados
Para definir un tamaño de banner personalizado, configura el tamaño deseado con GADAdSizeFromCGSize
, como se muestra a continuación:
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 banner de UITableView en GitHub: Swift | Objective-C