Anuncios nativos avanzados

Ver formatos de anuncios nativos definidos por el sistema

Cuando se cargue un anuncio nativo, tu aplicación recibirá un objeto de anuncio nativo mediante uno de los mensajes de protocolo GADAdLoaderDelegate. Tu aplicación se encargará entonces de mostrar el anuncio, aunque no es necesario que lo haga de inmediato. Para que resulte más fácil mostrar formatos de anuncios definidos por el sistema, el SDK ofrece algunos recursos útiles.

GADUnifiedNativeAdView

GADUnifiedNativeAdView es la clase de vista de anuncio correspondiente a GADUnifiedNativeAd. Se trata de un elemento UIView que los editores deben usar para mostrar anuncios. Una sola clase GADUnifiedNativeAdView, por ejemplo, puede mostrar una única instancia de un objeto GADUnifiedNativeAd. Todos los objetos UIView empleados para mostrar los recursos del anuncio deben ser vistas secundarias de GADUnifiedNativeAdView.

Por ejemplo, si muestras un anuncio en un objeto UITableView, la jerarquía de vistas de una de las celdas podría ser similar a esta:

La clase GADUnifiedNativeAdView también proporciona IBOutlets, que se usa para registrar la vista empleada con cada recurso individual, y un método para registrar el propio objeto GADUnifiedNativeAd. Al registrar las vistas de esta forma, el SDK puede gestionar automáticamente tareas como las siguientes:

  • Registrar clics.
  • Registrar impresiones (cuando se ve el primer píxel en la pantalla).
  • Mostrar la superposición de Gestión de anuncios.

Superposición de Gestión de anuncios

En los anuncios nativos indirectos (publicados a través de Ad Exchange, de AdSense o del backfill AdMob), el SDK añade una superposición de Gestión de anuncios. Reserva espacio en la esquina que prefieras de la vista de anuncios nativos para el logotipo de dicho producto, que se inserta automáticamente. Asegúrate también de que el contenido en el que se coloque dicha superposición permite que se vea el icono fácilmente. Para obtener más información sobre el diseño y la función de la superposición, consulta las directrices de implementación de anuncios nativos programáticos.

Indicación de anuncios

Si muestras anuncios nativos programáticos, debes incluir una indicación de anuncio para dejar claro que se trata de publicidad.

Ejemplo de código

Veamos cómo mostrar anuncios nativos mediante vistas cargadas dinámicamente a partir de archivos xib. Puede ser una estrategia muy útil si se configuran objetos GADAdLoaders para solicitar varios formatos.

Diseño de los objetos UIViews

El primer paso es distribuir los objetos UIViews que mostrarán los recursos de anuncios nativos. Puedes hacerlo en Interface Builder, tal como harías para crear cualquier otro archivo xib. Este es el aspecto que tendría el diseño de un anuncio nativo:

Fíjate en el valor de clase personalizada que se encuentra en la esquina superior derecha de la imagen: es

GADUnifiedNativeAdView. Esta es la clase de vista de anuncio que se usa para mostrar los objetos GADUnifiedNativeAd.

También debes configurar la clase personalizada del objeto GADMediaView, que se utiliza para mostrar el vídeo o la imagen del anuncio.

Vincular salidas a vistas

Cuando las vistas estén configuradas y hayas asignado las clases de vista de anuncio correctas al diseño, vincula las salidas de los recursos de vistas de anuncio a los objetos UIViews que hayas creado. Este es el procedimiento que debes seguir para vincular dichas salidas a los objetos UIViews creados para mostrar un anuncio:

En el panel de salida, las salidas de GADUnifiedNativeAdView se han vinculado a los objetos UIViews distribuidos en Interface Builder. Así, el SDK sabe qué UIView muestra cada recurso. También es importante recordar que estas salidas representan las vistas en las que se puede hacer clic en el anuncio.

Presentación de anuncios

Una vez completado el diseño y vinculadas las salidas, el último paso es añadir código a la aplicación para mostrar un anuncio después de cargarlo. El siguiente método permite mostrar un anuncio en la vista definida anteriormente:

Swift

// Mark: - GADUnifiedNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADUnifiedNativeAd) {
  print("Received unified native ad: \(nativeAd)")
  refreshAdButton.isEnabled = true
  // Create and place ad in view hierarchy.
  let nibView = Bundle.main.loadNibNamed("UnifiedNativeAdView", owner: nil, options: nil)?.first
  guard let nativeAdView = nibView as? GADUnifiedNativeAdView else {
    return
  }
  setAdView(nativeAdView)

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd

  // Set the mediaContent on the GADMediaView to populate it with available
  // video/image asset.
  nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
  nativeAdView.bodyView?.isHidden = nativeAd.body == nil

  (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
  nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil

  (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
  nativeAdView.iconView?.isHidden = nativeAd.icon == nil

  (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(fromStarRating:nativeAd.starRating)
  nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil

  (nativeAdView.storeView as? UILabel)?.text = nativeAd.store
  nativeAdView.storeView?.isHidden = nativeAd.store == nil

  (nativeAdView.priceView as? UILabel)?.text = nativeAd.price
  nativeAdView.priceView?.isHidden = nativeAd.price == nil

  (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
  nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  nativeAdView.callToActionView?.isUserInteractionEnabled = false
}

Objective‑C

#pragma mark GADUnifiedNativeAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader didReceiveUnifiedNativeAd:(GADUnifiedNativeAd *)nativeAd {
  NSLog(@"Received unified native ad: %@", nativeAd);
  self.refreshButton.enabled = YES;

  // Create and place ad in view hierarchy.
  GADUnifiedNativeAdView *nativeAdView =
      [[NSBundle mainBundle] loadNibNamed:@"UnifiedNativeAdView" owner:nil options:nil].firstObject;
  [self setAdView:nativeAdView];

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd;

  // Set the mediaContent on the GADMediaView to populate it with available
  // video/image asset.
  nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction
                                              forState:UIControlStateNormal];
  nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

    ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating];
  nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES;

  ((UILabel *)nativeAdView.storeView).text = nativeAd.store;
  nativeAdView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)nativeAdView.priceView).text = nativeAd.price;
  nativeAdView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser;
  nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  nativeAdView.callToActionView.userInteractionEnabled = NO;
}

