Nativo

Los anuncios nativos son un tipo de anuncio que puede ser mostrado con el mismo estilo visual del resto de la app, lo que permite una integración natural y no-intrusiva con la interfaz de usuario.

A diferencia del resto de formatos, la app proporciona el layout y el SDK lo rellena con los recursos del anuncio, sea cual sea la fuente de demanda que lo haya servido.

Layout del anuncio

El primer paso es crear el layout que se utilizará para mostrar los anuncios. Es un fichero de layout normal, donde cada vista que mostrará un recurso del anuncio necesita un identificador:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/ad_headline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <FrameLayout
        android:id="@+id/ad_media"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="120dp" />

    <Button
        android:id="@+id/ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Precaución

La vista que muestra el contenido multimedia debe medir al menos 120x120dp. Los tamaños inferiores impiden que el anuncio opte a la demanda de vídeo, lo que reduce los ingresos del ad unit.

Una vez preparado el layout, una instancia de NativeAdViewBinder lo conecta con el SDK. Solo el layoutId es obligatorio, por lo que se pueden enlazar únicamente los recursos que muestre el layout:

Kotlin

val binder = NativeAdViewBinder.Builder(R.layout.native_ad)
    .setAdvertiserTextViewId(R.id.ad_advertiser)
    .setBodyTextViewId(R.id.ad_body)
    .setCallToActionButtonId(R.id.ad_call_to_action)
    .setHeadlineTextViewId(R.id.ad_headline)
    .setIconImageViewId(R.id.ad_app_icon)
    .setMediaContentViewId(R.id.ad_media)
    .setPriceTextViewId(R.id.ad_price)
    .setRatingContentViewId(R.id.ad_rating)
    .setStoreTextViewId(R.id.ad_store)
    .build()

Java

NativeAdViewBinder binder = new NativeAdViewBinder.Builder(R.layout.native_ad)
    .setAdvertiserTextViewId(R.id.ad_advertiser)
    .setBodyTextViewId(R.id.ad_body)
    .setCallToActionButtonId(R.id.ad_call_to_action)
    .setHeadlineTextViewId(R.id.ad_headline)
    .setIconImageViewId(R.id.ad_app_icon)
    .setMediaContentViewId(R.id.ad_media)
    .setPriceTextViewId(R.id.ad_price)
    .setRatingContentViewId(R.id.ad_rating)
    .setStoreTextViewId(R.id.ad_store)
    .build();

El builder acepta los siguientes recursos:

Método	Obligatorio	Descripción
setAdChoicesContentViewId(int)	No	Contenedor para el icono de AdChoices
setAdvertiserTextViewId(int)	No	Nombre del anunciante
setBodyTextViewId(int)	No	Descripción del anuncio
setCallToActionButtonId(int)	No	Botón que invita al usuario a interactuar con el anuncio
setHeadlineTextViewId(int)	No	Titular del anuncio
setIconImageViewId(int)	No	Icono del anuncio
setMediaContentViewId(int)	No	Contenedor para el contenido multimedia (imagen o vídeo)
setOptionsContentViewId(int)	No	Contenedor para la vista de opciones del anuncio
setPriceTextViewId(int)	No	Precio del producto promocionado
setRatingContentViewId(int)	No	Contenedor para la valoración del producto promocionado
setStoreTextViewId(int)	No	Tienda del producto promocionado

Integración

Para solicitar un anuncio nativo, es necesario realizar una integración por código tal y como se muestra en el ejemplo a continuación:

Kotlin

class MainActivity : Activity() {

    private var nativeAd: NativeAd? = null

    private var nativeAdLoader: NativeAdLoader? = null

