Admob Para Android: Añadir Anuncios A Una App Móvil

AdMob es un servicio de Google para integrar anuncios en tus aplicaciones Android, con el fin de monetizar la actividad de tu audiencia a través de redes de publicidad (ad networks).

Aunque aún existe un SDK de Google Mobile Ads, AdMob ahora hace parte de los productos integrados de Firebase.

Esto facilita la observación del comportamiento de los usuarios vs. las ganancias obtenidas con el servicio de Firebase Analytics. Brindando a los Android Developers una forma para ganar dinero.

Descargar Proyecto Android Studio De Top Forex Brokers

Para estudiar las características de AdMob en Android crearemos una app cuyo resultado final es este:

Si deseas desbloquear el código de descarga para el código, sigue estas instrucciones:

[sociallocker id=»7121″][/sociallocker]

Top Forex Brokers App

Este tutorial de AdMob tendrá como base una aplicación de ejemplo llamada Top Forex Brokers. Su principal característica es mostrar a los usuarios una lista de los mejores brokers en español para abrir una cuenta demo y comercializar en el mercado Forex.

Debido a que es una app informativa, su complejidad es básica y te ayudará a experimentar con anuncios sin problemas. Esta consta de una screen para la lista de brokers y un detalle hipotético.

El anterior wireframe muestra tres casos a tratar:

La incorporación de un banner en la parte inferior de la lista
La aparición de un anuncio intersticial al clickear un broker, seguido de la aparición del detalle si el usuario cierra el bloque.
El uso de anuncios nativos como ítems de la lista.

Integrar Anuncios En Tu Android App

Para comenzar a conectar con las plataformas de advertising debes seguir esta receta:

Crear y configurar un proyecto en Android Studio
Incluir Google Play Services
Agregar Firebase al proyecto
Añadir dependencias gradle y actualizar el manifesto
Crear ID de anuncio en AdMob
Insertar anuncio con el Mobile Ads SDK

Así pues con el fin de no perder tiempo comencemos de una vez…

Crear Nuevo Proyecto

1. Abre Android Studio y selecciona File > New > New Project… si te encuentras en un proyecto actual. O clickea Start a new Android Studio project… si estás en el asistente de proyectos.

2. El nombre de proyecto que asignarás al proyecto es «Top Forex Brokers». Usa el nombre de dominio que más te convenga al igual que la ubicación en el disco deseada.

3. Selecciona como dispositivos objetivo Phone and Tablet. La versión mínima del SDK puedes dejarla por defecto en 13.

4. Agrega una actividad inicial para el proyecto del tipo Basic Activity.

5. Nombra a tu actividad como «BrokersActivity», deja los demás nombres de forma predeterminada y confirma la creación del proyecto con Finish.

Descargar Google Play Services

En segundo lugar descarga los paquetes de Google Play Services con el propósito de soportar las librerías de Firebase para AdMob. Aunque no te mostraré como hacerlo aquí, te dejo este enlace para integrar Google Play Services en Android Studio.

Integrar Firebase En Android Studio

Al igual que hicimos con Firebase Cloud Messaging, debes crear un proyecto en la consola de desarrolladores y añadir la configuración a la app cliente.

¿Cómo hacerlo?

Sigue los pasos…

Crear proyecto en Firebase

Ve a console.firebase.google.com y selecciona CREAR NUEVO PROYECTO.

Nombra al proyecto al igual que la app Android y selecciona tu país de residencia:

Configura Firebase para Android

Selecciona la opción Añade Firebase a tu aplicación de Android.

Introducir nombre de paquete y firma SHA-1

Vincular Firebase requiere el nombre del paquete definido al crear el proyecto en Android Studio. En mi caso es com.hermosaprogramacion.topforexbrokers. Busca el tuyo y ponlo.

Por otro lado la firma SHA-1 se obtiene con el siguiente comando en tu consola local:

keytool -exportcert -list -v -alias <nombre-de-key> -keystore <ruta-de-keystore>

Solo reemplaza las expresiones por el alias de la key y la ruta del store si es que ya has firmado tu app. Ten a mano la clave para para confirmar.

Otro punto es que si solo deseas probar Admob en modo debug, entonces usa la firma para debug con los siguientes datos:

keytool -exportcert -list -v -alias androiddebugkey -keystore "C:UsersTUUSUARIO.androiddebug.keystore"

Cuando la consola te pida el password, escribe android. En seguida tendrás un resultado similar a este:

Huellas digitales del Certificado:
SHA1: 7A:33:08:75:0E:AD:20:67:45:6D:06:28:DE:6F:C3:C1:33:99:D3:68

Ahora completa el formulario:

google-services.json

A continuación la consola generará un archivo llamado google.services.json el cual contiene datos de configuración para el servicio web de Firebase. Descárgalo en tu escritorio para tenerlo a la mano.

Mover archivo de configuración

Lo siguiente es copiar y pegar el archivo a la carpeta raíz del módulo principal app. Para hacerlo directamente en Android Studio, cambia a la vista de Proyecto y pégalo.