Nuestro repositorio de GitHub contiene implementaciones completas de anuncios nativos avanzados programados en Swift y Objective‑C.

Descargar ejemplo de anuncio nativo avanzado

GADMediaView

Los recursos de imagen y de vídeo se muestran a los usuarios a través de GADMediaView. Se trata de un objeto UIView que se puede definir en un archivo xib o se puede crear de forma dinámica. Debe colocarse dentro de la jerarquía de vistas de un objeto GADNativeAdView, igual que cualquier otra vista de recursos.

Debes rellenar el contenido de la vista multimedia, al igual que el de las demás vistas de recurso. Para hacerlo, usa la propiedad mediaContent en GADMediaView. La propiedad mediaContent de GADUnifiedNativeAd incluye contenido multimedia que se puede transferir a GADMediaView.

Este es un fragmento del ejemplo de anuncio nativo avanzado: (Swift | Objective-C) que muestra cómo rellenar el objeto GADMediaView con los recursos de anuncios nativos mediante GADMediaContent de GADUnifiedNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective‑C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Asegúrate de que en el archivo de Interface Builder correspondiente a la vista de anuncios nativos has elegido GADMediaView como la clase de vistas personalizadas, y que has conectado dicha clase a la salida mediaView.

Cambiar imagen mediante la propiedad contentMode

La clase GADMediaView respeta la propiedad contentMode de UIView cuando se muestran imágenes. Si quieres cambiar la forma en la que se escalan las imágenes en GADMediaView, configura el UIViewContentMode correspondiente en la propiedad contentMode de GADMediaView.

Por ejemplo, para rellenar GADMediaView cuando se muestra una imagen (siempre que el anuncio no incluya un vídeo):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective‑C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

La clase GADMediaContent contiene los datos relacionados con el contenido multimedia del anuncio nativo, que se muestra mediante la clase GADMediaView. Cuando se define en la propiedad mediaContent de GADMediaView:

  • Si hay un recurso de vídeo disponible, se carga en el búfer y empieza a reproducirse dentro de GADMediaView. Puedes comprobar los recursos de vídeo disponibles en hasVideoContent.

  • Si el anuncio no contiene un recurso de vídeo, se descarga el primer recurso de imagen y se coloca dentro de GADMediaView.

La clase de contenido multimedia tiene las siguientes propiedades:

aspectRatio
Representa la relación de altura y anchura del vídeo (si este está disponible) o de la imagen, o bien 0 (cero) si no hay contenido multimedia disponible.
mainImage
De forma predeterminada, mainImage es el recurso de imagen que se descarga primero. Si se usa disableImageLoading, el valor de mainImage es nil y tendrás que asignar esta propiedad a la imagen descargada manualmente. Recuerda que esta imagen solo se usa cuando no hay recursos de vídeo disponibles.

Vídeo nativo

Además de imágenes, texto y cifras, algunos anuncios nativos contienen recursos de vídeo. No todos los anuncios los tienen y no es obligatorio que las aplicaciones muestren los vídeos incluidos en los anuncios.

GADVideoController

La clase GADVideoController se utiliza para controlar las reproducciones de vídeo y obtener las retrollamadas de dichas reproducciones.

GADUnifiedNativeAd ofrece una propiedad videoController que expone la clase GADVideoController de cada anuncio:

Swift

let videoController = myUnifiedNativeAd.videoController

Objective‑C

GADVideoController *videoController = myUnifiedNativeAd.videoController

Esta propiedad nunca es nil, aunque el anuncio no contenga recursos de vídeo.

Las aplicaciones también pueden definir GADVideoControllerDelegate para que la clase GADVideoController reciba notificaciones de eventos durante el ciclo de vida de los recursos de vídeo. GADVideoControllerDelegate ofrece un único mensaje opcional, videoControllerDidEndVideoPlayback, que se envía cuando un vídeo termina de reproducirse.

Aquí hay un ejemplo de GADVideoControllerDelegate en acción para observar cuándo finaliza la reproducción:

Swift

class ViewController: UIViewController, GADUnifiedNativeAdLoaderDelegate,
    GADVideoControllerDelegate {

  func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd:
                GADUnifiedNativeAd) {
    ...
    nativeAd.mediaContent.videoController.delegate = self
    ...
  }
  ...
  func videoControllerDidEndVideoPlayback(_ videoController: Any!) {
    // Here apps can take action knowing video playback is finished.
    // This is handy for things like unmuting audio, and so on.
  }
}

Objective‑C

@interface ViewController () <GADUnifiedNativeAdLoaderDelegate,
        GADVideoControllerDelegate>

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeAd:(GADUnifiedNativeAd) *)nativeAd {
  ...
  nativeAd.mediaContent.videoController.delegate = self;
  ...
}
...

- (void)videoControllerDidEndVideoPlayback:(GADVideoController *)videoController {
  // Here apps can take action knowing video playback is finished.
  // This is handy for things like unmuting audio, and so on.
}

@end

Lee las políticas y directrices de los anuncios nativos para obtener más información sobre cómo renderizarlos.

Enviar comentarios sobre...

Si necesitas ayuda, visita nuestra página de asistencia.