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 a través de uno de los mensajes del protocolo GADAdLoaderDelegate. Luego, la app se encarga 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 algunos recursos útiles.

Punto clave: Revisa los Lineamientos y políticas de los anuncios nativos para obtener orientación sobre cómo renderizar tus anuncios nativos.

GADNativeAdView

Para el GADNativeAd, hay una clase "ad view" correspondiente: GADNativeAdView. Esta clase de vista de anuncio es una UIView que los publicadores deben usar para mostrar el anuncio. Un solo GADNativeAdView, por ejemplo, puede mostrar una sola instancia de GADNativeAd. Cada uno de los objetos UIView que se usan para mostrar los elementos de ese anuncio debe ser subvistas de ese objeto GADNativeAdView.

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

La clase GADNativeAdView también proporciona el objeto IBOutlets que se usa para registrar la vista que se usa con cada recurso individual y un método para registrar el objeto GADNativeAd en sí. Registrar las vistas de esta manera permite que el SDK controle automáticamente 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.

Superposición de AdChoices

En el caso de los anuncios nativos indirectos (publicados a través de Ad Manager el reabastecimiento, o mediante Ad Exchange o AdSense), el SDK agrega una superposición de AdChoices. Deja espacio en la esquina que prefieras de la vista de tu anuncio nativo para que se inserte automáticamente el logotipo de AdChoices. Además, asegúrate de que la superposición de AdChoices esté colocada en el contenido que permita que el ícono se vea 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 nativos programáticos.

Nota: La Selección de anuncios se muestra únicamente en los anuncios de venta directa en el EEE.

Atribución de anuncios programáticos nativos

Cuando muestras anuncios programáticos nativos, debes mostrar una atribución de anuncio para indicar que la vista es un anuncio. Consulta esta página para conocer los lineamientos de políticas.

Ejemplo de código

Veamos cómo mostrar anuncios nativos con vistas que se cargan 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 el UIViews que mostrará los recursos de los anuncios nativos. Puedes hacerlo en el Interface Builder como lo harías al crear cualquier otro archivo .xib. Así es como se vería el diseño de un anuncio nativo:

Observa el valor Custom Class en la parte superior derecha de la imagen. Está configurada en

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

También deberás configurar la clase personalizada para GADMediaView, que se usa con el objetivo de mostrar el video o la imagen del anuncio.

Vincular las salidas a las vistas

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

En el panel de salidas, las salidas de GADNativeAdView se vincularon al UIViews establecido en el compilador de interfaces. Esto le permite al SDK saber 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.

Cómo mostrar el anuncio

Sugerencia: Obtén información para mostrar anuncios nativos con SwiftUI.

Una vez que se complete el diseño y se hayan vinculado las salidas, el último paso es agregar a tu app código que muestre un anuncio cuando se cargue. A continuación, te mostramos 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 objeto 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 del usuario a fin de que el SDK de anuncios de Google para dispositivos móviles pueda recibir y procesar eventos de la IU de manera adecuada. Debido a este paso adicional, suele ser mejor evitar los elementos UIButtons por completo y usar UILabel y UIImageView en su lugar.

Nuestro repositorio de GitHub tiene las implementaciones completas de loslos anuncios de renderización personalizada nativos escritos en Swift y Objective-C.

Descargar ejemplo de renderización personalizada de Google Ad Manager

GADMediaView

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

Los recursos 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 construirse de forma dinámica. Debe colocarse dentro de la jerarquía de vistas de un GADNativeAdView, al igual que 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.

Este es un fragmento del Ejemplo de renderización personalizada (Swift | Objective-C) que muestra cómo propagar GADMediaView con los recursos de anuncios nativos con GADMediaContent de GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective‑C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

En el archivo del compilador de interfaces de tu vista de anuncio nativo, asegúrate de tener la clase personalizada de vistas configurada en GADMediaView y de conectarla al tomacorriente mediaView.

Cómo cambiar el modo de contenido de la imagen

La clase GADMediaView respeta la propiedad UIView contentMode cuando muestra 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 elemento 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;

GADMediaContent

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

• Si hay un elemento de video disponible, se almacena en búfer y comienza a reproducirse en GADMediaView. Para saber si un recurso de video está disponible, consulta hasVideoContent.

• Si el anuncio no contiene un recurso de video, se descarga el recurso mainImage 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 la imagen descargada de forma manual. Ten en cuenta que esta imagen solo se usará cuando no haya recursos de video disponibles.

Próximos pasos

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