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.
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; }
Nuestro repositorio de GitHub tiene implementaciones completas de anuncios nativos avanzados escritos en Swift y Objective-C.
Descargar ejemplo nativo avanzadoGADMediaView
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, consultahasVideoContent
.Si el anuncio no contiene un elemento de video, el elemento
mainImage
se descarga y se coloca en elGADMediaView
.
Próximos pasos
Obtén más información sobre la privacidad del usuario.