    // El binder creado en la sección anterior
    private val binder = NativeAdViewBinder.Builder(R.layout.native_ad)
        .setCallToActionButtonId(R.id.ad_call_to_action)
        .setHeadlineTextViewId(R.id.ad_headline)
        .setMediaContentViewId(R.id.ad_media)
        .build()

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        nativeAdLoader = NativeAdLoader(
                         this, "Ad Unit ID de Wortise", nativeListener).also {
            it.loadAd()
        }
    }

    override fun onDestroy() {
        ...
        nativeAd?.destroy()
        nativeAdLoader?.destroy()
    }

    private val nativeListener = object : NativeAdLoader.Listener {

        override fun onNativeClicked(ad: NativeAd) {
            // Invocado cuando el anuncio ha sido clicado
        }

        override fun onNativeFailedToLoad(error: AdError) {
            // Invocado cuando el anuncio no ha podido cargarse
            // (por un error o por falta de inventario)
        }

        override fun onNativeImpression(ad: NativeAd) {
            // Invocado cuando el anuncio ha generado una impresión
        }

        override fun onNativeLoaded(ad: NativeAd) {
            // Invocado cuando el anuncio ha sido cargado
            nativeAd?.destroy()
            nativeAd = ad

            val adView = NativeAdView(this@MainActivity, binder)

            // Por ejemplo, añadimos el NativeAdView a un FrameLayout
            val frameLayout = findViewById<FrameLayout>(R.id.frame)
            frameLayout.removeAllViews()
            frameLayout.addView(adView)

            nativeAdLoader?.renderAd(adView, ad)
        }

        override fun onNativeRevenuePaid(ad: NativeAd, data: RevenueData) {
            // Invocado cuando el anuncio ha generado ingresos
        }
    }
}

Java

public class MainActivity extends Activity {

    private NativeAd mNativeAd;

    private NativeAdLoader mNativeAdLoader;

    // El binder creado en la sección anterior
    private final NativeAdViewBinder binder =
            new NativeAdViewBinder.Builder(R.layout.native_ad)
                    .setCallToActionButtonId(R.id.ad_call_to_action)
                    .setHeadlineTextViewId(R.id.ad_headline)
                    .setMediaContentViewId(R.id.ad_media)
                    .build();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        ...
        mNativeAdLoader = new NativeAdLoader(
                this, "Ad Unit ID de Wortise", mNativeListener);
        mNativeAdLoader.loadAd();
    }

    @Override
    public void onDestroy() {
        ...
        if (mNativeAd != null) {
            mNativeAd.destroy();
        }

        mNativeAdLoader.destroy();
    }

    private final NativeAdLoader.Listener mNativeListener =
            new NativeAdLoader.Listener() {

        @Override
        public void onNativeClicked(@NonNull NativeAd ad) {
            // Invocado cuando el anuncio ha sido clicado
        }

        @Override
        public void onNativeFailedToLoad(@NonNull AdError error) {
            // Invocado cuando el anuncio no ha podido cargarse
            // (por un error o por falta de inventario)
        }

        @Override
        public void onNativeImpression(@NonNull NativeAd ad) {
            // Invocado cuando el anuncio ha generado una impresión
        }

        @Override
        public void onNativeLoaded(@NonNull NativeAd ad) {
            // Invocado cuando el anuncio ha sido cargado
            if (mNativeAd != null) {
                mNativeAd.destroy();
            }

            mNativeAd = ad;

            NativeAdView adView = new NativeAdView(MainActivity.this, binder);

            // Por ejemplo, añadimos el NativeAdView a un FrameLayout
            FrameLayout frameLayout = findViewById(R.id.frame);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);

            mNativeAdLoader.renderAd(adView, ad);
        }

        @Override
        public void onNativeRevenuePaid(@NonNull NativeAd ad,
                                        @NonNull RevenueData data) {
            // Invocado cuando el anuncio ha generado ingresos
        }
    };
}

El método renderAd rellena las vistas del layout con los recursos del anuncio y las registra para poder trackear los clicks y las impresiones. Devuelve false cuando el anuncio no ha podido mostrarse.

Precaución

