Banners

Selecciona la plataforma: Android iOS Unity Flutter

Los banners 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, o intercalados con contenido a medida que el usuario se desplaza. Los anuncios de banner se pueden actualizar automáticamente después de cierto tiempo. 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 utilizar los anuncios de banner adaptable fijos, que maximizan el rendimiento optimizando el tamaño del anuncio para cada dispositivo con el ancho de anuncio que especifiques.

Banner adaptable fijo

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

Requisitos previos

• Completar la guía de introducción

Haz siempre una comprobación con anuncios de prueba

Al compilar y verificar tus apps, asegúrate de usar anuncios de prueba en vez de anuncios activos en fase de producción. De lo contrario, tu cuenta podría suspenderse.

La forma más sencilla de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para los banners en iOS:

ca-app-pub-3940256099942544/2435281174

Está configurado especialmente para devolver anuncios de prueba en cada solicitud, y puedes usarlo en tus propias apps mientras realizas tus actividades de programación, prueba y depuración. Solo asegúrate de reemplazarlo por tu propio ID de unidad de anuncios antes de publicar tu app.

Para obtener más información sobre el funcionamiento de los anuncios de prueba del SDK de anuncios para dispositivos móviles, consulta la sección sobre anuncios de prueba.

Crea una GADBannerView

Los anuncios de banner se muestran en objetos GADBannerView, por lo que el primer paso para integrar este tipo de anuncios es incluir una vista GADBannerView en la jerarquía de vistas. Por lo general, esto se hace de forma programática o a través de la herramienta Interface Builder.

Cómo integrar anuncios de banner forma programática

También se puede crear una instancia de una vista GADBannerView directamente. En el siguiente ejemplo, se crea una GADBannerView:

Swift

// Initialize the BannerView.
bannerView = BannerView()

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
BannerSnippets.swift

SwiftUI

Para usar una BannerView, crea un objeto UIViewRepresentable:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

Agrega tu objeto UIViewRepresentable a la jerarquía de vistas y especifica los valores de height y width:

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

Objective-C

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
    // Align the banner's bottom edge with the safe area's bottom edge
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

Interface Builder

Puedes agregar una vista GADBannerView a un guion gráfico o a un archivo XIB. Cuando uses este método, asegúrate de agregar solo restricciones de posición en el banner. Por ejemplo, si se muestra un banner adaptable en la parte inferior de la pantalla, asegúrate de que la parte inferior de la vista del banner sea igual a la parte superior de la propiedad BottomLayoutGuide y define una restricción centerX igual a la restricción centerX de la supervista.

Establece el tamaño del anuncio

Configura GADSize en un tipo de banner adaptable fijo con un ancho especificado:

Swift

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

Objective-C

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

Carga un anuncio

Una vez que se implemente GADBannerView y se hayan configurado sus propiedades, como adUnitID, será el momento de cargar un anuncio. Para ello, se debe llamar a loadRequest: en un objeto GADRequest:

Swift

bannerView.load(Request())
ViewController.swift

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
BannerContentView.swift

Objective-C

[self.bannerView loadRequest:[GADRequest request]];
ViewController.m

Los objetos GADRequest representan una sola solicitud de anuncio y contienen propiedades para elementos como la información de segmentación.

Nota: Para que los anuncios se puedan mostrar con una latencia nula si es necesario, puedes usar llamadas de carga de anuncios para crear una caché de anuncios precargados antes del momento en el que quieras mostrarlos. Dado que los anuncios vencen después de una hora, deberías borrar esa caché y volver a cargarla con anuncios nuevos cada hora.

Actualiza un anuncio

Si configuraste tu unidad de anuncios para que se actualice, no es necesario que solicites otro anuncio cuando uno no se carga. 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, envía una nueva solicitud. Para obtener más detalles sobre la actualización de unidades de anuncios (por ejemplo, cómo establecer una frecuencia de actualización), consulta Cómo usar la actualización automática para los anuncios de banner.

Nota: Cuando configuras una frecuencia de actualización en la IU de AdMob, la actualización automática solo se ejecuta si el banner está visible en la pantalla.

Controla los cambios de orientación

Cuando cambia la orientación de la pantalla de tu app, por ejemplo, de modo portrait a horizontal, también suele cambiar el ancho disponible para el banner. Si quieres asegurarte de mostrar un anuncio del tamaño adecuado para el nuevo diseño, solicita un banner nuevo. Si el ancho de tu banner es estático o si las restricciones de diseño pueden controlar el cambio de tamaño, omite este paso.

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}
BannerSnippets.swift

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}
BannerSnippets.m

Eventos de anuncios

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

Regístrate para recibir eventos de banners

Si quieres registrarte para recibir eventos de anuncios de banner, configura la propiedad delegate en GADBannerView como un objeto que implemente el protocolo GADBannerViewDelegate. Por lo general, la clase que implementa anuncios de banner también actúa como la clase de delegación, en cuyo caso, se puede establecer la propiedad delegate en self.

Swift

bannerView.delegate = self
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

Implementa eventos de banners

Cada uno de los métodos de GADBannerViewDelegate está marcado como opcional, por lo que solo debes implementar los que desees. En este ejemplo, se implementa cada método y se registra un mensaje en la consola:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

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

Consulta el ejemplo de delegación de anuncio para ver una implementación de los métodos de delegación de banner en la app de demo de la API de iOS.

Swift Objective-C

Casos de uso

A continuación, se ofrecen algunos casos de uso de ejemplo para estos métodos de eventos de anuncios.

Agrega un banner a la jerarquía de vistas una vez que se reciba un anuncio

Se recomienda retrasar la incorporación de una vista GADBannerView a la jerarquía de vistas hasta después de que se reciba un anuncio. Para ello, puedes escuchar el evento bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Anima un anuncio de banner

También puedes usar el evento bannerViewDidReceiveAd: para animar un anuncio de banner cuando se devuelva, como se muestra en el siguiente ejemplo:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  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;
  }];
}

Pausa y reanuda 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 quieres hacer un seguimiento para saber si estos eventos provienen de anuncios, regístrate para usar estos métodos GADBannerViewDelegate.

Para detectar todos los tipos de presentaciones de superposiciones o invocaciones de navegador externas (no solo las que provienen de clics en anuncios), es mejor que tu app escuche los métodos equivalentes en UIViewController o UIApplication. A continuación, se muestra una tabla con 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

• Ejemplo de anuncios de banner adaptable fijos: Swift | SwiftUI | Objective-C

• Demostración de funciones avanzadas: Swift | Objective-C

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 usarlos para optimizar aún más tu rendimiento. Consulta la sección de anuncios de banner contraíbles para obtener más detalles.

Banners adaptables intercalados

Los banners adaptables intercalados son más grandes y altos que los banners adaptables fijos. Tienen una altura variable y pueden llegar a ocupar toda la pantalla del dispositivo en sentido vertical. Para las apps que colocan anuncios de banner en contenido que se puede desplazar, se recomiendan los banners adaptables intercalados en lugar de los anuncios de banner adaptables fijo. Consulta la sección de banners adaptables intercalados para obtener más detalles.

Consulta otros temas

• Privacidad del usuario