Archivo build.gradle a nivel de proyecto

Siguiendo con la configuración, abre el archivo de configuración gradle a nivel de proyecto y agrega la siguiente línea:

...
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.1.2'
        classpath 'com.google.gms:google-services:3.0.0'
    }
}
...

Con esto el sistema de construcción sabrá que se hará uso de Google Services.

Archivo build.gradle a nivel de módulo

Ahora abre el archivo gradle para el módulo principal ubicado en app/build.gradle y pega las siguientes líneas:

dependencies {
    ...

    compile 'com.google.firebase:firebase-ads:9.0.0'
}

apply plugin: 'com.google.gms.google-services'

Nota que la primera línea incluye la librería para incluir las funcionalidades del SDK de Admob, en cuanto a la segunda pone en funcionamiento librerías básicas y debe ir en la parte inferior del archivo.

Sincronizar proyecto

Finalmente sincroniza las nuevas dependencias con el botón amarillo que dice Sync Now en la parte superior derecha.

Enlazar AdMob Con Firebase

El siguiente paso es integrar tu cuenta en AdMob con el proyecto de Firebase con el fin de relacionar el ID de aplicación y los ids de bloques de anuncios a la aplicación Android cliente.

Iniciar sesión en AdMob

Ve al sitio apps.admob.com e inicia sesión si tienes cuenta creada, si no, lee la guía Registrarse para obtener una cuenta de AdMob.

Añadir la aplicación a AdMob

Ve a la pestaña Monetizar y presiona Añadir la aplicación manualmente. Luego nómbrala como «Top Forex Brokers» como lo hiciste en Firebase. Por otro lado, si tienes una aplicación en Google Play diferente que quieras referenciar, entonces selecciona Buscar tu aplicación.

Adicionalmente cambia el valor de Plataforma por Android y confirma el enlace con Añadir Aplicación.

Añadir bloque de anuncio

A continuación el asistente te mostrará tu ID de aplicación, cuya sintaxis es ca-app-pub-XXXXXXXXXXXXXXXX~NNNNNNNNNN para cada usuario.

Por debajo te pedirá que crees un bloque de anuncio según sea el tipo que desees:

Banner
Intersticial
Intersticial recompensado
Nativo

No obstante, veremos más de ellos en los siguientes apartados, así que por el momento selecciona una unidad tipo Banner, nómbralo «Banner Inferior» y confirma con Guardar.

Vincular Firebase Analytics con AdMob

En seguida podrás ver el ID del bloque de anuncios, el cual será la referencia cuando lo agreguemos en la aplicación móvil.

Prosiguiendo con el asistente, haz click en Enlazar a Firebase para autorizar la alimentación de estadísticas en el servicio. Ya sabes que esto es tremendo porque podrás vigilar las métricas de interacción de tus usuarios con respecto al contenido, flujo y perfilamiento de tu app.

Conecta datos de AdMob con Proyecto Firebase

Escribe el nombre del paquete que usamos en el proyecto de Firebase y luego presiona Continuar.

Debido a que el proyecto en Firebase ya existe, es posible seleccionarlo en la primera opción, así que presiona Continuar.

Si todo salió bien tendrás un mensaje de éxito y confirmas con Listo.

Con esto ya tienes enlazado AdMob con Firebase y un anuncio nuevo con su respectivo ID.

Añadir ID del bloque de anuncio a strings.xml

Abre tu archivo res/values/strings.xml y agrega en un nuevo recurso <string> el valor del anuncio que acabamos de crear.

<resources>
    <string name="app_name">Top Forex Brokers</string>
    <string name="action_settings">Settings</string>
    
    <string name="banner_inferior_ad_unit_id">ca-app-pub-XXXXXXXXXXXXXXXX/NNNNNNNNNN</string>
</resources>

Por lo general una app tiene varias unidades de publicidad a lo largo de sus actividades, por lo que el recurso string te ayuda a simplificar la modificación de forma externa si lo requieres.

No hagas clicks en tus propios anuncios, esto viola las políticas de AdMob y pueden cerrarte la cuenta.

Mostrar AdView En La Actividad

En primer lugar, AdView es la clase que representa los banners de publicidad en el SDK de AdMob. Así que abre el layout de BrokersActivity ubicado en res/layout/content_brokers.xml y agrega el siguiente componente:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.hermosaprogramacion.topforexbrokers.BrokersActivity"
    tools:showIn="@layout/activity_brokers">

    <com.google.android.gms.ads.AdView
        android:id="@+id/av_bottom_banner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_inferior_ad_unit_id" />

</RelativeLayout>

Como resultado verás la siguiente Preview:

Con respecto al código del banner, verás que se agrega un namespace ads al RelativeLayout para posibilitar la inclusión de los atributos ads:adUnitId y ads:adSize. Donde el primero es la referencia del ID del bloque que creamos y el segundo es el tamaño del banner.

Cargar Anuncio Desde Ad Server

Finalizando este ejemplo, cargaremos el contenido del banner desde las redes publicitarias a través de la clase AdRequest, la cuál contiene la información de los objetivos (usuarios) para realizar la petición al servidor de anuncios.