Tanto el anuncio como el loader deben destruirse cuando ya no se necesiten, tal y como se muestra en el ejemplo anterior. Se puede reutilizar un NativeAdView para un nuevo anuncio: basta con volver a llamar a renderAd con el nuevo anuncio.

Recursos del anuncio

La clase NativeAd expone los recursos del anuncio, que se pueden utilizar para personalizar el layout antes de mostrarlo:

Propiedad	Tipo	Descripción
advertiser	String?	Nombre del anunciante
body	String?	Descripción del anuncio
callToAction	String?	Texto de la llamada a la acción
headline	String?	Titular del anuncio
icon	Image?	Icono del anuncio
images	List<Image>	Imágenes del anuncio
mediaContent	MediaContent?	Contenido multimedia del anuncio (imagen o vídeo)
price	String?	Precio del producto promocionado
rating	Double?	Valoración del producto promocionado
store	String?	Tienda del producto promocionado

Parámetros de la petición

El método loadAd también acepta una instancia de RequestParameters, igual que el resto de formatos:

Kotlin

nativeAdLoader?.loadAd(RequestParameters(agent = "your agent"))

Java

RequestParameters parameters = new RequestParameters();
parameters.setAgent("your agent");

mNativeAdLoader.loadAd(parameters);

Migración desde GoogleNativeAd

Si la app ya integraba la clase obsoleta GoogleNativeAd, estas son las equivalencias con la nueva integración:

Obsoleto	Sustituto
GoogleNativeAd(context, adUnitId, listener)	NativeAdLoader(context, adUnitId, listener)
GoogleNativeAd.Listener	NativeAdLoader.Listener
load()	loadAd() (o loadAd(parameters))
onNativeLoaded(ad, nativeAd)	onNativeLoaded(ad) — un NativeAd, sin tipos de Google
onNativeFailedToLoad(ad, error)	onNativeFailedToLoad(error)
withNativeAdOptions(options)	eliminado — el SDK configura la petición
Tu propio NativeAdView de Google y sus recursos	NativeAdViewBinder + NativeAdView + renderAd

En la práctica, los cambios son:

1. Eliminar los tipos de Google. Ya no se recibe ningún com.google.android.gms.ads.nativead.NativeAd en los callbacks, por lo que la app deja de importar las clases de Google Mobile Ads para los anuncios nativos.
2. Describir el layout una sola vez. En lugar de buscar cada vista y asignarla al NativeAdView de Google, se declaran los identificadores en un NativeAdViewBinder tal y como se explica en la sección Layout del anuncio.
3. Mostrar el anuncio a través del loader. Donde la app configuraba el NativeAdView de Google y le asignaba el anuncio, ahora se crea un NativeAdView con el binder y se llama a renderAd.

Antes

Kotlin

override fun onNativeLoaded(ad: GoogleNativeAd, nativeAd: NativeAd) {
    val adView = // tu NativeAdView de Google

    adView.headlineView     = adView.findViewById(R.id.ad_headline)
    adView.callToActionView = adView.findViewById(R.id.ad_call_to_action)
    adView.mediaView        = adView.findViewById(R.id.ad_media)
    // ... una línea por recurso ...

    adView.setNativeAd(nativeAd)
}

Después

Kotlin

override fun onNativeLoaded(ad: NativeAd) {
    val adView = NativeAdView(context, binder)

    nativeAdLoader?.renderAd(adView, ad)
}

Integración antigua

Precaución

La clase GoogleNativeAd está obsoleta desde la versión 1.8.0. Sigue disponible para las apps que ya la integraron, pero solo soporta la demanda de Google y se eliminará en una versión futura. Las nuevas integraciones deben utilizar la clase NativeAdLoader descrita anteriormente.

Las apps que sigan utilizando GoogleNativeAd reciben la instancia de NativeAd de Google en el callback onNativeLoaded, y son las responsables de construir el NativeAdView y de registrar cada recurso, tal y como se describe en la documentación de Google.