Anuncios nativos avanzados

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.

Importante: Consulta nuestra guía sobre los anuncios nativos para obtener más información acerca de este tipo de anuncios. Lee también las políticas y directrices de los anuncios nativospara descubrir cómo se renderizan estos anuncios.

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)
        }
    

Importante: Todos los recursos de un anuncio nativo concreto se deben renderizar dentro del diseño de la clase UnifiedNativeAdView. Si se renderizan fuera, el SDK de anuncios de Google para móviles intentará registrar una advertencia.

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:

1. Crea una instancia de la clase UnifiedNativeAdView.
2. Con cada recurso de anuncio que se vaya a mostrar:
   1. Rellena la vista de recurso con el del objeto de anuncio.
   2. Registra la vista de recurso con la clase ViewGroup.
3. Registra MediaView si el diseño de tu anuncio nativo incluye un recurso multimedia de gran tamaño.
4. 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

Importante: No implementes ningún controlador de clics personalizado en ninguna vista, ya sea sobre la vista de anuncios nativos o dentro de ella. Para controlar eventos de clic, utiliza el procesador de anuncios.

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

Importante: Si quieres incluir un recurso de imagen principal en el diseño de un anuncio nativo, tienes que usar el recurso MediaView en lugar de ImageView.

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 avanzado

MediaContent

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. En hasVideoContent() 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 de MediaView.

Nota: mainImage es el recurso de imagen que se descarga primero de manera predeterminada. Si se usa setReturnUrlsForImageAssets(true), el valor de mainImage será null y tendrás que asignar la propiedad mainImage a la imagen descargada manualmente. Recuerda que esta imagen solo se usará cuando no haya recursos de vídeo disponibles.

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()