Nativo avanzado

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 del 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.

Importante: Consulta nuestra guía sobre los anuncios nativos para obtener más información acerca de este tipo de anuncios. Lee también las políticas y directrices de los anuncios nativos para descubrir cómo se renderizan estos anuncios.

GADNativeAdView

GADNativeAdView es la clase de vista de anuncio correspondiente a GADNativeAd. Esta clase es un elemento UIView que los editores deben usar para mostrar el anuncio. Por ejemplo, una sola clase GADNativeAdView puede mostrar una única instancia de un objeto GADNativeAd. Todos los objetos UIView utilizados para mostrar los recursos de ese anuncio deben ser vistas secundarias del objeto GADNativeAdView.

Por ejemplo, si muestras un anuncio en un objeto UITableView, la jerarquía de vistas de una de las celdas podría tener el siguiente aspecto:

La clase GADNativeAdView también proporciona objetos IBOutlets para registrar la vista empleada con cada recurso, así como un método para registrar el propio objeto GADNativeAd. 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 o AdSense o del backfill de AdMob), el SDK añade una superposición de Gestión de anuncios. Deja espacio en la esquina que prefieras de tu vista de anuncio nativo para incluir el logotipo de Gestión de anuncios, 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 esta superposición, consulta las directrices para implementar anuncios nativos programáticos.

Indicación de anuncios

Al mostrar anuncios nativos programáticos, debes incluir una indicación 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 colocar 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 podría tener 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

GADNativeAdView. Esta es la clase de vista de anuncio que se usa para mostrar un objeto GADNativeAd.

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 la clase de vista de anuncio correcta al diseño, vincula las salidas de los recursos de vista de anuncio a los objetos UIViews que hayas creado. Este es un ejemplo de cómo vincular dichas salidas a los objetos UIViews creados para mostrar un anuncio:

En el panel de salida, las salidas de GADNativeAdView 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: - GADNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
  print("Received native ad: \(nativeAd)")
  refreshAdButton.isEnabled = true
  // Create and place ad in view hierarchy.
  let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first
  guard let nativeAdView = nibView as? GADNativeAdView else {
    return
  }
  setAdView(nativeAdView)

  // Set ourselves as the native ad delegate to be notified of native ad events.
  nativeAd.delegate = self

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

  // This app uses a fixed width for the GADMediaView and changes its height to match the aspect
  // ratio of the media it displays.
  if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 {
    let heightConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .height,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .width,
      multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio),
      constant: 0)
    heightConstraint.isActive = true
  }

  // 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

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  // Note: this should always be done after populating the ad views.
  nativeAdView.nativeAd = nativeAd
}

Objective‑C

#pragma mark GADNativeAdLoaderDelegate implementation

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

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

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

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

Nota: Como puedes ver, en el ejemplo de código anterior se inhabilita la interacción de los usuarios con el objeto UIButton que muestra la llamada a la acción. Si usas elementos UIButton para mostrar recursos de anuncios nativos, también debes inhabilitar su capacidad de interacción con los usuarios, de modo que el SDK de anuncios de Google para móviles pueda recibir y procesar correctamente los eventos de la UI. Debido a este paso adicional, suele ser mejor no usar objetos UIButton y, en su lugar, emplear UILabel y UIImageView.

En nuestro repositorio de GitHub hay implementaciones completas deanuncios nativos avanzados programados en Swift y Objective‐C.

Descargar ejemplo de nativo avanzado

GADMediaView

Importante: Si quieres incluir un recurso de imagen principal en el diseño de un anuncio nativo, tienes que usar el recurso GADMediaView en lugar del recurso UIImageView.

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

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

Más abajo, encontrarás un fragmento del ejemplo de anuncio nativo avanzado (Swift | Objective‑C) que muestra cómo rellenar GADMediaView con los recursos de anuncios nativos mediante GADMediaContent de GADNativeAd.

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 personalizada de vistas y que has conectado esa 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 que se escala una imagen en la clase GADMediaView, configura el elemento UIViewContentMode correspondiente en la propiedad contentMode de la clase GADMediaView para conseguirlo.

Por ejemplo, para rellenar la clase 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 configura 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 la vista GADMediaView. En hasVideoContent puedes comprobar si un recurso de vídeo está disponible.

• Si el anuncio no tiene ningún recurso de vídeo, se descarga el recurso mainImage y se coloca dentro de GADMediaView.

Importante: mainImage es el recurso de imagen que se descarga primero de manera predeterminada. Si se usa disableImageLoading, el valor de mainImage será nil y tendrás que asignar esta propiedad a la imagen que has descargado manualmente. Recuerda que esta imagen solo se usará cuando no haya recursos de vídeo disponibles.