Anuncios de banner

Los anuncios de banner ocupan un espacio dentro del diseño de la app, ya sea en la parte superior o inferior de la pantalla del dispositivo. Permanecen en la pantalla mientras los usuarios interactúan con la app y se pueden actualizar automáticamente después de un período determinado. Si es la primera vez que utiliza la publicidad para móviles, es un excelente punto de partida.

En esta guía, se muestra cómo integrar anuncios de banner deAd Manager en una app para iOS. Además de instrucciones y fragmentos de código, se incluye información sobre el tamaño adecuado de los banners y vínculos a recursos adicionales.

Requisitos previos

• Complete 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 de producción publicados. De lo contrario, podría suspenderse tu cuenta.

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

Se configuró especialmente para mostrar anuncios de prueba en cada solicitud y puedes usarlo en tus propias aplicaciones mientras codificas, pruebas y depuras. Solo asegúrate de reemplazarlo con tu propio ID de bloque 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 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 integrar los anuncios de banner es incluir un GAMBannerView en tu jerarquía de vistas. Por lo general, esto se hace con el compilador de interfaces o de manera programática.

Compilador de interfaces

Se puede agregar un GAMBannerView a un guión gráfico o archivo .xib como cualquier vista típica. Cuando uses este método, asegúrate de agregar restricciones de ancho y alto para que coincidan con el tamaño del anuncio que deseas mostrar. Por ejemplo, cuando muestres un banner (320 x 50), usa una restricción de ancho de 320 puntos y una restricción de altura de 50 puntos.

De manera programática

También se puede crear una instancia de un GAMBannerView de forma directa. A continuación, te mostramos un ejemplo de cómo crear un objeto GAMBannerView alineado con la parte inferior central del área segura de la pantalla, con un tamaño de banner de 320 x 50:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GAMBannerView(adSize: GADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: bottomLayoutGuide,
                          attribute: .top,
                          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];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              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 proporcionamos restricciones de ancho o altura, ya que el tamaño de anuncio proporcionado le dará al banner un tamaño de contenido intrínseco para ajustar el tamaño de la vista.

Si no quieres usar un tamaño estándar definido por una constante, puedes configurar un tamaño personalizado con GADAdSizeFromCGSize. Consulta la sección de tamaño de banner para obtener más información.

Configurar GAMBannerView propiedades

Para cargar y mostrar anuncios, GAMBannerView debe establecer algunas propiedades.

• rootViewController: Este controlador de vista se usa para presentar una superposición cuando se hace clic en el anuncio. Por lo general, se debe configurar en el controlador de vista que contiene el GAMBannerView.
• adUnitID: Este es el ID del bloque de anuncios desde el que GAMBannerView debe cargar los anuncios.

Este es un ejemplo de código que muestra cómo configurar las dos propiedades obligatorias en el método viewDidLoad de un UIViewController:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
}

Objective‑C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
}

Cargar un anuncio

Una vez que se implementa GAMBannerView y se configuran sus propiedades, es el momento de cargar un anuncio. Para ello, se debe llamar a loadRequest: en un objeto GAMRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
  bannerView.load(GAMRequest())
}

Objective‑C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GAMRequest request]];
}

Los objetosGAMRequest representan una sola solicitud de anuncio y contienen propiedades para elementos como la información de orientación.

Nota: Si tu anuncio no se carga, no necesitas solicitar otro de manera explícita, siempre y cuando hayas configurado tu bloque de anuncios para la actualización. El SDK de Google Mobile Ads respeta la frecuencia de actualización que especificaste en la IU deAd Manager . Si no habilitaste la actualización, deberás enviar 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 abandona la app.

Registro para eventos de banner

Si deseas registrarte para eventos de anuncios de banner, establece la propiedad delegate en GAMBannerView en un objeto que implemente el protocolo GADBannerViewDelegate. En 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 banner

Cada uno de los métodos de GADBannerViewDelegate está marcado como opcional, por lo que solo debes implementar los que quieras. 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, presentamos algunos ejemplos de casos de uso de 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 recibir 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:(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 de banner una vez que se muestre, 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;
  }];
}

Pausa y reanuda la app

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

Para detectar todos los tipos de presentaciones de superposiciones o de invocaciones de navegadores externos, no solo los que provienen de clics en anuncios, es mejor que tu app escuche los métodos equivalentes en UIViewController o UIApplication. Esta es una tabla en la que 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:	UIViewControllerviewWillDisappear:
bannerViewWillDismissScreen:	UIViewControllerviewWillAppear:
bannerViewDidDismissScreen:	UIViewControllerviewDidAppear:

Tamaños de banner

En la siguiente tabla, se indican los tamaños de banner estándar.

