Anuncios en forma de banner

Los anuncios de banner son anuncios rectangulares que ocupan una parte del diseño de una aplicación. Permanecen en la pantalla mientras los usuarios interactúan con la app, ya sea fijos en la parte superior o inferior de la pantalla o intercalados con el contenido a medida que el usuario se desplaza. Los anuncios de banner se pueden actualizar automáticamente después de un período determinado. Consulta Descripción general de los anuncios de banner para obtener más información.

En esta guía, se muestra cómo comenzar a usar los anuncios de banner adaptables fijos, que maximizan el rendimiento mediante la optimización del tamaño del anuncio para cada dispositivo con el ancho de anuncio que especifiques.

Banner adaptable fijo

Los anuncios de banner adaptable fijos son anuncios con relación de aspecto fijas en lugar de los de tamaño fijo. La relación de aspecto es similar al estándar de la industria 320*50. Una vez que especifiques el ancho completo disponible, se mostrará un anuncio con una altura óptima para ese ancho. La altura óptima no cambia en las solicitudes del mismo dispositivo, y las vistas circundantes no necesitan moverse cuando se actualiza el anuncio.

Requisitos previos

Realizar pruebas siempre con anuncios de prueba

Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios publicados en producción. De lo contrario, podría suspenderse tu cuenta.

La forma más sencilla de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para los banners de iOS: ca-app-pub-3940256099942544/2435281174

Se configuró especialmente para mostrar anuncios de prueba en cada solicitud, y puedes usarlo en tus propias apps mientras codificas, pruebas y depuras. Solo asegúrate de reemplazarlo con tu propio ID de unidad de anuncios antes de publicar la app.

Consulta Anuncios de prueba para obtener más información sobre cómo funcionan estos anuncios del SDK de anuncios para dispositivos móviles.

Crea un GADBannerView

Los anuncios de banner se muestran en objetos GADBannerView, por lo que el primer paso para integrar anuncios de banner es incluir un GADBannerView en tu jerarquía de vistas. Por lo general, esto se hace de manera programática o a través de Interface Builder.

De manera programática

También se puede crear una instancia de GADBannerView de forma directa. Este es un ejemplo de cómo crear un GADBannerView, alineado con la parte inferior central del área segura de la pantalla:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    let viewWidth = view.frame.inset(by: view.safeAreaInsets).width

    // Here the current interface orientation is used. Use
    // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
    // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
    // particular orientation,
    let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
    bannerView = GADBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          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];
  
  // Here safe area is taken into account, hence the view frame is used after the
  // view has been laid out.
  CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  CGFloat viewWidth = frame.size.width;

  // Here the current interface orientation is used. If the ad is being preloaded
  // for a future orientation change or different orientation, the function for the
  // relevant orientation should be used.
  GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];

  [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.view.safeAreaLayoutGuide
                               attribute:NSLayoutAttributeBottom
                              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 asignamos restricciones de ancho ni altura, 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.

Creador de interfaces

Se puede agregar un GADBannerView a un guion gráfico o un archivo .xib. Cuando uses este método, asegúrate de agregar restricciones de posición solo en el banner. Por ejemplo, cuando se muestra un banner adaptable en la parte inferior de la pantalla, establece la parte inferior de la vista del banner igual a la parte superior de la Guía de diseño inferior y establece la X central igual al centro X de la supervista.

El tamaño del anuncio del banner todavía se configura de manera programática:

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective‑C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Carga un anuncio

Una vez que GADBannerView esté implementado y sus propiedades configuradas, es hora de cargar un anuncio. Para ello, se debe llamar a loadRequest: en un objeto GADRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GADBannerView.
  bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
  bannerView.rootViewController = self

  bannerView.load(GADRequest())
}

Objective‑C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GADBannerView.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GADRequest request]];
}

Los objetosGADRequest representan una sola solicitud de anuncio y contienen propiedades, como la información de segmentación.

Si tu anuncio no se carga, no necesitas solicitar otro explícitamente, siempre y cuando hayas configurado tu unidad de anuncios para que se actualice. El SDK de anuncios de Google para dispositivos móviles respeta cualquier frecuencia de actualización que hayas especificado en la IU de AdMob. Si no habilitaste la actualización, deberás emitir una solicitud nueva.

Eventos de anuncios

Mediante el uso de GADBannerViewDelegate, puedes escuchar eventos de ciclo de vida, como cuando se cierra un anuncio o el usuario sale de la app.

Cómo registrarse para usar eventos de banner

Si deseas registrarte para eventos de anuncios de banner, configura la propiedad delegate de GADBannerView con 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 como 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 está marcado 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.

Objective‐C de Swift

Casos de uso

A continuación, se incluyen algunos ejemplos de casos de uso 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 quieras retrasar la adición de un GADBannerView a la jerarquía de vistas hasta que se reciba 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 banner una vez que se muestre, como se indica 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;
  }];
}

Cómo pausar y reanudar la app

El protocolo GADBannerViewDelegate tiene métodos para notificarte sobre eventos, como cuando un clic hace que se presente o se descarte una superposición. Si deseas hacer un seguimiento para saber si estos eventos se debieron a anuncios, regístrate en estos métodos GADBannerViewDelegate.

Para captar todos los tipos de presentaciones de superposiciones o invocaciones a navegadores externos, no solo los que provienen de clics en los anuncios, es mejor que tu app escuche 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: viewWillDisappear: de UIViewController
bannerViewWillDismissScreen: viewWillAppear: de UIViewController
bannerViewDidDismissScreen: viewDidAppear: de UIViewController

Recursos adicionales

Ejemplos en GitHub

Próximos pasos

Banners contraíbles

Los anuncios de banner contraíbles se presentan, inicialmente, como una superposición más grande, con un botón para contraer el anuncio a un tamaño más pequeño. Considera usarlo para optimizar aún más el rendimiento. Consulta los anuncios de banner contraíbles para obtener más información.

Banners adaptables intercalados

Los banners adaptables intercalados son banners más grandes y altos en comparación con los banners adaptables fijos. Tienen altura variable y pueden ser tan altas como la pantalla del dispositivo. Los banners adaptables intercalados se recomiendan en lugar de los anuncios de banner adaptable fijos para las apps que colocan anuncios de banner en contenido por el que es posible desplazarse. Consulta los banners adaptables intercalados para obtener más detalles.

Explora otros temas