Mostrar anuncios nativos unificados
Cuando se carga un anuncio nativo, el SDK de anuncios de Google para móviles invoca el procesador del formato de anuncio correspondiente. Tu aplicación se encarga entonces de mostrar el anuncio, aunque no es necesario que lo haga de inmediato. Para que sea más fácil mostrar formatos de anuncio definidos por el sistema, el SDK ofrece algunos recursos útiles, tal como se indica a continuación.
Clase UnifiedNativeAdView
El formato UnifiedNativeAd
tiene una clase correspondiente: UnifiedNativeAdView
. Se trata de un elemento ViewGroup
que los editores deben usar como raíz del formato UnifiedNativeAd
. Una sola clase UnifiedNativeAdView
se corresponde con un único anuncio nativo unificado.
Cada una de las vistas utilizadas para mostrar los recursos de ese anuncio (como el elemento ImageView
, que muestra el recurso de captura de pantalla, por ejemplo), debe ser un elemento secundario del objeto UnifiedNativeAdView
.
La jerarquía de vistas de un anuncio nativo unificado que utiliza un elemento LinearLayout
para mostrar las vistas de sus recursos debería tener un aspecto similar a este:
<com.google.android.gms.ads.formats.UnifiedNativeAdView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
... >
<LinearLayout
android:orientation="horizontal"
... >
<ImageView
android:id="@+id/ad_app_icon"
... />
<TextView
android:id="@+id/ad_headline"
... />
</LinearLayout>
// Other assets such as image or media view, call to action, etc follow.
...
</LinearLayout>
</com.google.android.gms.ads.formats.UnifiedNativeAdView>
En este ejemplo de código se crea una clase UnifiedNativeAdView
y se rellena con el formato UnifiedNativeAd
:
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "<your ad unit ID>") .forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() { @Override public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) { // Assumes you have a placeholder FrameLayout in your View layout // (with id fl_adplaceholder) where the ad is to be placed. FrameLayout frameLayout = findViewById(R.id.fl_adplaceholder); // Assumes that your ad layout is in a file call ad_unified.xml // in the res/layout folder UnifiedNativeAdView adView = (UnifiedNativeAdView) getLayoutInflater() .inflate(R.layout.ad_unified, null); // This method sets the text, images and the native ad, etc into the ad // view. populateUnifiedNativeAdView(unifiedNativeAd, adView); frameLayout.removeAllViews(); frameLayout.addView(adView); } });
Kotlin
val builder = AdLoader.Builder(this, "<your ad unit ID>") .forUnifiedNativeAd { unifiedNativeAd -> // Assumes that your ad layout is in a file call ad_unified.xml // in the res/layout folder val adView = layoutInflater .inflate(R.layout.ad_unified, null) as UnifiedNativeAdView // This method sets the text, images and the native ad, etc into the ad // view. populateUnifiedNativeAdView(unifiedNativeAd, adView) // Assumes you have a placeholder FrameLayout in your View layout // (with id ad_frame) where the ad is to be placed. ad_frame.removeAllViews() ad_frame.addView(adView) }
Las clases de vista de anuncio también ofrecen métodos para registrar la vista usada con cada uno de los recursos y para registrar el propio objeto NativeAd
.
Al registrar las vistas de esta forma, el SDK puede gestionar automáticamente tareas como las siguientes:
- Registrar clics.
- Registrar impresiones (cuando se ve el primer píxel en la pantalla).
- Mostrar la superposición de Gestión de anuncios
Superposición de Gestión de anuncios
El SDK añade una superposición de Gestión de anuncios a cada vista de anuncio. Deja espacio en la esquina que prefieras para incluir el logotipo de Gestión de anuncios, que se inserta automáticamente. También es importante que la superposición de Gestión de anuncios se vea fácilmente, por lo que te recomendamos que elijas las imágenes y los colores de fondo más adecuados. Para obtener más información sobre el diseño y la función de esta superposición, consulta las descripciones de los campos de los anuncios nativos avanzados.
Indicación de anuncio
Debes mostrar una indicación de anuncio para dejar claro que se trata de publicidad. Puedes consultar más información en nuestra guía sobre políticas.
Ejemplo de código
Sigue estos pasos para mostrar un anuncio nativo unificado:
- Crea una instancia de la clase
UnifiedNativeAdView
. - Con cada recurso de anuncio que se vaya a mostrar:
- Rellena la vista de recurso con el del objeto de anuncio.
- Registra la vista de recurso con la clase
ViewGroup
.
- Registra
MediaView
si el diseño de tu anuncio nativo incluye un recurso multimedia de gran tamaño. - Registra el objeto de anuncio con la clase
ViewGroup
.
Esta es una función de ejemplo en la que se muestra una clase UnifiedNativeAd
:
Java
private void displayUnifiedNativeAd(ViewGroup parent, UnifiedNativeAd ad) { // Inflate a layout and add it to the parent ViewGroup. LayoutInflater inflater = (LayoutInflater) parent.getContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); UnifiedNativeAdView adView = (UnifiedNativeAdView) inflater .inflate(R.layout.my_ad_layout, parent); // Locate the view that will hold the headline, set its text, and call the // UnifiedNativeAdView's setHeadlineView method to register it. TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline); headlineView.setText(ad.getHeadline()); adView.setHeadlineView(headlineView); ... // Repeat the above process for the other assets in the UnifiedNativeAd // using additional view objects (Buttons, ImageViews, etc). ... // If the app is using a MediaView, it should be // instantiated and passed to setMediaView. This view is a little different // in that the asset is populated automatically, so there's one less step. MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media); adView.setMediaView(mediaView); // Call the UnifiedNativeAdView's setNativeAd method to register the // NativeAdObject. adView.setNativeAd(ad); // Ensure that the parent view doesn't already contain an ad view. parent.removeAllViews(); // Place the AdView into the parent. parent.addView(adView); }
Kotlin
fun displayUnifiedNativeAd(parent: ViewGroup, ad: UnifiedNativeAd) { // Inflate a layout and add it to the parent ViewGroup. val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater val adView = inflater.inflate(R.layout.my_ad_layout, parent) as UnifiedNativeAdView // Locate the view that will hold the headline, set its text, and use the // UnifiedNativeAdView's headlineView property to register it. val headlineView = adView.findViewById<TextView>(R.id.ad_headline) headlineView.text = ad.headline adView.headlineView = headlineView ... // Repeat the above process for the other assets in the UnifiedNativeAd using // additional view objects (Buttons, ImageViews, etc). ... val mediaView = adView.findViewById<MediaView>(R.id.ad_media) adView.mediaView = mediaView // Call the UnifiedNativeAdView's setNativeAd method to register the // NativeAdObject. adView.setNativeAd(ad) // Ensure that the parent view doesn't already contain an ad view. parent.removeAllViews() // Place the AdView into the parent. parent.addView(adView) }
Echemos un vistazo a las tareas individuales:
Inflar el diseño
Java
LayoutInflater inflater = (LayoutInflater) parent.getContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); UnifiedNativeAdView adView = (UnifiedNativeAdView) inflater .inflate(R.layout.my_ad_layout, parent);
Kotlin
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater val adView = inflater.inflate(R.layout.my_ad_layout, parent) as UnifiedNativeAdView
En este ejemplo, vamos a inflar un diseño XML que incluye vistas para mostrar un anuncio nativo unificado y, después, localizaremos una referencia a la clase UnifiedNativeAdView
. También puedes reutilizar un UnifiedNativeAdView
si ya hay alguno en tu fragmento o actividad, o incluso crear una instancia de forma dinámica sin utilizar un archivo de diseño.
Rellenar y registrar las vistas de recursos
En este código de ejemplo, se localiza la vista utilizada para mostrar el título, se define su texto usando el recurso de cadena proporcionado por el objeto de anuncio y, por último, se registra con el objeto UnifiedNativeAdView
:
Java
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline); headlineView.setText(ad.getHeadline()); adView.setHeadlineView(headlineView);
Kotlin
val headlineView = adView.findViewById<TextView>(R.id.ad_headline) headlineView.text = ad.headline adView.headlineView = headlineView
Este proceso de localizar la vista, especificar su valor y registrarlo con la clase de vista de anuncio se debe repetir con cada uno de los recursos proporcionados por el objeto de anuncio nativo que vaya a mostrar la aplicación.
Gestión de clics
El SDK gestiona los clics en recursos de vista de anuncio siempre que rellenes y registres las vistas de recurso correctamente, tal como se explica en la sección anterior.
A continuación se muestra un ejemplo en el que se usa un procesador de anuncios para controlar eventos de clic:
Java
AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110") ... .withAdListener(new AdListener() { @Override public void onAdFailedToLoad(int errorCode) { // Handle the failure by logging, altering the UI, and so on. } @Override public void onAdClicked() { // Log the click event or other custom behavior. } }) .build();
Kotlin
val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110") ... .withAdListener(object : AdListener() { override fun onAdFailedToLoad(errorCode: Int) { // Handle the failure by logging, altering the UI, and so on. } }) .build()
Registrar el recurso MediaView
El recurso MediaView
es un caso especial de View
que se ha diseñado para mostrar el recurso multimedia principal, ya sea de vídeo o de imagen.
MediaView
puede definirse en un diseño XML o construirse dinámicamente. Debe colocarse dentro de la jerarquía de vistas de un elemento NativeAdView
, como cualquier otra vista de recurso.
Las aplicaciones que usan un recurso MediaView
deben registrarlo con NativeAdView
de esta forma:
Java
MediaView mediaView = adView.findViewById(R.id.ad_media); adView.setMediaView(mediaView);
Kotlin
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
Debes rellenar el contenido de la vista multimedia, al igual que el de las demás vistas de recurso.
Para ello, usa la propiedad mediaContent
. La propiedad mediaContent
de UnifiedNativeAd
incluye contenido multimedia que se puede transferir a MediaView
.
A continuación, puedes ver un fragmento de código que muestra cómo hacerlo:
Java
mediaView.setMediaContent(nativeAd.getMediaContent());
Kotlin
mediaView.mediaContent = nativeAd.mediaContent
Configurar la vista ImageScaleType
La clase MediaView
tiene una propiedad ImageScaleType
cuando se muestran imágenes.
Si quieres cambiar la forma en que se escala una imagen en la vista MediaView
, configura el elemento ImageView.ScaleType
correspondiente mediante el método setImageScaleType()
de MediaView
.
Por ejemplo, para rellenar la clase MediaView
cuando se muestra una imagen (siempre que el anuncio no incluya un vídeo):
Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
Ejemplo de GitHub
Nuestro repositorio de GitHub incluye implementaciones completas de anuncios nativos avanzados programados en Java y Kotlin.
Descargar ejemplo de anuncio nativo avanzadoMediaContent
La clase MediaContent
contiene los datos relacionados con el contenido multimedia del anuncio nativo, que se muestra mediante la clase MediaView
. Cuando se configura la propiedad MediaView
de mediaContent
con una instancia de MediaContent
, sucede lo siguiente:
- Si hay un recurso de vídeo disponible, se carga en el búfer y empieza a reproducirse dentro de la vista
MediaView
. EnhasVideoContent()
puedes comprobar si un recurso de vídeo está disponible. - Si el anuncio no tiene ningún recurso de vídeo, se descarga el recurso
mainImage
y se coloca dentro deMediaView
.
Registrar el objeto de anuncio nativo
Con este último paso se registra el objeto de anuncio nativo con la vista responsable de mostrarlo:
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
Vídeo nativo
Además de imágenes, texto y cifras, algunos anuncios nativos contienen recursos de vídeo. Sin embargo, no todos los anuncios los tienen y las aplicaciones no tienen por qué mostrarlos.
Para simplificar la configuración y visualización del vídeo, el SDK de anuncios para móviles ofrece las siguientes clases relacionadas con este tipo de contenido:
VideoOptions
La clase VideoOptions
permite que las aplicaciones configuren en comportamiento de los recursos de vídeo nativos.
Los objetos VideoOptions
deben asignarse a un objeto NativeAdOptions
que se utiliza al construir el AdLoader
:
Java
VideoOptions videoOptions = new VideoOptions.Builder() .setStartMuted(false) .build(); NativeAdOptions adOptions = new NativeAdOptions.Builder() .setVideoOptions(videoOptions) .build(); AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110") .forUnifiedNativeAd( ... ) .withNativeAdOptions(adOptions) .build();
Kotlin
val videoOptions = VideoOptions.Builder() .setStartMuted(false) .build() val adOptions = NativeAdOptions.Builder() .setVideoOptions(videoOptions) .build() val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110") .forUnifiedNativeAd( ... ) .withNativeAdOptions(adOptions) .build()
La clase VideoOptions.Builder
ofrece un método, setStartMuted()
, que indica al SDK si los recursos de vídeo deben comenzar silenciados o no.
El valor predeterminado es true
.
VideoController
La clase VideoController
se utiliza para obtener información acerca de los recursos de vídeo.
Las aplicaciones pueden enviar referencias al controlador desde un objeto UnifiedNativeAd
mediante una llamada al método getVideoController()
:
Java
VideoController vc = nativeAd.getVideoController();
Kotlin
val vc = myNativeAd.videoController
Este método siempre devuelve un objeto VideoController
, aunque el anuncio no incluya ningún recurso de vídeo.
VideoController
ofrece el método hasVideoContent()
, que devuelve el valor "true" si el anuncio tiene un recurso de vídeo. En caso contrario, devuelve el valor "false".
Las aplicaciones también pueden usar la clase VideoController.VideoLifecycleCallbacks
para recibir notificaciones cuando se produzcan eventos en el ciclo de vida de los recursos de vídeo:
Java
VideoController vc = nativeAd.getVideoController(); vc.setVideoLifecycleCallbacks(new VideoController.VideoLifecycleCallbacks() { public void onVideoEnd() { // Here apps can take action knowing video playback is finished. // It's always a good idea to wait for playback to complete before // replacing or refreshing a native ad, for example. super.onVideoEnd(); } });
Kotlin
val vc = nativeAd.videoController vc.setVideoLifecycleCallbacks(object : VideoController.VideoLifecycleCallbacks() { override fun onVideoEnd() { // Here apps can take action knowing video playback is finished. // It's always a good idea to wait for playback to complete before // replacing or refreshing a native ad, for example. super.onVideoEnd() } })
Destruir un anuncio
Cuando termines de mostrar un anuncio nativo, debes destruirlo de forma adecuada.
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()