Permisos de INTERNET

Agrega permisos de internet en a tu AndroidManifest.xml con el fin de autorizar las consultas al server de los anuncios.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Obtener AdView

Llama el método findViewById() en onCreate() y salva la referencia del AdView en un campo de la clase:

public class BrokersActivity extends AppCompatActivity {
    
    private AdView mBottomBanner;    
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_brokers);

        // Ui
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mBottomBanner = (AdView) findViewById(R.id.av_bottom_banner);


        // Setup
        setUpToolbar();
    }
...

Pedir anuncio con AdRequest

Crea una instancia de AdRequest a través de su Builder y luego pásalo como parámetro en el método AdView.loadAd(). Adicionalmente usa el método addTestDevice() para solicitar anuncios de prueba con el fin de evitar clickear los anuncios reales.

AdRequest adRequest = new AdRequest.Builder()
        .addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
        .build();
mBottomBanner.loadAd(adRequest);

Obtener device Id

El anterior paso tiene consigo la constante DEVICE_ID_EMULATOR para obtener el ID de tu emulador o dispositivo real en la primera ejecución. Con objeto de encontrarlo, abre el logcat cuando la app esté corriendo y escribe «addTestDevice».Del filtro copia y pega el código en el método.

AdRequest adRequest = new AdRequest.Builder()
        .addTestDevice("TU ID DE EMULADOR")
        .build();

Métodos de ciclo de vida de AdView

Ahora maneja el ciclo de vida del banner a través de los métodos resume(), pause() y destroy() en conjunto de los controladores de la actividad. De esa manera controlarás las pausa, reanudación y destrucción del banner a causa de las interacciones del usuario.

@Override
protected void onResume() {
    super.onResume();
    if (mBottomBanner != null) {
        mBottomBanner.resume();
    }
}

@Override
protected void onPause() {
    super.onPause();
    if (mBottomBanner != null) {
        mBottomBanner.pause();
    }
}

@Override
protected void onDestroy() {
    super.onDestroy();
    if (mBottomBanner != null) {
        mBottomBanner.destroy();
    }
}

Ver anuncio en tu app

Después de todos los pasos anteriores, corre la aplicación en el emulador o dispositivo real de tal manera que se vea el banner inferior con la plantilla de anuncios de prueba de Google.

Anuncios De AdMob En Una Lista

Como he dicho al inicio del artículo, crearemos una pequeña app android con una lista de los mejores brokers de forex de tal manera que se mezclen los bloques de anuncios con un contenido medianamente complejo.

Antes de crear los anuncios te diré paso a paso las instrucciones para tener la lista de forma rápida.

Añadir lista de brokers

En primer lugar agrega las dependencias de la parte inferior a build.gradle. La primera es para la librería Glide ya que cargaremos imágenes y la segunda es del RecyclerView.

compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:recyclerview-v7:24.1.1'

Ahora inserta un RecyclerView en el archivo res/layout/content_brokers.xml con el propósito de materializar nuestra lista.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.hermosaprogramacion.topforexbrokers.BrokersActivity"
    tools:showIn="@layout/activity_brokers">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/brokers_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/av_bottom_banner"
        android:background="@android:color/white"
        app:layoutManager="LinearLayoutManager"/>

    <com.google.android.gms.ads.AdView
        android:id="@+id/av_bottom_banner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_inferior_ad_unit_id" />

</RelativeLayout>

Crear layout para broker

Seguidamente <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="132dp" android:background="?android:attr/selectableItemBackground" android:clickable="true" android:paddingBottom="8dp" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="22dp"> <TextView android:id="@+id/tv_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/tv_featured_image" android:text="New Text" android:textColor="#080808" android:textSize="13sp" tools:text="Crazy Forex" /> <TextView android:id="@+id/tv_users_per_month" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/tv_name" android:layout_marginBottom="8dp" android:layout_marginTop="8dp" android:layout_toRightOf="@+id/tv_featured_image" android:text="New Text" android:textColor="#9E9E9E" android:textSize="12sp" tools:text="160.000 usuarios/mes" /> <TextView android:id="@+id/tv_description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv_featured_image" android:text="New Text" android:textAppearance="@style/TextAppearance.AppCompat.Caption" android:textColor="#4C4C4C" tools:text="Los mejores tips para operar en Forex" /> <ImageView android:id="@+id/tv_featured_image" android:layout_width="70dp" android:layout_height="70dp" android:layout_alignParentLeft="true" android:layout_marginRight="8dp" /> </RelativeLayout>

En consecuencia observarás el siguiente mock de alto nivel:

Crear modelo para el broker

En tercer lugar añade una nueva clase y llámala Broker. Según lo definido al inicio, esta debe tener 5 atributos: Un ID, el nombre del broker, su descripción, la cantidad de usuarios por mes y la referencia de la imagen destacada. Así que declara estos campos, inserta un constructor y genera métodos get*() y set*().

Broker.java

/**
 * Modelo de broker
 */
