Cómo monetizar tus aplicaciones Android con AdMob

() translation by (you can also view the original English article)

En este tutorial aprenderás cómo integrar AdMob para que puedas ganar dinero con esa increíble aplicación Android que programaste. Vamos, ¿quién no querría eso?. AdMob se encuentra entre las mayores plataformas de publicidad móvil del mercado, y es propiedad de Google.

Existen algunas maneras diferentes de monetizar tus aplicaciones en Android: descargas de paga, suscripciones de paga, compras en la aplicación y mostrando anuncios. Puedes combinarlas, pero es recomendable elegir solamente un modelo. En este tutorial aprenderás cómo monetizar tu aplicación mostrando anuncios.

Los tipos de anuncios que crearás en este tutorial son banners, anuncios intersticiales y anuncios nativos express. Explicaré cada uno de ellos y te mostraré cómo implementarlos en tu aplicación. Pero antes de eso veamos primero cómo integrar el SDK de Mobile Ads y cómo inicializarlo.

Crea un proyecto de Android Studio

En Android Studio crea un nuevo proyecto llamado MainActivity.

Incluye el SDK de Mobile Ads

Para comenzar la integración de AdMob con tu aplicación, primero necesitarás incluir el SDK de Mobile Ads al archivo de módulo build.gradle de tu aplicación:

1	compile 'com.google.android.gms:play-services-ads:11.0.2'

Si vas a integrar Firebase a tu aplicación, entonces debes usar el SDK que es parte de Firebase:

1	compile 'com.google.firebase:firebase-ads:11.0.2'

Revisa algunos de nuestros tutoriales de Firebase aquí en Envato Tuts+ si necesitas ayuda para iniciar con Firebase:

SDK de Android

Iniciando con Firebase para Android

Ashraff Hathibelagal

Asegúrate de sincronizar el proyecto después de añadirle los SDKs para descargar las bibliotecas de Internet en tu aplicación.

Inicializa MobileAds

Necesitas inicializar el SDK de Mobile Ads antes de poder cargar anuncios en tu aplicación Android, así que hazlo tan pronto como puedas. Vamos a crear una clase que extiende a la clase Application, y luego vamos a inicializar el SDK MobileAds en el método onCreate() de esa clase, ya que este método se invoca solamente una vez al ejecutar la aplicación.

import com.google.android.gms.ads.MobileAds;
import android.app.Application;

public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        MobileAds.initialize(this, "ca-app-pub-3940256099942544/6300978111");
    }
}

El segundo argumento que se le proporciona al método estático initialize() de la clase MobileAds debe ser el ID de aplicación de AdMob que obtuviste cuando te registraste con AdMob. En este caso estamos usando el ID de aplicación público proporcionado por Google para fines de demostración.

Modifica el archivo manifiesto

Necesitamos agregar la clase application que creamos en el atributo name de la etiqueta application en nuestro archivo AndroidManifest.xml.

1	<application
2	android:name=".App">
3	</application>

Estando dentro de este archivo, asegúrate de incluir el permiso INTERNET para que los anuncios móviles de Google puedan ejecutarse.

<!-- Include required permissions for Google Mobile Ads to run. -->

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

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

En el siguiente fragmento de código añadimos AdActivity a nuestro archivo AndroidManifest.xml dentro de la etiqueta application.

<activity android:name="com.google.android.gms.ads.AdActivity"

          android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"

          android:theme="@android:style/Theme.Translucent" />

Este activity es proporcionado por el SDK. Es útil en los banners para desplegar el anuncio y que sea visualizado cuando el usuario haga clic en él, mientras que para un anuncio intersticial se usa para mostrar el anuncio cuando el usuario haga clic en él.

1. Anuncios tipo banner

