Anuncios en forma de banner

Selecciona la plataforma: Android iOS Unity Flutter

Los anuncios de banner son anuncios rectangulares que ocupan una parte del diseño de una app. 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 muestra cómo comenzar a utilizar los anuncios de banner adaptable fijo, 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 adaptable fijos tienen una 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 x 50. Una vez que especifiques el ancho completo disponible, se devolverá 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

• Completa la guía de introducción.

Realiza siempre pruebas con anuncios de prueba

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

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

/21775744923/example/adaptive-banner

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

Consulta el artículo Anuncios de prueba para obtener más información sobre cómo funcionan los anuncios de prueba del SDK de anuncios para dispositivos móviles.

Crea un GAMBannerView

Los anuncios de banner se muestran en objetos GAMBannerView, por lo que el primer paso para integrar anuncios de banner es incluir un GAMBannerView en la 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 un GAMBannerView directamente. En el siguiente ejemplo, se crea un objeto GAMBannerView:

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 un AdManagerBannerView, crea un 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 UIViewRepresentable a la jerarquía de vistas, especificando los valores 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 un GAMBannerView a un storyboard o a un archivo XIB. Cuando uses este método, asegúrate de agregar solo restricciones de posición 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 restricción centerX igual a la centerX de la supervista.

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

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 el objeto GAMBannerView esté en su lugar y se hayan configurado sus propiedades, como adUnitID, es hora de cargar un anuncio. Para ello, se debe llamar a loadRequest: en un objeto GAMRequest:

Swift

bannerView.load(AdManagerRequest())
ViewController.swift

SwiftUI

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

Objective-C

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

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

Sugerencia: Puedes usar llamadas de carga de anuncios para crear una caché de anuncios precargados antes de que quieras mostrarlos, de modo que los anuncios se puedan mostrar con latencia cero 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.

Actualiza un anuncio

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

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

Eventos de anuncios

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

Cómo registrarse para recibir eventos de banners

Para registrarte para recibir eventos de anuncios de banner, configura la propiedad delegate en GAMBannerView 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 delegada, en cuyo caso, la propiedad delegate se puede establecer 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 banner

Cada uno de los métodos en GADBannerViewDelegate está marcado como opcional, por lo que solo necesitas 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: 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 Ad Delegate para ver una implementación de los métodos de delegado de banner en la app de ejemplo de la API de iOS.

Swift Objective-C

Casos de uso

Estos son algunos ejemplos de casos de uso para estos métodos de eventos de anuncios.

Agrega 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 GAMBannerView 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:(GAMBannerView *)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 en forma de banner una vez que se muestre, 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:(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 descarte una superposición. Si deseas hacer un seguimiento para saber si estos eventos se debieron a anuncios, regístrate para usar estos métodos de GADBannerViewDelegate.

Para detectar todo tipo de presentaciones de superposición o invocaciones de navegador externo, no solo las que provienen de clics en anuncios, es mejor que tu app detecte 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 de GADBannerViewDelegate:

Método GADBannerViewDelegate	Método para 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 de venta directa y las internas (es decir, las creatividades cuyo tráfico se realizó directamente en Ad Manager). No se debe usar para el reabastecimiento ni para los anuncios de redes de terceros. Para obtener más detalles, consulta este artículo del Centro de ayuda.

Puedes enviar pings de impresiones a Ad Manager de forma manual si tienes condiciones especiales para 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 devolvió correctamente y está en pantalla, puedes activar manualmente una impresión:

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 usar esta función si deseas registrar las impresiones en un momento diferente.

Eventos de aplicaciones

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

Puedes escuchar los eventos de la app específicos de Ad Manager con GADAppEventDelegate. Estos eventos pueden ocurrir en cualquier momento durante el ciclo de vida del anuncio, incluso antes de que se llame al método 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: AdManagerBannerView,
    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 vistas:

Swift

import GoogleMobileAds

class ViewController: UIViewController, AppEventDelegate {}

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;

A continuación, se muestra un ejemplo de cómo cambiar el color de fondo de tu app especificando el color a través de un evento de la app:

Swift

func bannerView(_ banner: AdManagerBannerView, 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 aquí está 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 aplicaciones de Ad Manager para ver una implementación de eventos de aplicaciones 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 fijo: Swift | SwiftUI | 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 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 usarla para optimizar aún más tu rendimiento. Consulta 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 ser tan altos como la pantalla del dispositivo. Se recomiendan los banners adaptables intercalados 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 Banners adaptativos intercalados para obtener más detalles.

Explora otros temas

• Privacidad del usuario