public class Broker {
    private String mId;
    private String mName;
    private String mDescription;
    private int mUsersPerMonth;
    @DrawableRes
    private int mFeaturedImageResId;

    public Broker(String name,
                  String description, int usersPerMonth,
                  @DrawableRes int featuredImageResId) {
        this.mId = UUID.randomUUID().toString();
        this.mName = name;
        this.mDescription = description;
        this.mUsersPerMonth = usersPerMonth;
        this.mFeaturedImageResId = featuredImageResId;
    }

    public String getId() {
        return mId;
    }

    public void setId(String mId) {
        this.mId = mId;
    }

    public String getName() {
        return mName;
    }

    public void setName(String mName) {
        this.mName = mName;
    }

    public String getDescription() {
        return mDescription;
    }

    public void setDescription(String mDescription) {
        this.mDescription = mDescription;
    }

    public int getUsersPerMonth() {
        return mUsersPerMonth;
    }

    public void setUsersPerMonth(int mUsersPerMonth) {
        this.mUsersPerMonth = mUsersPerMonth;
    }

    public int getFeaturedImageResId() {
        return mFeaturedImageResId;
    }

    public void setFeaturedImageResId(int mFeaturedImageResId) {
        this.mFeaturedImageResId = mFeaturedImageResId;
    }
}

Generar Mock data

Luego en el mismo modelo crea una lista de 10 brokers con datos de ejemplo para tener información que proyectar. Así mismo descarga imágenes de prueba o usa las que hay en el proyecto descargable que te dejé al inicio del tutorial.

public class Broker {
    ...

    public static List<Broker> FAKE_DATA_BROKERS = new ArrayList<>();

    static {
        FAKE_DATA_BROKERS.add(new Broker("Forex Mother of dragons",
                "El mejor broker de forex, abre tu cuenta ya",
                100000, R.drawable.broker_forex_1));
        FAKE_DATA_BROKERS.add(new Broker("Black Forex",
                "Comienza con tan solo 50USD",
                120000, R.drawable.broker_forex_2));
        FAKE_DATA_BROKERS.add(new Broker("Be Rich Now",
                "Entrenate y duplica tu inversión",
                1920000, R.drawable.broker_forex_3));
        FAKE_DATA_BROKERS.add(new Broker("Forexgump",
                "Ve de 100USD a 4000USD en dos semanas",
                900000, R.drawable.broker_forex_4));
        FAKE_DATA_BROKERS.add(new Broker("Dinero fácil pro",
                "Olvidate de tu trabajo y abre una cuenta ahora mismo",
                14000, R.drawable.broker_forex_5));
        FAKE_DATA_BROKERS.add(new Broker("Money money money!",
                "Qué esperas?, invierte tu capital!",
                100000, R.drawable.broker_forex_6));
        FAKE_DATA_BROKERS.add(new Broker("Invertsor",
                "Operaciones forex de práctica",
                40000, R.drawable.broker_forex_7));
        FAKE_DATA_BROKERS.add(new Broker("Forex Machine",
                "Entra y descubre una estrategia nunca antes revelada",
                30000, R.drawable.broker_forex_8));
        FAKE_DATA_BROKERS.add(new Broker("Forexme",
                "Explota tu inversión",
                220000, R.drawable.broker_forex_9));
        FAKE_DATA_BROKERS.add(new Broker("Aprende algo dinero",
                "De la mano de los mejores maestros del trading",
                200000, R.drawable.broker_forex_10));
    }
...

Crear adaptador de brokers

Posteriormente crea una clase Java con el nombre de BrokersAdapter con el objetivo de implementar el adaptador de la lista de brokers.

public class BrokersAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private final Context mContext;
    private List<Broker> mItems = new ArrayList<>();
    private BrokerItemClick mItemClickListener;

    public BrokersAdapter(Context context,
                          List<Broker> brokers,
                          BrokerItemClick brokerItemClick) {
        mContext = context;
        mItems = brokers;
        mItemClickListener = brokerItemClick;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        LayoutInflater layoutInflater = LayoutInflater.from(mContext);
        switch (viewType) {
            default:
                view = layoutInflater
                        .inflate(R.layout.list_item_broker, parent, false);
                return new BrokerViewHolder(view);
        }

    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        

        Broker currentItem = mItems.get(position);
        BrokerViewHolder brokerViewHolder = (BrokerViewHolder) holder;

        brokerViewHolder.name.setText(currentItem.getName());
        brokerViewHolder.description.setText(currentItem.getDescription());
        brokerViewHolder.usersPerMonth.setText(currentItem.formatUsersPerMonth());
        Glide.with(mContext)
                .load(currentItem.getFeaturedImageResId())
                .centerCrop()
                .into(brokerViewHolder.featuredImage);

    }

    @Override
    public int getItemCount() {
        return mItems.size();
    }