Los anuncios tipo banner cubren una parte de la pantalla actualmente visible. En otras palabras, cualquier contenido que se encuentre en tu aplicación y en el anuncio será mostrado en conjunto en la pantalla. Esto mejora la experiencia de los usuarios, ya que éstos pueden seguir usando tu aplicación mientras el anuncio se encuentra visible, a diferencia de un anuncio intersticial (espera, hablaremos de eso en breve). Toma en cuenta que un anuncio tipo banner puede ser texto o una imagen.

Veamos cómo implementar un anuncio tipo banner.

Incluye un anuncio tipo banner en tu diseño

AdView es un ViewGroup personalizado que contendrá al anuncio tipo banner, así que necesitamos editar nuestro archivo de diseño activity_banner_ad.xml para incluir esta vista.

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
                xmlns:ads="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="com.chikeandroid.tutsplus_admob.MainActivity">

    <TextView android:text="Hello World"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />

    <com.google.android.gms.ads.AdView
            android:id="@+id/adView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            ads:adSize="BANNER"
            ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
    </com.google.android.gms.ads.AdView>
</RelativeLayout>

Vamos a definir el tamaño del AdView usando el atributo ads:adSize y asignándole el valor BANNER. Otras alternativas disponibles son LARGE_BANNER, FULL_BANNER, SMART_BANNER, etc.

El atributo ads:adUnitId de AdView está configurado con el valor de un anuncio de prueba proporcionado por Google. ¡Tendrás que actualizar este valor con un anuncio asociado con tu cuenta si verdaderamente quieres ganar dinero con tus anuncios!

El ID del anuncio identifica la ubicación de un anuncio y puedes encontrarlo en la consola de administración de AdMob. Este ID le indicará a AdMob el tipo de anuncio que debe mostrarse en tu aplicación, así como el formato de visualización (imagen, texto o video).

Carga el anuncio

Para que finalmente podamos mostrar el anuncio, necesitamos llevar a cabo una solicitud y luego mostrarlo en el AdView que creamos anteriormente en la clase BannerAdActivity.

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class BannerAdActivity extends AppCompatActivity {
    private AdView mAdView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAdView = (AdView) findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder()
                .addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
                .build();
        mAdView.loadAd(adRequest);
    }
}

Hicimos una solicitud de anuncio creando una instancia de AdRequest usando el constructor. Luego usamos el método addTestDevice(), enviándole el id de un dispositivo como argumento para recibir anuncios de prueba en el dispositivo, que en nuestro caso es el emulador. Finalmente invocamos al método loadAd() de AdView que recibe la instancia de AdRequest y luego carga el anuncio en un hilo que se ejecuta en segundo plano (para no bloquear el hilo UI/main).

Probando la aplicación

En este punto podemos ejecutar nuestro proyecto y ver el resultado.

En la captura de pantalla anterior podemos ver que nuestro anuncio tipo banner de prueba se muestra debajo de la vista. Ahora interactúa con el anuncio haciendo clic en él.

Escuchando para detectar eventos de anuncios con AdListener

Ahora exploremos los eventos o devoluciones de llamadas que podemos observar en un anuncio. Estos son los eventos disponibles:

onAdLoaded(): este método se ejecuta cuando se obtiene el anuncio.
onAdOpened(): este método se invoca cuando se abre el anuncio.
onAdClosed(): este método se ejecuta cuando se cierra el anuncio.
onAdLeftApplication(): este método es invocado cuando el usuario ha salido de la aplicación.
onAdFailedToLoad(int errorCode): este se ejecuta cuando falla una solicitud para el anuncio. El código puede ser uno de entre ERROR_CODE_NETWORK_ERROR, ERROR_CODE_INVALID_REQUEST, ERROR_CODE_NO_FILL o ERROR_CODE_INTERNAL_ERROR.

// ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ... 
        mAdView.setAdListener(new AdListener() {
        
                    @Override
                    public void onAdLoaded() {
                        super.onAdLoaded();
                        Toast.makeText(MainActivity.this, "onAdLoaded()", Toast.LENGTH_SHORT).show();
                    }
        
                    @Override
                    public void onAdOpened() {
                        super.onAdOpened();
                        Toast.makeText(MainActivity.this, "onAdOpened()", Toast.LENGTH_SHORT).show();
                    }
        
                    @Override
                    public void onAdClosed() {
                        super.onAdClosed();
                        Toast.makeText(MainActivity.this, "onAdClosed()", Toast.LENGTH_SHORT).show();
                    }
        
                    @Override
                    public void onAdFailedToLoad(int i) {
                        super.onAdFailedToLoad(i);
                        Toast.makeText(MainActivity.this, "onAdFailedToLoad()", Toast.LENGTH_SHORT).show();
                    }
        
                    @Override
                    public void onAdLeftApplication() {
                        super.onAdLeftApplication();
                        Toast.makeText(MainActivity.this, "onAdLeftApplication()", Toast.LENGTH_SHORT).show();
                    }
            });
    }

    @Override
    public void onPause() {
        // This method should be called in the parent Activity's onPause() method.
        if (mAdView != null) {
            mAdView.pause();
        }
        super.onPause();
    }
    
    @Override
    public void onResume() {
        super.onResume();
        // This method should be called in the parent Activity's onResume() method.
        if (mAdView != null) {
            mAdView.resume();
        }
    }
    
    @Override
    public void onDestroy() {
        // This method should be called in the parent Activity's onDestroy() method.
        if (mAdView != null) {
            mAdView.destroy();
        }
        super.onDestroy();
    }
}

Después de añadir el método de escucha, ejecuta el proyecto nuevamente e interactúa con el anuncio. Observa cómo se ejecutan los eventos revisando los mensajes toast que creamos.

2. Anuncios intersticiales

Hemos visto lo fácil que es mostrar un anuncio tipo banner. Ahora veamos cómo crear anuncios intersticiales.

Los anuncios intersticiales son aquellos que cubren toda la pantalla de tu aplicación, sin dejar espacio para mostrar otras vistas de la misma (como veremos pronto). Dado que estos ocupan la pantalla completa y también tardan algo de tiempo en cargar si la red es lenta, necesitas tener cuidado para no causar molestias a tus usuarios. Así que, de forma ideal, estos anuncios intersticiales deben mostrarse durante pausas naturales de tu aplicación, por ejemplo entre niveles en un juego, y no cuando los usurios estén en medio de alguna otra tarea.

import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.InterstitialAd;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

public class InterstitialAdActivity extends AppCompatActivity {
    private InterstitialAd mInterstitialAd;

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

    private void loadInterstitialAd() {
        mInterstitialAd = new InterstitialAd(this);
        mInterstitialAd.setAdUnitId("ca-app-pub-3940256099942544/1033173712");
        mInterstitialAd.setAdListener(new AdListener() {

            @Override
            public void onAdLoaded() {
                super.onAdLoaded();
                Toast.makeText(MainActivity.this, "onAdLoaded()", Toast.LENGTH_SHORT).show();
                if(mInterstitialAd.isLoaded()) {
                    mInterstitialAd.show();
                }
            }

            @Override
            public void onAdFailedToLoad(int i) {
                super.onAdFailedToLoad(i);
                Toast.makeText(MainActivity.this, "onAdFailedToLoad()", Toast.LENGTH_SHORT).show();
            }
        });

        AdRequest adRequest = new AdRequest.Builder().build();
        mInterstitialAd.loadAd(adRequest);
    }
}

En el código anterior declaramos e incializamos una instancia de la clase InterstitialAd en la clase InterstitialAdActivity. Configuramos el id del anuncio enviando el id proporcionado por Google como único argumento al método setAdUnitId().

Al igual que lo que hicimos para el anuncio tipo banner, queremos escuchar eventos del anuncio, por lo que configuramos un método escucha para ejecutar a los métodos sobrecargados onAdLoaded() y onAdFailedToLoad(int i). Hacemos una solicitud de anuncios creando una instancia de la clase AdRequest usando su constructor y luego invocando al método loadAd(), pasando esta solicitud como argumento al método. Usamos el método isLoaded() para determinar el momento en el que el anuncio ha sido cargado y luego invocamos al método show() para finalmente mostrarlo.

