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″]
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: En tercer lugar añade una nueva clase y llámala Broker.java 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. Posteriormente crea una clase Java con el nombre de La interfaz De nuevo abre Por último presiona el botón de Run en Android Studio y visualiza el contenido de ejemplo de la app. 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: 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.Crear modelo para el broker
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*()
./**
* 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
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
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);
}
}
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
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
Monetizar App Con Banner Ads De AdMob
Dimensiones de los banners
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 anuncioonAdFailedToLoad()
: Se llama cuando la petición de carga fallóonAddLeftApplication()
: Se llama si el anuncio es cerrado en la apponAdLoaded()
: Se llama al cargar el anuncioonAdOpened()
: 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 sobrescribaonAdLoaded()
yonAdClosed()
.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 objetoSpace
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:
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 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.