Añadir anuncios nativos a tu aplicación en iOS

La API de anuncios nativos te permite crear una experiencia personalizada para los anuncios que aparecen en tu aplicación. Cuando utilices la API de anuncios nativos, en lugar de un anuncio listo para mostrarse, recibirás un grupo de propiedades de anuncio, como un título, una imagen y una llamada a la acción, que tendrás que utilizar para crear una clase “UIView” personalizada donde se muestre el anuncio.

Vamos a implementar la siguiente ubicación de anuncio nativo. Crearás los siguientes elementos “View” para nuestro anuncio nativo:

Paso 1: Crear los objetos “View” del anuncio nativo en un archivo Storyboard

Paso 2: Cargar y mostrar el anuncio nativo

Paso 3: Cómo obtener la relación de aspecto del contenido y aplicar la anchura y altura naturales

Paso 4: Verificar el registro de impresiones y clics

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

Paso 6: Cargar un anuncio sin almacenarlo en caché automáticamente

Paso 7: Integración de los anuncios de prueba

Consultar los problemas conocidos en el registro de cambios

Paso 1: Crear los objetos “View” del anuncio nativo en un archivo Storyboard

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 adUIView.
   
   
   
2. Además, añade los elementos adIconImageView (FBMediaView), adTitleLabel (UILabel), adCoverMediaView (FBMediaView), adSocialContext (UILabel), adCallToActionButton (UIButton), adOptionsView (FBAdOptionsView), adBodyLabel (UILabel), sponsoredLabel (UILabel) en adUIView, como se muestra en esta imagen.
   
   
   
3. Puede que observes una flecha blanca sobre fondo rojo cerca de View Controller Scene. Normalmente indica que faltan restricciones en el diseño.
   
   
   Tendrás que seleccionar todos los objetos “View” de la escena y hacer clic en el icono “resolve layout issue” para añadir las restricciones que faltan.
   
   
   
4. Ahora que ya has creado todos los elementos de la IU necesarios para mostrar un anuncio nativo, debes hacer referencia a ellos en la interfaz “ViewController”. Primero, abre ViewController.m (ViewController.swift si estás utilizando Swift) y, a continuación, arrastra el elemento adUIView al interior del objeto ViewController. Puedes asignarle el nombre adUIView. A continuación, debes repetir la misma operación con los elementos adIconImageView, adTitleLabel, adCoverMediaView, adSocialContext, adCallToActionButton, adOptionsView, adBodyLabel y sponsoredLabel.
   
   
   
5. Compila y ejecuta el proyecto. Debería aparecer un contenido vacío como este en tu dispositivo o simulador:
   

El siguiente paso tras crear todos los elementos de la IU necesarios para mostrar este tipo de anuncios consiste en cargar el anuncio nativo y vincular los diversos contenidos a los elementos correspondientes de la IU.

Paso 2: Cargar y mostrar el anuncio nativo

1. En el archivo de origen “ViewController”, importa el SDK, declara que ViewController implementa el protocolo FBNativeAdDelegate y añade una variable de instancia FBNativeAd.
   SwiftObjective-C

   import UIKit
   import FBAudienceNetwork
   
   class ViewController: UIViewController, FBNativeAdDelegate {
       
     private var nativeAd: FBNativeAd?
   }

   #import <UIKit/UIKit.h>
   @import FBAudienceNetwork;
   
   @interface ViewController () <FBNativeAdDelegate>
   
   @property (strong, nonatomic) FBNativeAd *nativeAd;
   
   @end



2. En el método viewDidLoad, añade las siguientes líneas de código para cargar el contenido del anuncio nativo:
   SwiftObjective-C

   override func viewDidLoad() {
     super.viewDidLoad()
       
     let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
     nativeAd.delegate = self
     nativeAd.loadAd()
   }

   - (void)viewDidLoad 
   {
     [super viewDidLoad];
   
     FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
     nativeAd.delegate = self;
     [nativeAd loadAd];
   }

   
   

   El identificador que se muestra en YOUR_PLACEMENT_ID es un identificador temporal solo con fines de prueba.

   Si utilizas este identificador temporal en el código activo, los usuarios no recibirán anuncios y obtendrán un error “No Fill”. Debes volver aquí tras las pruebas y sustituir el identificador temporal con un identificador de ubicación activo.

   Para obtener más información sobre cómo generar un identificador de ubicación activo, consulta Configuración de Audience Network.

3. El siguiente paso consiste en mostrar el anuncio cuando el contenido esté listo. Tendrás que implementar el método delegado nativeAdDidLoad en ViewController.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
       
     // 1. If there is an existing valid native ad, unregister the view
     if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
       previousNativeAd.unregisterView()
     }
       
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: adCoverMediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, adCoverMediaView]
     )
       
     // 4. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     // 1. If there is an existing valid native ad, unregister the view
     if (self.nativeAd && self.nativeAd.isAdValid) {
       [self.nativeAd unregisterView];
     }
   
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd;
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:self.adCoverMediaView
                                      iconView:self.adIconImageView
                                viewController:self
                                clickableViews:@[self.adCallToActionButton, self.adCoverMediaView]];
   
     // 4. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }

Controlar la zona interactiva

Para conseguir unos resultados y una experiencia de usuario mejores, considera la posibilidad de controlar la zona interactiva del anuncio para evitar los clics no intencionados. Consulta la página de la Política del SDK de Audience Network para obtener más información sobre las normas relativas a los espacios en blanco en los que no se puede hacer clic.