También puedes añadir un AdListener como lo hicimos para el anuncio tipo banner.

Prueba el anuncio

Ahora, en este punto podemos ejecutar la aplicación y ver el resultado.

En la captura de pantalla anterior puedes ver que nuestro anuncio intersticial de prueba se está mostrando.

3. Anuncios nativos express

Los anuncios nativos express te dan a ti (el editor) la habilidad de personalizar el aspecto de los anuncios para que se adapten de forma natural a tu aplicación. Esta personalización se lleva a cabo definiendo plantillas CSS en las que defines tus propias fuentes, colores, tamaños, etcétera, desde tu cuenta de AdMob. Sin embargo, no puedes cambiar las imágenes, descripciones ni títulos, éstos son establecidos por los anunciantes.

Los anuncios personalizados pueden ser mostrados en tu aplicación usando un NativeExpressAdView.

Incluye `NativeExpressAdView` en tu diseño

A continuación incluímos el NativeExpressAdView, que es un ViewGroup, en nuestro archivo de diseño. También definimos el android:layout_height y el android:layout_width con el valor wrap_content. El ads:adSize será "320x300" y usaremos el id del anuncio NativeExpress proporcionado por Google (solamente para fines de demostración).

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:ads="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="com.chikeandroid.tutsplus_admob.BannerAdActivity">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Native Express Ad!" />

    <com.google.android.gms.ads.NativeExpressAdView
            android:id="@+id/adView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            ads:adSize="320x300"
            ads:adUnitId="ca-app-pub-3940256099942544/2177258514">
    </com.google.android.gms.ads.NativeExpressAdView>

</RelativeLayout>

Cargando el anuncio

A continuación construimos nuestro AdRequest y luego comenzamos a cargar el anuncio para mostrarlo. También agregaremos código para responder a las devoluciones de llamadas del ciclo de vida del Activity. También puedes añadir un AdListener si quieres, de la misma forma en la que lo hicimos para el anuncio tipo banner.

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.NativeExpressAdView;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class NativeExpressAdActivity extends AppCompatActivity {
    NativeExpressAdView mNativeExpressAdView;

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

        mNativeExpressAdView = (NativeExpressAdView) findViewById(R.id.adView);

        AdRequest.Builder adRequestBuilder = new AdRequest.Builder();
        adRequestBuilder.addTestDevice(AdRequest.DEVICE_ID_EMULATOR);

        mNativeExpressAdView.loadAd(adRequestBuilder.build());
    }

    @Override
    public void onResume() {
        super.onResume();
        mNativeExpressAdView.resume();
    }

    @Override
    public void onPause() {
        mNativeExpressAdView.pause();
        super.onPause();
    }

    @Override
    public void onDestroy() {
        mNativeExpressAdView.destroy();
        super.onDestroy();
    }
}

Prueba la aplicación

¡Eso es todo! ahora puedes ejecutar la aplicación y ver tu anuncio nativo express en acción.

Crea tu propia cuenta de AdMob

Ahora que hemos aprendido acerca de los diferentes tipos de anuncios, puedes seguir adelante e integrarlos a tu aplicación. Para comenzar a mostrar anuncios reales y ganar dinero necesitarás una cuenta de AdMob, con ids de anuncios reales que estén vinculados a anuncios reales de anunciantes. ¡Solamente visita el sitio web de AdMob para registrarte!

Conclusión

En este tutorial aprendiste acerca de AdMob y cómo integrar diferentes formatos de anuncios del mismo, tales como anuncios tipo banner, intersticiales y nativos express en Android.

Para saber más sobre AdMob en Android consulta la documentación oficial. Y mientras tanto ¡revisa algunos de nuestros otros cursos y tutoriales acerca del desarrollo de aplicaciones en Android!