Tamaño en puntos (ancho x alto)	Descripción	Disponibilidad	Constante de AdSize
320 x 50	Banner	Teléfonos y tablets	GADAdSizeBanner
320 x 100	Banner grande	Teléfonos y tablets	GADAdSizeLargeBanner
300 x 250	Rectángulo mediano de IAB	Teléfonos y tablets	GADAdSizeMediumRectangle
468 x 60	Banner de tamaño completo de IAB	Tablets	GADAdSizeFullBanner
728 x 90	Tabla de clasificación de IAB	Tablets	GADAdSizeLeaderboard
Ancho proporcionado x Altura adaptable	Banner adaptable	Teléfonos y tablets	N/A

Tamaños de anuncios personalizados

Para definir un tamaño de banner personalizado, configura el tamaño deseado con GADAdSizeFromCGSize, como se muestra a continuación:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective‑C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

Tamaño de anuncio personalizado

Además de los bloques de anuncios estándar, Google Ad Manager te permite publicar cualquier bloque de anuncios de un tamaño específico en una app. El tamaño del anuncio (ancho, alto) definido para una solicitud de anuncio debe coincidir con las dimensiones de la vista del anuncio (GAMBannerView) que se muestra en la app. Para configurar un tamaño personalizado, usa GADAdSizeFromCGSize.

Swift

// Define custom GADAdSize of 250x250 for GAMBannerView.
let customAdSize = GADAdSizeFromCGSize(CGSize(width: 250, height: 250))
bannerView = GAMBannerView(adSize: customAdSize)

Objective‑C

// Define custom GADAdSize of 250x250 for GAMBannerView
GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(250, 250));
self.bannerView = [[GAMBannerView alloc] initWithAdSize:customAdSize];

Consulta el ejemplo de varios tamaños de anuncios de Ad Manager para ver una implementación del tamaño personalizado en la app de demostración de la API de iOS.

Swift Objective-C

Varios tamaños de anuncios

Ad Manager te permite especificar varios tamaños de anuncio que pueden ser aptos para publicarse en un GAMBannerView. Se necesitan tres pasos para usar esta función:

1. En la IU de Ad Manager, cree una línea de pedido orientada al mismo bloque de anuncios que esté asociado con creatividades de distintos tamaños.

2. En tu app, configura la propiedad validAdSizes en GAMBannerView:

   Swift

   // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
   // for this slot. Never create your own GADAdSize directly. Use one of the
   // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
   // the GADAdSizeFromCGSize method.
   //
   // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
   // that all desired sizes should be included in the validAdSizes array.
   bannerView.validAdSizes = [NSValueFromGADAdSize(GADAdSizeBanner),
       NSValueFromGADAdSize(GADAdSizeMediumRectangle),
       NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSize(width: 120, height: 20)))]
   

   Objective‑C

   // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
   // for this slot. Never create your own GADAdSize directly. Use one of the
   // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
   // the GADAdSizeFromCGSize method.
   //
   // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
   // that all desired sizes should be included in the validAdSizes array.
   self.bannerView.validAdSizes = @[
       NSValueFromGADAdSize(GADAdSizeBanner),
       NSValueFromGADAdSize(GADAdSizeMediumRectangle),
       NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSizeMake(120, 20)))
   ];
   

3. Implementa el método GADAdSizeDelegate para detectar un cambio en el tamaño del anuncio.

   Swift

   public func bannerView(_ bannerView: GADBannerView, willChangeAdSizeTo size: GADAdSize)
   

   Objective‑C

   
   
   (void)bannerView:(GAMBannerView *)view willChangeAdSizeTo:(GADAdSize)size;
   

Recuerda configurar el delegado antes de realizar la solicitud de un anuncio.

Swift

bannerView.adSizeDelegate = self

Objective‑C

self.bannerView.adSizeDelegate = self;

Consulta el ejemplo de varios tamaños de anuncios de Ad Manager para ver una implementación del tamaño personalizado en la app de demostración de la API de iOS.

Swift Objective-C

Recuento manual de impresiones

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

Puede enviar pings de impresiones de forma manual a Ad Manager si tiene 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 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 según estos mensajes.

Puede escuchar eventos específicos de la aplicación 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 objeto 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;

A continuación, se muestra 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];
    }
  }
}

A continuación, se muestra 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 la app de Ad Manager para ver una implementación de eventos en la app de demostración de la API de iOS.

Swift Objective-C

Recursos adicionales

Ejemplos en GitHub

• Ejemplo de anuncios de banner: Swift | Objective-C

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

Tutoriales de video de Garage Ads Mobile

• Implementación de banners
• Prácticas recomendadas para los banners