Nativo avanzado

Cómo mostrar un formato del 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. Entonces, tu app es responsable de mostrar el anuncio (aunque no necesariamente tiene que hacerlo de inmediato). Para facilitar la visualización de formatos de anuncios definidos por el sistema, el SDK ofrece recursos útiles.

Punto clave: Obtén más información sobre los anuncios nativos en nuestro Manual de anuncios nativos. Además, revise las políticas y los lineamientos de los anuncios nativos. para obtener orientación sobre cómo renderizarlos.

GADNativeAdView

Para 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 única instancia de una GADNativeAd. Cada uno de los objetos UIView que se usan para mostrar los elementos de ese anuncio deben ser subvistas de ese objeto GADNativeAdView.

Si muestras un anuncio en un UITableView, por ejemplo, la jerarquía de vistas para una de las celdas podría tener el siguiente aspecto:

La clase GADNativeAdView también proporciona IBOutlets que se usa para registrar la vista que se usa para cada elemento individual y un método que permite registrar el objeto GADNativeAd. El registro de las vistas de esta manera permite que el SDK maneje tareas como las siguientes:

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

La superposición de AdChoices

En el caso de los anuncios nativos indirectos (publicados mediante AdMobreabastecimiento o a través de Ad Exchange o AdSense), el SDK agrega una superposición de AdChoices. Deje espacio en la esquina que prefiera de la vista de anuncio nativo para el logotipo de Selección de anuncios que se inserta automáticamente. Además, asegúrate de que la superposición de AdChoices se coloque en contenido que permita que el ícono se vea fácilmente. 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 nativos programáticos.

Atribución del 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 distribuir las UIViews

El primer paso es diseñar el elemento UIViews que mostrará los elementos del anuncio nativo. Puedes hacerlo en el compilador de interfaces como lo harías cuando creas cualquier otro archivo .ib. Así 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 deberás configurar la clase personalizada para GADMediaView, que se usa a fin de mostrar el video o la imagen del anuncio.

Vincula las salidas con vistas

Una vez que las vistas estén en su lugar y que hayas asignado la clase de vista de anuncio correcta al diseño, vincula las salidas de elementos de esta vista con el UIViews que creaste. A continuación, se explica cómo puedes vincular las salidas de elementos de la vista del anuncio con el UIViews creado para un anuncio:

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

Cómo mostrar el anuncio

Una vez que el diseño esté completo y las conexiones estén vinculadas, el último paso es agregar código a tu app para que se 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 elementos UIButtons para mostrar recursos de anuncios nativos, también debes inhabilitar su interacción de usuario para que el SDK de Google Mobile Ads pueda recibir y procesar de manera adecuada eventos de IU. Debido a este paso adicional, la mejor opción a menudo es evitar los UIButtons por completo y usar UILabel y UIImageView en su lugar.

Nuestro repositorio de GitHub cuenta con implementaciones completas de losanuncios nativos avanzados escritos en Swift y en Objective-C.

Descargar ejemplo de anuncio nativo avanzado

GADMediaView

Punto clave: Debes usar el elemento GADMediaView en lugar del elemento UIImageView si deseas incluir un recurso 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. Debe colocarse dentro de la jerarquía de vistas de una GADNativeAdView, como con cualquier otra vista de elementos.

Al igual que con todas las vistas de elementos, la vista de medios 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.

A continuación, se muestra un fragmento delejemplo nativo avanzado (Swift | Objective-C)que muestra cómo propagar GADMediaView con los elementos del anuncio nativo usando GADMediaContent de 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 anuncios nativos, tengas configurada la clase personalizada de vistas en GADMediaView y la hayas conectado al tomacorriente de mediaView.

Cambio del modo de contenido de la imagen

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

Por ejemplo, para completar el GADMediaView cuando se muestra una imagen (el anuncio no tiene video):

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, este se almacena en búfer y comienza a reproducirse dentro de GADMediaView. Para saber si un elemento de video está disponible, consulta hasVideoContent.

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

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