4. Elige el dispositivo como destino de compilación y ejecuta el código anterior. Debes ver algo parecido a esto:
   
   
   
   

Paso 3: Cómo obtener la relación de aspecto del contenido y aplicar la anchura y altura naturales

En el ejemplo anterior, el contenido multimedia del anuncio se muestra en el elemento adCoverMediaView, cuyo tipo de objeto es FBMediaView. En un paso anterior, hemos visto cómo utilizar FBMediaView para cargar contenido multimedia de un objeto FBNativeAd determinado. Este elemento “View” sustituye la carga manual de una imagen de portada. Al crear el elemento FBMediaView, su anchura y altura pueden integrarse como parte del código o determinarse por las restricciones de diseño automáticas que se establecen en el archivo Storyboard. Sin embargo, es posible que la anchura y altura de este elemento no encajen con la imagen de portada del anuncio que se descargue más tarde. Para solucionar este problema, en el siguiente ejemplo se muestra cómo obtener la relación de aspecto del contenido y aplicar la anchura y altura naturales:

1. Declara que “ViewController” implementa el protocolo FBMediaViewDelegate.
   SwiftObjective-C

   class ViewController: UIViewController, FBNativeAdDelegate, FBMediaViewDelegate {
     ...
   }

   @interface ViewController : UIViewController <FBNativeAdDelegate, FBMediaViewDelegate>
   ...
   @end



2. Cuando el anuncio nativo se cargue, configura el delegado del objeto FBMediaView para que sea el “ViewController”.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     adCoverMediaView.delegate = self
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
   {
     self.adCoverMediaView.delegate = self;
   }



3. Implementa el método mediaViewDidLoad en el elemento “ViewController”.
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     let currentAspect = mediaView.frame.size.width / mediaView.frame.size.height
     print(currentAspect)
     
     let actualAspect = mediaView.aspectRatio
     print(actualAspect)
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView
   {
     CGFloat currentAspect = mediaView.frame.size.width / mediaView.frame.size.height;
     NSLog(@"current aspect of media view: %f", currentAspect);
     
     CGFloat actualAspect = mediaView.aspectRatio;
     NSLog(@"actual aspect of media view: %f", actualAspect);
   }

   
   mediaView.aspectRatio devuelve un valor CGFloat positivo, o 0,0 si no se ha cargado ningún anuncio. Su valor es válido después de que se haya cargado la visualización del contenido multimedia. Existen métodos sencillos para establecer la anchura y altura del objeto FBMediaView de forma que se respete la relación de aspecto del contenido multimedia cargado. Puedes llamar a applyNaturalWidth o applyNaturalHeight para actualizar la anchura o altura del objeto FBMediaView de forma que se adapte a la relación de aspecto del contenido multimedia.

Paso 4: 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 nativo o las ocasiones en las que lo cierra:

func nativeAdDidClick(_ nativeAd: FBNativeAd) {
  print("Native ad was clicked.")
}

func nativeAdDidFinishHandlingClick(_ nativeAd: FBNativeAd) {
  print("Native ad did finish click handling.")
}

func nativeAdWillLogImpression(_ nativeAd: FBNativeAd) {
  print("Native ad impression is being captured.")
}

- (void)nativeAdDidClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad was clicked.");
}

- (void)nativeAdDidFinishHandlingClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad did finish click handling.");
}

- (void)nativeAdWillLogImpression:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad impression is being captured.");
}

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

Añade e implementa la siguiente función en el archivo del controlador de vista para gestionar los procesos de carga fallidos del anuncio:

func nativeAd(_ nativeAd: FBNativeAd, didFailWithError error: Error) {
  print("Native ad failed to load with error: \(error.localizedDescription)")
}

- (void)nativeAd:(FBNativeAd *)nativeAd didFailWithError:(NSError *)error
{
  NSLog(@"Native ad failed to load with error: %@", error);
}

Paso 6: Cargar un anuncio sin almacenarlo en caché automáticamente

1. Es recomendable dejar el almacenamiento en caché de contenido multimedia activado en todos los casos. Sin embargo, puedes reemplazar el valor predeterminado. Ten cuidado si decides reemplazar el almacenamiento en caché de contenido multimedia predeterminado.
   SwiftObjective-C

   let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
   nativeAd.delegate = self
   nativeAd.loadAd(withMediaCachePolicy: .none)

   FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
   nativeAd.delegate = self;
   [nativeAd loadAdWithMediaCachePolicy:FBNativeAdsCachePolicyNone];



2. Primero, deberás descargar manualmente todo el contenido multimedia del anuncio nativo.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     
     ...
     
     self.adCoverMediaView.delegate = self
     nativeAd.downloadMedia()
     self.nativeAd = nativeAd
     
     ...
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     ...
   
     self.adCoverMediaView.delegate = self;
     [nativeAd downloadMedia];
     self.nativeAd = nativeAd;
   
     ...
   }



3. A continuación, solo debes llamar a registerViewForInteraction y mostrar el anuncio después de la devolución de llamada mediaViewDidLoad. Es necesario cargar y mostrar todo el contenido multimedia de una impresión válida.
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     guard let nativeAd = nativeAd else {
       return
     }
     
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: mediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, mediaView]
     )
       
     // 2. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView 
   {
     if (!self.nativeAd) {
       return;
     }
   
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:mediaView
                                      iconView:self.adIconImageView
                             viewController:self
                            clickableViews:@[self.adCallToActionButton, mediaView]];
   
     // 2. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }