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 anclados 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 pueden actualizarse automáticamente después de un período determinado. Consulta la 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 adaptable 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 fija en lugar de los anuncios de tamaño fijo normales. La relación de aspecto es similar al estándar de la industria de 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 no es necesario que las vistas circundantes se muevan cuando se actualiza el anuncio.

Requisitos previos

• Completa la Guía de introducción.

Probar siempre con anuncios de prueba

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

La forma más fácil de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para banners para iOS: /6499/example/adaptive-banner

Se configuró de forma especial para mostrar anuncios de prueba para 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 tu 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 una GAMBannerView

Los anuncios de banner se muestran en los objetos GAMBannerView, por lo que el primer paso para integrar estos anuncios es incluir un GAMBannerView 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 GAMBannerView de forma directa. A continuación, se muestra un ejemplo de cómo crear un GAMBannerView, alineado con la parte inferior central del área segura de la pantalla:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  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 = GAMBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    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) GAMBannerView *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 = [[GAMBannerView 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 se aplican restricciones de ancho o 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

Sugerencia: Para implementar anuncios de banner con SwiftUI, consulta Anuncios de banner.

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

El tamaño del anuncio del banner aún se establece de manera programática:

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective‑C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Carga un anuncio

Una vez que GAMBannerView está implementado y sus propiedades configuradas, es momento de cargar un anuncio. Para ello, se debe llamar a loadRequest: en un objeto GAMRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/6499/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

Objective‑C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/6499/example/adaptive-banner";
  self.bannerView.rootViewController = self;

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

Los objetos GAMRequest representan una sola solicitud de anuncio y contienen propiedades para elementos 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 especificaste en la IU de Ad Manager. Si no habilitaste la actualización, deberás enviar una nueva solicitud.

Sugerencia: Puedes usar llamadas de carga de anuncios para crear una caché de anuncios precargados antes de que decidas mostrarlos, de modo que los anuncios puedan mostrarse sin latencia cuando sea necesario. Dado que los anuncios vencen después de una hora, debes borrar esta caché y volver a cargarla con anuncios nuevos cada hora.

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 los eventos de banners

Si deseas registrarte para eventos de anuncios de banner, configura la propiedad delegate de GAMBannerView 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: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

Objective‑C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

Cómo implementar eventos de banners

Cada uno de los métodos de GADBannerViewDelegate se marca 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: 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.

Swift Objective‐C

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 GAMBannerView a la jerarquía de vistas hasta después de que se reciba un anuncio. Para hacerlo, escucha el evento bannerViewDidReceiveAd::

Swift

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

Objective‑C

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)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 muestra, 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:(GAMBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Cómo detener 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 para si estos eventos se debieron a anuncios, regístrate para estos métodos GADBannerViewDelegate.

Para captar todos los tipos de presentaciones superpuestas o de invocaciones de navegadores externos, no solo los que se generan 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:	viewWillDisappear: de UIViewController
bannerViewWillDismissScreen:	viewWillAppear: de UIViewController
bannerViewDidDismissScreen:	viewDidAppear: de UIViewController

Recuento manual de impresiones

Importante: El recuento manual de impresiones solo es compatible con las campañas propias y de venta directa (es decir, las creatividades cuyo tráfico se coordinó directamente en Ad Manager). No se debe usar para anuncios de reabastecimiento ni de redes de terceros. Para obtener más detalles, consulta este artículo del Centro de ayuda.

Puedes enviar pings de impresiones de forma manual a Ad Manager si tienes condiciones especiales en las que se debe registrar una impresión. Para ello, primero debes habilitar un GAMBannerView para las impresiones manuales antes de cargar un anuncio:

Swift

bannerView.enableManualImpressions = true

Objective‑C

self.bannerView.enableManualImpressions = YES;

Cuando determinas que un anuncio se mostró correctamente y está en pantalla, puedes activar una impresión de forma manual:

Swift

bannerView.recordImpression()

Objective‑C

[self.bannerView recordImpression];

Nota: Las impresiones se activan automáticamente cuando se invoca la devolución de llamada bannerViewDidReceiveAd:. Solo debes considerar el uso de esta función si deseas registrar impresiones en un momento diferente.

Eventos de aplicaciones

Los eventos de aplicaciones le permiten crear anuncios que pueden enviar mensajes a su código de aplicación. Luego, la app puede realizar acciones en función de estos mensajes.

Puedes escuchar eventos de apps específicos de Ad Manager con GADAppEventDelegate. Estos eventos pueden ocurrir en cualquier momento del ciclo de vida del anuncio, incluso antes de que se llame al bannerViewDidReceiveAd: del objeto GADBannerViewDelegate.

Swift

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective‑C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

Los métodos de eventos de tu app se pueden implementar en un controlador de vista:

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

Objective‑C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

Recuerda establecer el delegado con la propiedad appEventDelegate antes de realizar la solicitud de un anuncio.

Swift

bannerView.appEventDelegate = self

Objective‑C

self.bannerView.appEventDelegate = self;

En el siguiente ejemplo, se muestra cómo especificar el color a través de un evento de la app para cambiar el color de fondo de tu app:

Swift

func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective‑C

-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

Y esta es la creatividad correspondiente que envía mensajes de eventos de la app en color a appEventDelegate:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Consulta el ejemplo de eventos de app de Ad Manager para ver una implementación de eventos de apps en la app de demostración de la API de iOS.

Swift Objective‐C

Recursos adicionales

Ejemplos en GitHub

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

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

Próximos pasos

Banners contraíbles

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

Banners adaptables intercalados

Los banners adaptables intercalados son banners más grandes y más altos en comparación con los banners adaptables fijos. Son de altura variable y pueden ser tan altas como la pantalla del dispositivo. Se recomienda usar banners adaptables intercalados en lugar de anuncios de banner adaptable fijos para apps que colocan anuncios de banner en contenido desplazable. Consulta el artículo sobre banners adaptables intercalados para obtener más detalles.

Explora otros temas

• Privacidad del usuario