Añadir banners publicitarios y anuncios de rectángulo medio a una aplicación para iOS

Audience Network te permite monetizar tus aplicaciones para iOS con los anuncios de Facebook. En esta guía se explica cómo crear una aplicación para iOS que muestre banners publicitarios y anuncios de rectángulo medio.

You can change placements in Monetization Manager to the Medium Rectangle format if these were previously configured as Banner for bidding. Similarly, for any new medium rectangle placements, navigate to the placement settings page in Monetization Manager and select Medium Rectangle (not Banner).

Placements will deliver as normal even if they are not changed to the medium rectangle format. However, to avoid confusion, we recommend that you change these placements to medium rectangle.

Enlace permanente

Si te interesan otras clases de anuncios, también puedes consultar la lista de los tipos de anuncios disponibles.

Pasos para añadir banners publicitarios y anuncios de rectángulo medio

Vamos a implementar la siguiente ubicación de banner publicitario.



Paso 1: Cargar y mostrar una vista del anuncio

Paso 2: Verificar el registro de impresiones y clics

Paso 3: Cómo depurar errores cuando no se muestra el anuncio

Paso 4: Probar la integración de anuncios

Paso 1: Cargar y mostrar una vista del anuncio

Antes de continuar, asegúrate de haber completado las guías de configuración de iOS.

