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.
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; }
Nuestro repositorio de GitHub tiene las implementaciones completas deanuncios nativos nativos escritos en Swift y Objective-C.
Descargar el ejemplo de configuración avanzada nativaGADMediaView
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 marcandohasVideoContent
.Si el anuncio no contiene un elemento de video, se descarga el elemento
mainImage
y se coloca dentro delGADMediaView
.