    public class BrokerViewHolder extends RecyclerView.ViewHolder implements
            View.OnClickListener {
        public TextView name;
        public TextView description;
        public TextView usersPerMonth;
        public ImageView featuredImage;

        public BrokerViewHolder(View itemView) {
            super(itemView);
            name = (TextView) itemView.findViewById(R.id.tv_name);
            description = (TextView) itemView.findViewById(R.id.tv_description);
            usersPerMonth = (TextView) itemView.findViewById(R.id.tv_users_per_month);
            featuredImage = (ImageView) itemView.findViewById(R.id.tv_featured_image);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            int position = getAdapterPosition();
            mItemClickListener.onBrokerClick(mItems.get(position));
        }
    }

    interface BrokerItemClick {
        void onBrokerClick(Broker clickedBroker);
    }
}

La interfaz BrokerItemClick permite comunicar la actividad con el adaptador para recibir los clicks generados por el usuario. Dependiendo de la posición del ítem se retornará el objeto Broker que corresponde.

Mostrar la lista en la actividad

De nuevo abre BrokersActivity y sitúate en onCreate(). Guarda la referencia de la lista de brokers y crea una instancia del adaptador con la fuente de datos Broker.FAKE_DATA_BROKERS. Luego escribe una escucha anónima y asigna el adaptador con setAdapter().

mBrokersList = (RecyclerView) findViewById(R.id.brokers_list);
BrokersAdapter brokersAdapter = new BrokersAdapter(
        this,
        Broker.FAKE_DATA_BROKERS,
        new BrokersAdapter.BrokerItemClick() {
            @Override
            public void onBrokerClick(Broker clickedBroker) {
                // Lógica
            }
        });
mBrokersList.setAdapter(brokersAdapter);

Ejecutar app en Android Studio

Por último presiona el botón de Run en Android Studio y visualiza el contenido de ejemplo de la app.

Monetizar App Con Banner Ads De AdMob

Una vez que tienes una interfaz más elaborada, es tiempo de aprender más a fondo de los tipos de anuncios que se pueden usar en AdMob. Para empezar profundicemos un poco más en los anuncios de Banner. Recuerda que su implementación se basa en:

Ubicar un AdView
Construir una petición AdRequest
Cargar el anuncio
Manejar su ciclo de vida

Dimensiones de los banners

Respecto a la documentación de Firebase sobre anuncios de banners, existen seis dimensiones estándar para proyectarlos como muestra la siguiente tabla. En caso de que la pantalla del dispositivo no tenga la resolución para albergar al banner se mostrará un espacio en blanco.

Dimensiones	Disponibilidad	Constante de AdSize
320×50	Teléfonos y tablets	`BANNER`
320×100	Teléfonos y tablets	`LARGE_BANNER`
300×250	Teléfonos y tablets	`MEDIUM_RECTANGLE`
468×60	Tablets	`FULL_BANNER`
728×90	Tablets	`LEADERBOARD`
Ancho de la pantalla × 32\|50\|90	Teléfonos y tablets	`SMART_BANNER`

Manejar eventos de bloques de anuncios

Si deseas recibir notificaciones cuando haya transiciones en el ciclo de vida de tus anuncios usa la clase abstracta AdListener. Esta contiene 5 controladores asociados a los siguientes estados:

onAdClosed(): Se llama cuando el usuario regresa a la app luego de haber clickeado un anuncio
onAdFailedToLoad(): Se llama cuando la petición de carga falló
onAddLeftApplication(): Se llama si el anuncio es cerrado en la app
onAdLoaded(): Se llama al cargar el anuncio
onAdOpened(): Se llama cuando un anuncio abre un elemento visual que cubre toda la pantalla

Recomendaciones al usar banners

Bien, ya sabes cómo insertar banners en tu app y como procesar los eventos de los usuarios. No obstante existen posiciones que violan las políticas del programa AdMob, las cuales se centran en fomentar la conversión de clicks legítimamente para mejorar las conversiones de los anunciantes.

Algunos consejos útiles:

Separar banners de los elementos de interacción (elementos sobre los que recaen interacciones de usuario). El espacio de separación podría ser un color que contraste la diferencia.
Fija los banners en una posición determinada para evitar que otros elementos ocupen el espacio.
Opcionalmente puedes retardar la aparición del banner por unos segundos para causar un efecto de desplazamiento en el contenido principal y proyectar su relevancia.
En caso de galerías, no promuevas el anuncio como si fuese un ítem destacado del conjunto
De ninguna manera muestres textos que promocionen a los usuarios el clic en los anuncios

Ejemplo de banner en Android

Ya que tenemos un banner puesto desde el inicio del proyecto, como ejemplo añadamos una escucha AdListener con el fin de mostrar Toasts al pasar por cada controlador. En cuanto al método para relacionar la interfaz al anuncio tendremos a setAdListener(). Observa lo sencillo que es:

Llama a setAdListener() del banner inferior pasando como parámetro una clase anónima basada en AdListener, donde se sobrescriba onAdLoaded() y onAdClosed().

mBottomBanner.setAdListener(new AdListener() {
    @Override
    public void onAdClosed() {
        // Op
    }

    @Override
    public void onAdLoaded() {
        // Op
    }
});

Crea un método llamado showMessage() para automatizar visualización de toasts según el texto entrante.
```
private void showMessage(String msg) {
    Toast.makeText(this, msg, Toast.LENGTH_LONG).show();
}
```

