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 intercalados con contenido a medida que el usuario se desplaza o fijos en la parte superior o inferior de la pantalla. Los anuncios de banner se pueden actualizar automáticamente después de cierto tiempo. Consulta la Descripción general de los anuncios de banner para obtener más información.

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

Banner adaptable fijo

Los anuncios de banner adaptables fijos son anuncios de 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 la altura óptima para ese ancho. La altura óptima no cambia entre las solicitudes del mismo dispositivo, y las vistas circundantes no necesitan moverse cuando se actualiza el anuncio.

Requisitos previos

Siempre realiza pruebas con anuncios de prueba

Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios activos en fase 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 de iOS:

/21775744923/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 por tu propio ID de unidad 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 GAMBannerView

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

De manera programática

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

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)
    // This example doesn't give width or height constraints, as the provided
    // ad size gives the banner an intrinsic content size to size the view.
    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)
      ])
  }
}

SwiftUI

Para usar un GAMBannerView, crea un UIViewRepresentable:

private struct BannerView: UIViewRepresentable {
  let adSize: GADAdSize

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

  func makeUIView(context: Context) -> UIView {
    // Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
    // frame size changes; wrapping in a UIView container insulates the GADBannerView from size
    // changes that impact the view returned from makeUIView.
    let view = UIView()
    view.addSubview(context.coordinator.bannerView)
    return view
  }

  func updateUIView(_ uiView: UIView, context: Context) {
    context.coordinator.bannerView.adSize = adSize
  }

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

Para administrar la inicialización y el comportamiento de GAMBannerView, crea un Coordinator:

class BannerCoordinator: NSObject, GADBannerViewDelegate {

  private(set) lazy var bannerView: GADBannerView = {
    let banner = GADBannerView(adSize: parent.adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(GADRequest())
    banner.delegate = self
    return banner
  }()

  let parent: BannerView

  init(_ parent: BannerView) {
    self.parent = parent
  }
BannerContentView.swift

Para obtener el ancho de la vista, usa GeometryReader. Esta clase calcula el tamaño de anuncio adecuado para la orientación actual del dispositivo. frame se establece en la altura calculada a partir del tamaño del anuncio.

var body: some View {
  GeometryReader { geometry in
    let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)

    VStack {
      Spacer()
      BannerView(adSize)
        .frame(height: adSize.size.height)
    }
  }
BannerContentView.swift

Objective-C

Ten en cuenta que, en este caso, no proporcionamos restricciones de ancho ni de 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.

@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];
  // This example doesn't give width or height constraints, as the provided
  // ad size gives the banner an intrinsic content size to size the view.
  [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

Interface Builder

Puedes agregar un GAMBannerView a un archivo de guion gráfico o xib. Cuando uses este método, asegúrate de agregar solo restricciones de posición en el banner. Por ejemplo, cuando muestres 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 restricción centerX igual a la centerX de la supervista.

El tamaño del anuncio del banner se sigue configurando de forma programática:

Swift

bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Carga un anuncio

Una vez que se implemente el GAMBannerView y se configuren sus propiedades, será hora 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 = "/21775744923/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

SwiftUI

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

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/21775744923/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.

Actualiza un anuncio

Si configuraste tu unidad de anuncios para que se actualice, no necesitas solicitar otro anuncio cuando este no se carga. El SDK de anuncios de Google para dispositivos móviles respeta cualquier frecuencia de actualización que especifiques en la IU de Ad Manager. Si no habilitaste la actualización, envía una solicitud nueva. Para obtener más detalles sobre la actualización de unidades de anuncios, como la configuración de una frecuencia de actualización, consulta Frecuencia de actualización de los anuncios en apps para dispositivos móviles.

Eventos de anuncios

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

Cómo registrarse para eventos de banners

Si deseas realizar un registro para eventos de anuncios de banners, configura la propiedad delegate en GAMBannerView en un objeto que implemente el protocolo GADBannerViewDelegate. Por lo general, la clase que implementa anuncios de banners también funciona como 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
  }
}

SwiftUI

banner.delegate = self
BannerContentView.swift

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 tanto, 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 hallar una implementación de métodos delegados de banners en la app de demostración de iOS API.

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.

Cómo agregar un banner a la jerarquía de vista una vez que se recibe un anuncio

Te recomendamos que demores la adición de un GAMBannerView a la jerarquía de vista hasta que se reciba un anuncio. Para ello, escucha el evento bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints.
  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 devuelve, 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:(GAMBannerView *)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 de si estos eventos se debieron a anuncios, regístrate para estos métodos de GADBannerViewDelegate.

Para captar todos los tipos de presentaciones de diseños o invocaciones de navegadores externos, no solo las que se originan por clics de anuncios, es más conveniente para tu app la recepción de 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

Recuento manual de impresiones

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

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Cuando determines 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];

Eventos de aplicaciones

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

Puedes escuchar eventos de aplicación 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 a 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 configurar el delegado con la propiedad appEventDelegate antes de realizar la solicitud de un anuncio.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

Este es un ejemplo que muestra cómo cambiar el color de fondo de tu app especificando el color a través de un evento de 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];
    }
  }
}

Esta es la creatividad correspondiente que envía mensajes de eventos de aplicaciones de 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 aplicación de Ad Manager para ver una implementación de eventos de aplicación en la app de demostración de la API de iOS.

Swift Objective-C

Recursos adicionales

Ejemplos en GitHub

Próximos pasos

Banners contraíbles

Los anuncios de banner contraíbles son anuncios de banner que, en un principio, 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 tu rendimiento. Consulta los anuncios de banner contraíbles para obtener más información.

Banners adaptables intercalados

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

Explora otros temas