Nativo avanzado

Muestra 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 del protocolo GADAdLoaderDelegate. Luego, tu app es responsable de mostrar el anuncio (aunque no tiene que hacerlo 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, consulta los lineamientos y políticas de anuncios nativos para obtener información sobre cómo renderizar tus anuncios nativos.

VistaDeADVa

Para el GADNativeAd, hay una clase "ad view": GADNativeAdView. Esta clase de vista de anuncio es un UIView que los editores deberían usar para mostrar el anuncio. Un solo objeto GADNativeAdView, por ejemplo, puede mostrar una sola instancia de un 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.

Si mostraras un anuncio en un UITableView, por ejemplo, la jerarquía de vistas de una de las celdas podría verse de la siguiente manera:

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 con el que se puede registrar el objeto GADNativeAd. Registrar las vistas de esta manera permite que el SDK maneje automáticamente tareas como las siguientes:

• Registrando clics.
• Registrar impresiones (cuando se vea 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 (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 recomendada de la vista de su anuncio nativo para el logotipo de AdChoices insertado automáticamente. Además, asegúrate de que la superposición de AdChoices se coloque en contenido que permita que el ícono se vea con facilidad. Para obtener más información sobre el aspecto y la función de las superposiciones, 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 usando 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 los UIViews

El primer paso es diseñar la UIViews que mostrará los recursos del anuncio nativo. Puedes hacer esto en el compilador de interfaces como lo harías cuando creas cualquier otro archivo .xib. A continuación, se muestra el diseño de un anuncio nativo:

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

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.

Cómo vincular salidas a vistas

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

En el panel de salida, se vincularon las salidas de GADNativeAdView 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 se complete el diseño y se conecten los tomacorrientes, 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 describe 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 recursos de anuncios nativos, también debes inhabilitar su interacción de usuario de modo que el SDK de Google Mobile Ads pueda recibir y procesar correctamente los eventos de la IU. Debido a este paso adicional, a menudo, es mejor evitar los UIButtons por completo y usar UILabel y UIImageView en su lugar.

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

Descargar ejemplo nativo avanzado

GADMediaView

Punto clave: Si deseas incluir un recurso de imagen principal en el diseño del anuncio nativo, debes usar el elemento GADMediaView en lugar del elemento UIImageView.

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 ubicarse dentro de la jerarquía de vistas de una GADNativeAdView, como en 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.

A continuación, se muestra un fragmento del ejemplo de Native Advanced (Swift | Objective-C) que muestra cómo propagar el GADMediaView con los recursos de anuncios nativos usando GADMediaContent desde 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 la clase personalizada de vistas configurada 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 UIView contentMode cuando se muestran imágenes. Si deseas cambiar la forma en que se escala una imagen en GADMediaView, configura la UIViewContentMode correspondiente en la propiedad contentMode de GADMediaView para lograrlo.

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

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective‑C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

Contenido multimedia de GAD

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

• Si hay un elemento de video disponible, 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 en el 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 la imagen que descargaste manualmente. Ten en cuenta que esta imagen se usará solo cuando no haya ningún recurso de video disponible.

Próximos pasos

Obtén más información sobre la privacidad del usuario.