Emplea el método en cada controlador y luego corre la app. Recuerda usar anuncios de prueba si planeas procesar eventos de click.

mBottomBanner.setAdListener(new AdListener() {
    @Override
    public void onAdClosed() {
        showMessage("Se cerró el anuncio");
    }

    @Override
    public void onAdLoaded() {
        showMessage("Anuncio cargado");
    }
});

Pon un espacio entre la lista y el banner para no generar actividad inválida o disminuir la experiencia de usuario. Para ello puedes usar un valor de 16dp en la margen superior del banner, recubrirlo con algun ViewGroup para cambiar el color, o añadir un objeto Space entre la lista y el anuncio.

Monetizar App Con Interstitial Ads De AdMob

A diferencia de un banner que se muestra persistentemente mientras el usuario interactúa con los elementos de la UI, un anuncio intersticial aparece por un breve periodo de tiempo entre interacciones del usuario, ocupa toda la pantalla del dispositivo y muestra un botón para cerrarlo.

La clase base para la creación es InterstitialAd y esta es la receta a seguir para integrarlos:

Crear instancia en tiempo de ejecución de InterstitialAd
Crear petición con AdRequest
Determinar situación en donde se mostrará el anuncio
Comprobar si el anunció se cargó
Mostrar el anuncio

Nuevo bloque de anuncios tipo intersticial

Abre apps.admob.com, sitúate en la pestaña Monetizar, selecciona la app Top Forex Brokers y haz clic en Nuevo bloque de anuncios.

Selecciona el tipo Intersticial, nómbralo de la misma forma y confirma la creación con Guardar.

Ahora agrega un nuevo recurso string para el ID del bloque de anuncios intersticial como hicimos con el banner.

<string name="interstitial_ad_unit_id">ID_DE_ANUNCIO_INTERSTICIAL</string>

Agregar anuncio Intersticial

Abre BrokersActivity y agrega un nuevo miembro privado del tipo InterstitialAd.

public class BrokersActivity extends AppCompatActivity {

    ...
    private InterstitialAd mInterstitialAd;

Luego inicialízalo con su constructor en onCreate() pasando como texto la actividad.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_brokers);

    // Ui
    ...
    mInterstitialAd = new InterstitialAd(this);

Ahora pasa su ID de bloque de anuncios a través del método getString() y el recurso R.string.interstitial_ad_unit_id.

mInterstitialAd.setAdUnitId(getString(R.string.interstitial_ad_unit_id));
requestNewInterstitial();

Crear objeto AdRequest

De la misma forma que los banners, el contenido del anuncio se obtiene a través de un objeto AdRequest, así que crea uno con su builder y luego carga el intersticial con loadAd(). Si te es más práctico, crea un método llamado requestNewInterstitial() para ubicar este trozo de código.

private void requestNewInterstitial() {
    AdRequest adRequest = new AdRequest.Builder()
            .addTestDevice("TU DEVICE ID")
            .build();

    mInterstitialAd.loadAd(adRequest);
}

Mostrar anuncio intersticial al seleccionar ítem de lista

Una vez se ha solicitado la carga del anuncio, debes identificar en que situación vas a mostrarlo. Por lo general los bloques intersticiales se muestran entre cambios de actividades. Y es justamente lo que harás para probar este comportamiento. Crea una actividad llamada BrokerDetailActivity yendo a New > Activity > Empty Activity.

Lo siguiente es comprobar dentro del controlador BokerItemClick.onBrokerClick() definido previamente si el anuncio se cargó. Ahora bien, esto se hace con el método isLoaded(), cuyo retorno es booleano. Si el valor es true, entonces muestra el anuncio con show(), de lo contrario inicia la otra actividad.

BrokersAdapter brokersAdapter = new BrokersAdapter(
        this,
        Broker.FAKE_DATA_BROKERS,
        new BrokersAdapter.BrokerItemClick() {
            @Override
            public void onBrokerClick(Broker clickedBroker) {
                if (mInterstitialAd.isLoaded()) {
                    mInterstitialAd.show();
                } else {
                    startActivity(new Intent(this, BrokerDetailActivity.class));
                }
            }
        });

Manejar eventos del anuncio Intersticial

Otro punto es las acciones a realizar si el anuncio es cerrado por el usuario, considerando que la acción original debe persistir cuando este desaparezca. Es por eso que debes añadir un objeto AdListener para procesar la interacción e iniciar BrokerDetailActivity si estas ocurren.

mInterstitialAd.setAdListener(new AdListener() {
    @Override
    public void onAdClosed() {
        requestNewInterstitial();
        startActivity(new Intent(this, BrokerDetailActivity.class));
    }
});

Corre la app y visualiza el anuncio

Efectivamente al ejecutar la aplicación y presionar algún broker, se mostrará el bloque de anuncios intersticial en pantalla completa. Si lo cierras, se desplegará la actividad de detalle como se esperaba.

Recomendaciones para anuncios Intersticiales