Asegúrate de seguir las normas de diseño para iOS cuando crees anuncios nativos o banners a fin de ofrecer una experiencia de usuario óptima.

  1. Sigue la guía de introducción para iOS y crea un nuevo proyecto. A continuación, abre Main.storyboard. Añade un elemento “UIView” al elemento “View” principal y asígnale el nombre adContainer.
  2. En el archivo de encabezado “View Controller”, (o archivo “Swift” si eres usuario de Swift), importa el encabezado FBAudienceNetwork, declara que vas a implementar el protocolo FBAdViewDelegate y añade una variable de instancia para el anuncio.
    import UIKit
    import FBAudienceNetwork
    
    class ViewController: UIViewController, FBAdViewDelegate {
    
      @IBOutlet private var adContainer: UIView!
    
      private var adView: FBAdView?
    }
    #import <UIKit/UIKit.h>
    @import FBAudienceNetwork;
    
    @interface ViewController : UIViewController <FBAdViewDelegate>
    
    @property (nonatomic, weak) IBOutlet UIView *adContainer;
    @property (nonatomic, strong) FBAdView *adView;
    
    @end

  3. Añade el código debajo de viewDidLoad. Crea una nueva instancia de FBAdView y añádela a la vista. FBAdView es una subclase de UIView. Puedes añadirla a tu jerarquía de vistas como cualquier otra vista.
    override func viewDidLoad() {
      super.viewDidLoad()
    
      // Instantiate an AdView object.
      // NOTE: the placement ID will eventually identify this as your app, you can ignore while you
      // are testing and replace it later when you have signed up.
      // While you are using this temporary code you will only get test ads and if you release
      // your code like this to the App Store your users will not receive ads (you will get a 'No Fill' error).
      let adView = FBAdView(placementID: "YOUR_PLACEMENT_ID", adSize: kFBAdSizeHeight50Banner, rootViewController: self)
      adView.frame = CGRect(x: 0, y: 0, width: 320, height: 250)
      adView.delegate = self
      adView.loadAd()
      self.adView = adView
    }
    - (void)viewDidLoad
    {
      [super viewDidLoad];
      // Instantiate an AdView object. 
      // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
      // now, while you are testing and replace it later when you have signed up.
      // While you are using this temporary code you will only get test ads and if you release
      // your code like this to the App Store your users will not receive ads (you will get a no fill error).
      self.adView = [[FBAdView alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID" adSize:kFBAdSizeHeight50Banner rootViewController:self];
      self.adView.frame = CGRectMake(0, 0, 320, 250);
      self.adView.delegate = self;
      [self.adView loadAd];
    }
    Para añadir un anuncio de rectángulo medio en su lugar, solo tienes que proporcionar kFBAdSizeHeight250Rectangle en el parámetro “adSize ” a FBAdView.

    Audience Network admite el uso de tres tamaños de anuncios en FBAdView. El ancho de los anuncios es flexible, con un mínimo de 320 píxeles, y solo debe definirse la altura.

    Formato del anuncio Referencia de “AdSize” Tamaño Recomendación

    Rectángulo medio

    kFBAdSizeHeight 250Rectangle

    300 x 250

    Este formato es muy recomendable porque ofrece mayor rendimiento, mayor calidad y más eficiencia de la CPU.

    Banner estándar

    kFBAdSizeHeight 50Banner

    320 x 50

    Este formato es adecuado para teléfonos, pero no se recomienda por su bajo rendimiento y calidad.

    Banner grande

    kFBAdSizeHeight 90Banner

    320 x 90

    Este formato es adecuado para tabletas y dispositivos de mayor tamaño, pero no se recomienda por su bajo rendimiento y calidad.

  4. Sustituye YOUR_PLACEMENT_ID por tu propia cadena de identificador de ubicación. Si no tienes un identificador de ubicación o no sabes cómo obtener uno, consulta la guía de introducción. Elige el dispositivo como destino de compilación y ejecuta el código anterior. Debes ver algo parecido a esto:



Al poner anuncios en circulación en el simulador, debes cambiar la configuración al modo de prueba para poder ver los anuncios de este tipo. Accede a Cómo usar el modo de prueba para obtener más información al respecto.

Paso 2: Verificar el registro de impresiones y clics

Dispones de la opción de añadir las siguientes funciones para gestionar los casos en los que el usuario hace clic en el anuncio o las ocasiones en las que lo cierra:

func adViewDidClick(_ adView: FBAdView) {
  print("Ad was clicked.")
}

func adViewDidFinishHandlingClick(_ adView: FBAdView) {
  print("Ad did finish click handling.")
}

func adViewWillLogImpression(_ adView: FBAdView) {
  print("Ad impression is being captured.")
}
- (void)adViewDidClick:(FBAdView *)adView
{
  NSLog(@"Ad was clicked.");
}

- (void)adViewDidFinishHandlingClick:(FBAdView *)adView
{
  NSLog(@"Ad did finish click handling.");
}

- (void)adViewWillLogImpression:(FBAdView *)adView
{
  NSLog(@"Ad impression is being captured.");
}

Paso 3: Cómo depurar errores cuando no se muestra el anuncio

Añade e implementa las dos funciones delegadas siguientes en “View Controller” para gestionar los procesos de carga fallidos del anuncio:

func adView(_ adView: FBAdView, didFailWithError error: Error) {
  print("Ad failed to load with error: \(error.localizedDescription)")
}

func adViewDidLoad(_ adView: FBAdView) {
  print("Ad was loaded and ready to be displayed")
  showAd()
}

private func showAd() {
  guard let adView = adView, adView.isAdValid else {
    return
  }
  adContainer.addSubview(adView)
}
- (void)adView:(FBAdView *)adView didFailWithError:(NSError *)error
{
  NSLog(@"Ad failed to load with error: %@", error);
}

- (void)adViewDidLoad:(FBAdView *)adView
{
  NSLog(@"Ad was loaded and ready to be displayed");
  [self showAd];
}

- (void)showAd
{
  if (self.adView && self.adView.isAdValid) {
    [self.adContainer addSubview:self.adView];
  }
}

Cuando no haya ningún anuncio que mostrar, se llamará a adView:didFailWithError: con el valor de error.code definido como 1001. Si utilizas tu propia capa personalizada de informes o mediación, puede ser recomendable comprobar el valor del código y detectar este caso. En esta situación, puedes recurrir a otra red publicitaria, pero no vuelvas a solicitar un anuncio inmediatamente después.


Siguientes pasos

Obtén más información sobre los formatos de anuncio disponibles para las aplicaciones de Audience Network.

Consulta también