Nativo avanzado

Cómo mostrar un formato de anuncio nativo definido por el sistema

Cuando se cargue un anuncio nativo, tu app recibirá un objeto de anuncio nativo mediante uno de los mensajes de protocolo GADAdLoaderDelegate. La app será responsable de mostrar el anuncio (aunque no es necesario que lo haga de inmediato). Para facilitar la visualización de formatos de anuncios definidos por el sistema, el SDK ofrece algunos recursos útiles.

Punto clave: Obtén más información sobre los anuncios nativos en nuestra guía de anuncios nativos. Además, revisa los lineamientos y las políticas de anuncios nativos para obtener información sobre cómo renderizar tus anuncios nativos.

GADNativeAdView

Para el GADNativeAd, hay una clase de reproducción de anuncios correspondiente: GADNativeAdView. Esta clase de reproducción de anuncios es un elemento UIView que los publicadores deben usar para mostrar el anuncio. Por ejemplo, una sola GADNativeAdView puede mostrar una sola instancia de una GADNativeAd. Cada uno de los objetos UIView que se usa para mostrar los elementos de ese anuncio debe ser una subvista de ese objeto GADNativeAdView.

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

La clase GADNativeAdView también proporciona el objeto IBOutlets que se usa para registrar la vista utilizada para cada elemento individual y un método para registrar el objeto GADNativeAd en sí. Si registras las vistas de esta manera, el SDK podrá controlar automáticamente tareas como las siguientes:

• Se registran los clics.
• Registrar impresiones (cuando se muestra el primer píxel en la pantalla).
• Se muestra la superposición de AdChoices.

La superposición de AdChoices

En el caso de los anuncios nativos indirectos (que se publican mediante AdMobreabastecimiento o a través de Ad Exchange o AdSense), el SDK agrega una superposición de AdChoices. Deje espacio en la esquina de su preferencia en la vista del anuncio nativo para que se inserte el logotipo de AdChoices automáticamente. Además, asegúrate de que la superposición de AdChoices se coloque en el contenido que permita ver el ícono con facilidad. Para obtener más información sobre la apariencia y la función de la superposición, consulta los lineamientos de implementación de anuncios programáticos nativos.

Atribución de anuncio

Cuando muestras anuncios nativos programáticos, debes mostrar una atribución de anuncio para indicar que la vista es un anuncio.

Ejemplo de código

Veamos cómo mostrar anuncios nativos con vistas cargadas de forma dinámica desde archivos .xib. Este puede ser un enfoque muy útil cuando se usa GADAdLoaders configurado para solicitar varios formatos.

Cómo diseñar las UIViews

El primer paso es organizar el UIViews que mostrará los elementos de anuncios nativos. Puedes hacer esto en el compilador de interfaces como lo harías cuando crees cualquier otro archivo .ib A continuación, se muestra cómo podría verse el diseño de un anuncio nativo:

Observa el valor de la clase personalizada en la parte superior derecha de la imagen. Se estableció en

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

También tendrás que establecer la clase personalizada para GADMediaView, que se usa a fin de mostrar el video o la imagen del anuncio.

Cómo vincular salidas a vistas

Una vez que las vistas estén listas y hayas asignado la clase de reproducción de anuncios correcta al diseño, vincula los tomacorrientes de elementos de la vista del anuncio al UIViews que creaste. A continuación, se muestra cómo puedes vincular las salidas de elementos de la vista del anuncio al UIViews creado para un anuncio:

En el panel de tomacorrientes, los tomacorrientes de GADNativeAdView se vincularon al UIViews configurado en el compilador de interfaces. Esto permite que el SDK sepa qué UIView muestra qué elemento. También es importante recordar que estos tomacorrientes representan las vistas en las que se puede hacer clic en el anuncio.

Cómo mostrar el anuncio

Una vez que se complete el diseño y se hayan vinculado los tomacorrientes, el último paso es agregar código a tu app que muestre un anuncio una vez que se haya cargado. A continuación, se muestra un método para 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, el ejemplo de código anterior inhabilita la interacción del usuario para el UIButton que muestra el llamado a la acción. Si usas UIButtons para mostrar elementos de anuncios nativos, también debes inhabilitar la interacción de los usuarios a fin de que el SDK de los anuncios móviles de Google pueda recibir y procesar correctamente los eventos de la IU. Debido a este paso adicional, es mejor evitar UIButtons por completo y usar UILabel y UIImageView en su lugar.

Nuestro repositorio de GitHub tiene las implementaciones completas deanuncios nativos nativos escritos en Swift y Objective-C.

Descargar el ejemplo de configuración avanzada nativa

GADMediaView

Punto clave: Debes usar el elemento GADMediaView en lugar del UIImageView si deseas incluir un elemento de imagen principal en el diseño de tu anuncio nativo.

Los elementos de imagen y video se muestran a los usuarios a través de GADMediaView. Este es un UIView que se puede definir en un archivo Xib o construir de forma dinámica. Se debe colocar dentro de la jerarquía de vistas de un GADNativeAdView, como con cualquier otra vista de elementos.

Al igual que con todas las vistas de elementos, la vista de contenido multimedia debe tener su contenido propagado. Esto se configura con la propiedad mediaContent en GADMediaView. La propiedad mediaContent de GADNativeAd incluye contenido multimedia que se puede pasar a un GADMediaView.

Este es un fragmento delejemplo nativo avanzado (Swift | Objective‐C) que muestra cómo propagar GADMediaView con los elementos de anuncios nativos usando GADMediaContent del GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective‑C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Asegúrate de que, en el archivo del compilador de interfaces para la vista de tu anuncio nativo, tengas configurada la clase personalizada Views en GADMediaView y la hayas conectado al tomacorriente mediaView.

Cómo cambiar el modo de contenido de la imagen

La clase GADMediaView respeta la propiedad contentMode UIView cuando se muestran imágenes. Si deseas cambiar la forma en que se escala una imagen en el GADMediaView, configura el UIViewContentMode correspondiente en la propiedad contentMode del GADMediaView para lograrlo.

Por ejemplo, para llenar el GADMediaView cuando se muestra una imagen (el anuncio no tiene video), usa lo siguiente:

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective‑C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

Contenido de GADMedia

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 GADMediaView mediaContent:

• Si hay un elemento de video disponible, se almacena en búfer y comienza a reproducirse dentro del GADMediaView. Puedes saber si un elemento de video está disponible marcando hasVideoContent.

• Si el anuncio no contiene un elemento de video, se descarga el elemento mainImage y se coloca dentro del GADMediaView.

Punto clave: De forma predeterminada, mainImage es el primer elemento de imagen que se descarga. Si se usa disableImageLoading, mainImage es nil, y debes establecer esta propiedad en la imagen que descargaste de forma manual. Ten en cuenta que esta imagen solo se usará cuando no haya ningún elemento de video disponible.