Asegúrate de que nunca sean lo primero en ver al iniciar tu app o lo último al cerrarla.
Evita desplegar un intersticial en momentos donde el usuario tiene interacción continua con la UI.
Si tu app cambia frecuentemente entre screens, reduce el número de apariciones del intersticial para no congestionar al usuario. Una de las soluciones para ello, es usar un intervalo de tiempo como bandera de checkeo que controle las apariciones del anuncio.

Monetizar App Con Anuncios Nativos De AdMob

Un anuncio nativo o Native Ad es un elemento de publicidad de AdMob que permite a los android developers personalizar características visuales del mismo (título, llamadas de acción, reviews, etc.) con el propósito de complementar el estilo visual de su app. Estos se dividen los tipos de Descarga de aplicaciones y Contenido.

Anuncios de Descargas de aplicaciones

Los anuncios de descargas de aplicaciones o App instal ads promocionan la instalación de aplicaciones móviles ante los usuarios. Su contenido visual requiere por obligación la existencia de:

Encabezado
Imagen destacada
Descripción
Icono de la marca de la respectiva app store
Clara llamada a la acción.

Anuncios de contenidos

Por otra parte, los anuncios de contenidos (content ads) promueven cualquier tipo de acción que pueda basarse en imágenes y texto con el fin de que los usuarios realicen una acción. Su diseño requiere obligatoriamente los siguientes elementos:

Encabezado
Imagen primaria
Cuerpo o descripción
Llamada a la acción
El anunciante (nombre de la marca, url, etc.)

Native Ads Express

La implementación de anuncios se puede realizar de dos formas hasta el momento: Native Ads Express y NativeAds Advance.

La forma express crea el diseño de los anuncios a nivel del servidor de AdMob a través de una plantilla CSS. Obviamente tienes acceso a esta para que cambies los elementos principales desde código. En resumen, reduce la cantidad de código Java para implementar el anuncio.

La forma advance le da la libertad al Android Developer para obtener el contenido individual de cada uno de los elementos del anuncio nativo y así crear el diseño a través de layouts e implementar la interfaz programáticamente en el momento y circunstancias que desee.

Teniendo en cuenta lo anterior veamos cómo crear un anuncio nativo al interior de la lista de brokers.

Crear anuncio Nativo con Plantilla CSS

Ve a la sección de monetizar en tu escritorio AdMob, selecciona la aplicación de Forex, presiona Nuevo bloque de anuncios. Luego elige el tipo Nativo en el wizard y clickea Cómo empezar. Seguidamente…

Elegir tamaño de anuncio

Selecciona el tamaño del anuncio nativo del tipo Mediano.

Seleccionar plantilla de anuncio

Ahora te mostrarán tres plantillas con posiciones de elementos variadas de las cuales tu elegirás la primera (M001).

Editor de código CSS

En la siguiente screen verás un editor para personalizar el anuncio. En el panel derecho habilita ambas casillas para mostrar app install ads y content ads. Deja igual los valores del alto y ancho.

Anuncio nativo personalizado

El panel izquierdo contiene la plantilla CSS para configurar el estilo visual de los anuncios en donde debes editar los atributos pertinentes para que se acomoden a la app. En lo que respecta a los ítems de lista en Top Forex Brokers haremos las siguientes modificaciones:

