Anuncios en forma de banner

Los anuncios en forma de banner ocupan un lugar 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 utilizas la publicidad para dispositivos móviles, son un excelente punto de partida. Caso de éxito.

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

Requisitos previos

• Completa la Guía de introducción.

Siempre prueba con anuncios de prueba

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

La forma más sencilla de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba dedicado para banners de iOS: ca-app-pub-3940256099942544/2934735716

Se configuró especialmente para que muestre anuncios de prueba en cada solicitud, y puedes usarla en tus propias apps mientras programas, pruebas y depuras. Solo asegúrate de reemplazarlo con tu propio ID de unidad de anuncios antes de publicar la app.

Consulta Anuncios de prueba para obtener más información sobre el funcionamiento de los anuncios de prueba del SDK de anuncios para dispositivos móviles.

Crea un GADBannerView

Los anuncios de banner se muestran en objetos GADBannerView, por lo que el primer paso para integrar anuncios de banner es incluir un GADBannerView en tu jerarquía de vistas. Por lo general, esto se hace con Interface Builder o de manera programática.

Compilador de interfaces

Se puede agregar un GADBannerView a un guion 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 directamente una instancia de GADBannerView. A continuación, se muestra un ejemplo de cómo crear un elemento GADBannerView 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: GADBannerView!

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

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    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) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView 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.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 asignamos restricciones de ancho ni 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.

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.

Configura GADBannerView propiedades

Para cargar y mostrar anuncios, GADBannerView requiere que se configuren 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 GADBannerView.
• adUnitID: Este es el ID de unidad de anuncios desde el que GADBannerView debe cargar anuncios.

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

Swift

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

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective‑C

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

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

Nota: Los IDs de unidades de anuncios se crean en la IU de AdMob y representan un lugar en tu app donde aparecen los anuncios. Por ejemplo, si muestras anuncios de banner en dos controladores de vista, puedes crear una unidad de anuncios para cada uno.

Carga un anuncio

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

Swift

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

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective‑C

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

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GADRequest request]];
}

Los objetosGADRequest 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 hayas especificado en la IU deAdMob . Si no habilitaste la actualización, deberás emitir una solicitud nueva.

Sugerencia: Puedes usar llamadas de carga de anuncios para crear una caché de anuncios precargados antes de tu intención 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 del ciclo de vida, como cuando se cierra un anuncio o el usuario abandona la app.

Cómo registrarse para eventos de banners

Si deseas registrarte para eventos de anuncios de banner, establece la propiedad delegate en GADBannerView con 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 como self.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

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

Objective‑C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *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 está marcado como opcional, por lo que 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 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 desees retrasar la adición de un 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: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

Objective‑C

- (void)bannerViewDidReceiveAd:(GADBannerView *)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 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:(GADBannerView *)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 de eventos, como cuando un clic hace que se presente o se descarte una superposición. Si deseas hacer un seguimiento para saber si estos eventos se debieron a anuncios, regístrate en estos métodos GADBannerViewDelegate.

Para captar todos los tipos de presentaciones de superposiciones o de invocaciones de navegadores externos, no solo los que se producen por clics en anuncios, es mejor que tu app escuche 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

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
320x50	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 × Altura adaptable	Banner adaptable	Teléfonos y tablets	No disponible

Tamaños personalizados de anuncios

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));

Recursos adicionales

Ejemplos en GitHub

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

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

• Ejemplo de banner UITableView en GitHub: Swift | Objective-C

Instructivos en video de Mobile Ads Garage

• Implementación del banner
• Prácticas recomendadas para los banners

Historias de éxito

• Ejemplo de caso de uso

Próximos pasos

Obtén más información sobre la privacidad del usuario.