Anuncios nativos avanzados

Mostrar anuncios nativos unificados

Cuando se carga un anuncio nativo, el SDK invoca el agente de escucha del formato de anuncio correspondiente. Tu aplicación se encarga de mostrar el anuncio, aunque no es necesario que lo haga de inmediato. Para que sea más fácil mostrar formatos de anuncios definidos por el sistema, el SDK ofrece algunos recursos útiles, tal como se indica a continuación.

Nota: Consulta las políticas y directrices sobre los anuncios nativos para obtener más información sobre cómo renderizar este tipo de anuncios.

Clase UnifiedNativeAdView

El formato UnifiedNativeAd tiene la clase UnifiedNativeAdView, que es un objeto ViewGroup que los editores deben usar como raíz de UnifiedNativeAd. Una sola clase UnifiedNativeAdView se corresponde con un único anuncio nativo unificado. Cada una de las vistas utilizadas para mostrar los recursos del anuncio (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 que utiliza un LinearLayout para mostrar las vistas de recursos de un anuncio nativo unificado 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>

Aquí hay un fragmento de código de ejemplo para crear un UnifiedNativeAdView y rellenarlo con un 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 UnifiedNativeAdView. Si se renderizan fuera del diseño de vista de un anuncio nativo, 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 para cada recurso individual 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 nativo. Reserva espacio en la esquina que prefieras de esta vista para incluir el logotipo de dicho producto, 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 la superposición, consulta el artículo Descripciones de los campos en anuncios nativos.

Indicación de anuncio

Debes mostrar una indicación de anuncio para dejar claro que se trata de publicidad. Consulta esta página para ver las directrices de la política.

Ejemplo de código

Sigue estos pasos para mostrar un anuncio nativo unificado:

1. Crea una instancia de la clase UnifiedNativeAdView.
2. En cada recurso de anuncio que se vaya a mostrar:
   1. Rellena la vista de recurso con el recurso 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 del anuncio con la clase ViewGroup.

Esta es una función de ejemplo en la que se muestra un 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).
    ...

    // If the app is using a MediaView, it should be instantiated and assigned
    // to the mediaView property. This view is a little different in that the asset
    // is populated automatically, so there's one less step.
    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 UnifiedNativeAdView. También puedes reutilizar un objeto 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 sobre la vista de anuncios nativos ni dentro de ella. Para controlar los eventos de clic, utiliza el listener de anuncios. El SDK gestiona los clics en los recursos de la vista de anuncios siempre que rellenes y registres las vistas de recursos correctamente.

Este es un ejemplo de fragmento en el que se usa un agente de escucha de anuncios para controlar los eventos de clic:

Java

.withAdListener(new AdListener() {
    @Override onAdClicked() {
      // Log the click event or other custom behavior.
    }
})

Kotlin

.withAdListener(object : AdListener() {
    override fun onAdClicked() {
      // Log the click event or other custom behavior.
    }
})

Registrar el recurso MediaView

Importante: Si quieres incluir un recurso de imagen principal en el diseño de tu 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. Se comporta de las siguientes formas:

• Si el anuncio cargado tiene un recurso de vídeo, el vídeo se carga en búfer y empieza a reproducirse dentro de MediaView.
• Si el anuncio cargado no tiene un recurso de vídeo, se descarga el primer recurso de imagen y se coloca dentro de MediaView.

MediaView se puede definir en un diseño XML o construirse dinámicamente. Debe colocarse dentro de la jerarquía de vistas de un NativeAdView, como cualquier otra vista de recurso. Las aplicaciones que usan un MediaView no tienen que rellenarlo con un recurso, pero es necesario registrarlo con NativeAdView de esta forma:

Java

MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);

Kotlin

adView.mediaView = adView.findViewById(R.id.ad_media)

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 números, algunos anuncios nativos contienen recursos de vídeo, aunque no son obligatorios 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 el vídeo:

VideoOptions

La clase VideoOptions permite a las aplicaciones configurar el 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()

En la actualidad, la clase VideoOptions.Builder ofrece el 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 sobre los recursos de vídeo. Las aplicaciones pueden mostrar referencias al controlador desde UnifiedNativeAd mediante una llamada al método getVideoController():

Java

VideoController vc = myNativeAd.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 estos métodos para consultar el estado del vídeo:

• hasVideoContent(): devuelve "true" si el anuncio tiene un recurso de vídeo y "false" si no lo tiene.
• getAspectRatio(): devuelve la proporción del vídeo (ancho/alto), o cero si no hay ningún recurso de vídeo.

Las aplicaciones también pueden usar la clase VideoController.VideoLifecycleCallbacks para recibir notificaciones cuando se producen eventos en el ciclo de vida de un recurso 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 tu anuncio nativo, debes destruirlo de forma adecuada.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()