Márgenes laterales de 16px
Background blanco(#fff)
Color de acento en el botón
Tono de azul en la url de los contenidos
Otros cambios que desees…

Sigue el enlace para ver un gist con el CSS final del anuncio nativo.

Añadir Native Ad A Una Lista

En segundo lugar debes agregar un elemento NativeExpressAdView en el layout donde deseas proyectar el contenido de los anunciantes. En ese orden de ideas el primer paso es crear un nuevo layout para aquellos ítems que tendrán anuncios en la lista de brokers.

Crear layout para ítems de anuncios nativos

Por lo que ve a New > Layout resource file y agrega un archivo llamado list_item_native_ad.xml. Usa como elemento raíz un LinearLayout y en su interior pon el ad view. Es importante que asignes el id nativeAd, que marques el atributo ads:adSize con las dimensiones y relaciones el ID de AdMob con ads:adUnitId.

Nota: Usa la constante FULL_WIDTH si deseas especificar que el ancho del anuncio nativo será todo el espacio disponible en la pantalla del dispositivo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="132dp">

    <com.google.android.gms.ads.NativeExpressAdView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/nativeAd"
        ads:adSize="FULL_WIDTHx132"
        ads:adUnitId="@string/native_express_ad_unit_id"        />
</LinearLayout>

Definir tipos de view en el adaptador

Abre BrokersAdapter y define a manera de constantes los dos tipos de ítems existentes.

public class BrokersAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    ...

    private static final int BROKER_VIEW_TYPE = 1;
    private static final int NATIVE_AD_VIEW_TYPE = 2;

Procesar tipos con getItemViewType()

Sobrescribe el método getItemViewType() con una estructura switch que retorne en un tipo anuncio cada 4 elementos excluyendo la primer posición. Si la condición no se satisface, entonces el tipo será un broker.

@Override
public int getItemViewType(int position) {
    if (position>1 && position % 4 == 0) {
        return NATIVE_AD_VIEW_TYPE;
    }

    return BROKER_VIEW_TYPE;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (!(holder instanceof BrokerViewHolder)) {
        return;
    }

    Broker currentItem = mItems.get(position);
    BrokerViewHolder brokerViewHolder = (BrokerViewHolder) holder;

    brokerViewHolder.name.setText(currentItem.getName());
    brokerViewHolder.description.setText(currentItem.getDescription());
    brokerViewHolder.usersPerMonth.setText(currentItem.formatUsersPerMonth());
    Glide.with(mContext)
            .load(currentItem.getFeaturedImageResId())
            .centerCrop()
            .into(brokerViewHolder.featuredImage);

}

Crear ViewHolder para anuncios

En seguida crea un nuevo RecyclerView.ViewHolder llamado NativeAdViewHolder. En su constructor encuentra el anuncio nativo y seteale un objeto AdListener por si deseas procesar eventos desde la actividad.

public class NativeAdViewHolder extends RecyclerView.ViewHolder {

    private final NativeExpressAdView mNativeAd;

    public NativeAdViewHolder(View itemView) {
        super(itemView);
        mNativeAd = (NativeExpressAdView) itemView.findViewById(R.id.nativeAd);
        mNativeAd.setAdListener(new AdListener() {
            @Override
            public void onAdLoaded() {
                super.onAdLoaded();
                if (mItemClickListener != null) {
                    // Op
                }
            }

            @Override
            public void onAdClosed() {
                super.onAdClosed();
                if (mItemClickListener != null) {
                    // Op
                }
            }

            @Override
            public void onAdFailedToLoad(int errorCode) {
                super.onAdFailedToLoad(errorCode);
                if (mItemClickListener != null) {
                    // Op
                }
            }

            @Override
            public void onAdLeftApplication() {
                super.onAdLeftApplication();
                if (mItemClickListener != null) {
                    // Op
                }
            }

            @Override
            public void onAdOpened() {
                super.onAdOpened();
                if (mItemClickListener != null) {
                    // Op
                }
            }
        });
        
    }
}

Cargar anuncio Nativo

Al igual que con todos los anuncios vistos, el contenido de un Native Ad se pide con loadAd() mediante un objeto AdRequest. Así que a lo último del constructor del holder agrega la siguiente línea para terminar.

AdRequest adRequest = new AdRequest.Builder()
        .addTestDevice(BrokersActivity.DEVICE_ID)
        .build();
mNativeAd.loadAd(adRequest);

Mostrar Native Ad en app Android

Finalmente corre el proyecto en Android Studio, realiza scroll hacia abajo en la lista y visualiza los bloques de anuncios agregados.

AdMob Rewarded Video Mediation

Adicionalmente existe un tipo de anuncio de tipo Video Premiado o Rewarded Video de modo similar a los intersticiales, solo que este proyecta vídeos que les otorgan recompensas a los usuarios por ver su contenido. Estos se implementan basados en redes de mediación externas como:

Fyber
Unity Ads
Vungle
Charboost
Muchas más…

Cada una trae sus propios SDKs para la solicitud y procesamiento de vídeos premiados, lo que dificultaría explicar su contenido aquí. Sin embargo te dejo un ejemplo oficial del equipo de Mobile Ads SDK donde simulan el control de un video premiado con las clases necesarias para hacerlo:

Google Rewarded Video Example

Google AdMob Ads Activity En Android Studio

Para finalizar te cuento que Android Studio tiene una plantilla de actividad que permite agregar un anuncio inicial a tu aplicación. En caso de que desees agregarla ve a New > Activity > Gallery y clickea la opción Google AdMob Ads Activity.

En la siguiente screen verás la típica configuración de una activity pero sumado a ello tendrás la posibilidad de elegir si comienzas con un Banner o Interstitial.

Por ejemplo, si eliges Interstitial, Android Studio generará una actividad que simula el cambio entre niveles de un videojuego, mostrando en cada transición un nuevo bloque de anuncios Intersticial.

Conclusión

Después de leer haz debido de ampliar tu conocimiento sobre la implementación de anuncios móviles en Android.

Además viste que existe cuatro tipos de anuncios disponibles: Banner, Intersticial, Nativo y Video Premiado.

Ahora depende de ti estudiar las mejores ubicaciones, tamaños, estilos, periodos de tiempo, limitaciones y demás características para que tu estrategia de monetización mejore con el uso de anuncios. Un tema que ya se sale del alcance de este artículo.

Aunque te mostré la mayoría de los códigos necesarios para implementarlos, es muy importante que repases los contenidos de AdMob para profundizar en consejos, referencias, implementaciones, ejemplos, etc.

Únete Al Discord De Develou

Si tienes problemas con el código de este tutorial, preguntas, recomendaciones o solo deseas discutir sobre desarrollo Android conmigo y otros desarrolladores, únete a la comunidad de Discord de Develou y siéntete libre de participar como gustes. ¡Te espero!