Aitor Sánchez - Blog - Nov. 1, 2023, 7:45 p.m.
¿Quieres mostrar banners o intersticiales de publicidad dentro de tu app a través de Admob Ionic? O, quizás, ya sabes cómo hacerlo pero te falta alguna configuración adicional para hacer y no sabes cómo ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a realizar la implementación de los anuncios de una manera sencilla, práctica y totalmente comprensible para cualquier mortal. Que entiendo perfectamente que si tienes poca experiencia puede resultar tedioso.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y visto esto, comenzamos. Let´s go!
Cómo con todos los componentes externos la core de Ionic, necesitamos realizar la instalación. Para hacerlo vamos a utilizar las siguientes dos líneas de consola:
ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-6618217759034394~1023623978"
npm install @ionic-native/admob-free
La primera línea instalará el plugin que hará de puente entre el código TS del componente y la parte nativa del sistema. A parte, tenemos la variable "ADMOB_APP_ID" en la que tendremos que setear la ID de la app que nos reporta Admob cuando registramos la aplicación en dicha plataforma.
La segunda línea instalará la biblioteca que nos permitirá comunicar nuestro código TS con el plugin de Cordova.
Listo, ya tenemos todo instalado, ahora sigamos.
También, cómo es costumbre, tenemos que incluir a nuestros providers la librería en si misma. Lo haremos de la siguiente manera:
providers: [
...
//AÑADIMOS ADMOB COMO PROVIDER
AdMobFree,
...
],
Por normal general, cómo se trata de un módulo que lo vamos a utilizar en toda la app, lo ponemos en el @NgModule de nuestro app.module.ts. Pero, en caso de que solo lo queramos utilizar en una de las páginas de nuestra app, basta con usarlo en los providers del @NgModule de dicha página o componente.
Ahora vamos a pasar a ver un ejemplo de servicio que utilizaremos para mostrar anuncios a través de la nuestra app.
import {Injectable} from '@angular/core';
//IMPORTAMOS PLATFORM PARA PODER ARRANCAR ADMOB CUANDO LA APLICACION ESTE LISTA.
import {Platform} from '@ionic/angular';
//IMPORTAMOS LO QUE VAMOS A UTILIZAR DE ADMOB.
import {
AdMobFree,
AdMobFreeBannerConfig,
AdMobFreeInterstitialConfig,
AdMobFreeRewardVideoConfig
} from '@ionic-native/admob-free/ngx';
@Injectable({
providedIn: 'root'
})
export class AdmobService {
//CONFIGURACION DEL BANNER
bannerConfig: AdMobFreeBannerConfig = {
isTesting: true, // DURANTE DEL DESARROLLO
autoShow: true//,
//id: "ID GENERADO EN ADMOB ca-app-pub"
};
//CONFIGURACION DEL INTERSTITIAL
interstitialConfig: AdMobFreeInterstitialConfig = {
isTesting: true, // DURANTE DEL DESARROLLO
autoShow: false,
//id: "ID GENERADO EN ADMOB ca-app-pub"
};
//CONFIGURACION DEL REWARD VIDEO.
RewardVideoConfig: AdMobFreeRewardVideoConfig = {
isTesting: true, // DURANTE DEL DESARROLLO
autoShow: false//,
//id: "ID GENERADO EN ADMOB ca-app-pub"
};
//AÑADIR PLATFORM Y ADMOB EN NUESTRO CONSTRUCTOR.
constructor(
public platform: Platform,
private admobFree: AdMobFree
) {
//CARGAMOS LOS ANUNCIOS DURANTE EL INICIO DE LA APP CON LA PROMESA DE platform.ready
platform.ready().then(() => {
//BANNER
this.admobFree.banner.config(this.bannerConfig);
//INTERSTITIAL
this.admobFree.interstitial.config(this.interstitialConfig);
this.admobFree.interstitial.prepare().then(() => {
console.log('INTERSTIAL CARGADO CORRECTAMENTE')
}).catch(e =>
console.log('PROBLEMA CARGANDO INTERSTITIAL: ', e)
);
//REWARD VIDEO
this.admobFree.rewardVideo.config(this.RewardVideoConfig);
this.admobFree.rewardVideo.prepare().then(() => {
console.log('REWARD VIDEO CARGADO CORRECTAMENTE')
}).catch(e =>
console.log('PROBLEMA CARGANDO REWARDVIDEO: ', e)
);
});
}
MostrarBanner() {
//COMPROBAR Y MOSTRAR EL BANNER
this.admobFree.banner.prepare().then(() => {
console.log('BANNER CARGADO CORRECTAMENTE')
}).catch(e =>
console.log('PROBLEMA CARGANDO BANNER: ', e)
);
}
MostrarInterstitial() {
//COMPROBAR QUE EL INTERSTITIAL ESTA LISTO
this.admobFree.interstitial.isReady().then(() => {
//SI ESTA LISTO MOSTRAR ANUNCIO
this.admobFree.interstitial.show().then(() => {
console.log('INTERSTITIAL CARGADO CORRECTAMENTE')
})
.catch(e => console.log('PROBLEMA MOSTRANDO REWARD VIDEO: ', e));
})
.catch(e => console.log('PROBLEMA CARGANDO REWARD VIDEO: ', e));
}
MostrarRewardVideo() {
//COMPROBAR QUE EL REWARDVIDEO ESTA LISTO
this.admobFree.rewardVideo.isReady().then(() => {
//SI ESTA LISTO MOSTRAR ANUNCIO
this.admobFree.rewardVideo.show().then(() => {
console.log('BANNER CARGADO CORRECTAMENTE')
})
.catch(e => console.log('PROBLEMA MOSTRANDO REWARD VIDEO: ', e));
})
.catch(e => console.log('PROBLEMA CARGANDO REWARD VIDEO: ', e));
}
}
Recalcar que el decorador @Injectable es muy importante al ser el que nos permitirá, cómo su propio nombre indica, inyectar el servicio a través del constructor de nuestras clases. Recordemos que TS tiene un gran sistema de inyección de dependencias.
Con el servicio de Admob Ionic totalmente funcional, ahora pasaremos a incluirlo en los providers de nuestro "app.module.ts". Deberá de ir siempre después de la librería "AdMobFree".
providers: [
...
//AÑADIMOS ADMOB COMO PROVIDER
AdMobFree,
//AÑADIMOS NUESTRO SERVICIO.
AdmobService,
...
]
Y bien, con esto ya tenemos listo todo el código necesario para comenzar a utilizar nuestra integración. Veamos un ejemplo sobre un código HTML en una página de ejemplo:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
ADMOB IONIC 5
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-text>Anuncios Admob</ion-text>
<ion-row>
<ion-col size="6">
<ion-button color="primary" (click)="MostrarInterstitial()">INTERSTITAL</ion-button>
</ion-col>
<ion-col size="6">
<ion-button color="secondary" (click)=" MostrarReward()">REWARDVIDEO</ion-button>
</ion-col>
</ion-row>
</ion-content>
Y su respectivo código TS:
import { Component, OnInit } from '@angular/core';
//IMPORTAMOS NUESTRO SERVICIO
import { AdmobService } from '../services/admob.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(
//AÑADIMOS AL CONSTRUCTOR.
private admobService: AdmobService,
) {}
ngOnInit() {
//AL CARGAR LA PAGINA MOSTRAMOS BANNER
this.admobService.MostrarBanner();
}
//FUNCION PARA LLAMAR AL INTERSTITIAL
MostrarInterstitial(){
this.admobService.MostrarInterstitial();
}
//FUNCION PARA LLAMAR AL VIDEOREWARD
MostrarReward(){
this.admobService.MostrarRewardVideo();
}
}
Y con esto ya solo queda que pruebes todo para ver si está correctamente configurado. Ahora vamos a pasar a ver los campos de clases y las funciones de manera detallada ¡al lío!
A diferencia de otros componentes, en este si que veo necesario que profundicemos un poco en los hijos porque tienen mucha importancia, cómo veremos a continuación.
Este campo contendrá los eventos de los que disponemos para controlar los intersticiales y los banners. Tales eventos cómo "onShow", "onDismiss", etc...
Es la función que nos permite controlar el evento que le pasemos por parámetros. Dicho evento será uno que podamos encontrar en el campo anterior "events" en formato string.
Este método retorna un observable al que nos vamos a suscribir para poder obtener la información de cuando se disparen dichos eventos. El observable trae consigo un objeto de tipo "any" que contendrá la información de él.
Esta campo contiene una instancia de la clase "AdMobFreeBanner" para que la podamos utilizar en nuestro código HTML.
Esta campo contiene una instancia de la clase "AdMobFreeInterstitial" para que la podamos utilizar en nuestro código TS.
Al igual que las dos anteriores, contiene una instancia de la clase "AdMobFreeRewardVideo" para que se lo podamos mostrar al usuario mediante nuestro código TS.
Ahora pasamos a ver los hijos del componente, clases que hemos visto en el ejemplo y que he comentado que en este artículo sí que íbamos a ver:
Sería el banner tal cual lo conocemos en la gran mayoría de nuestras apps.
Nos permite setear la configuración de nuestro banner.
Retornará una instancia de la clase "AdMobFreeBannerConfig"
Básicamente, nos permite esconder el banner de la vista.
Retorna una promesa que tendremos que controlar. Cuando dicha promesa se resuelva es que el banner ha sido escondido.
Cómo su propio nombre indica, prepara el banner para ser mostrado en la vista.
Retorna una promesa que tendremos que controlar. Con dicha promesa llegará la información para saber si está listo, o por el contrario, algo ha fallado y no se puede utilizar.
A diferencia del método "hide" este eliminará el banner de la vista. Digamos, hará un detach del código html.
Retorna una promesa que tenemos que controlar para saber si todo ha ido cómo se esperaba.
Muestra el banner.
Retorna una promesa que debemos de controlar para saber cómo ha ido todo.
Nos permite setear la configuración del banner.
Retorna una instancia de la clase "AdMobFreeInterstitialConfig"
Nos permite conocer si el intersticial está listo para ser mostrado.
Retorna una promesa que tenemos que controlar. Dentro de ella llega la información para conocer esto.
Prepara el intersticial para ser mostrado.
Retorna una promesa que tenemos que controlar que nos avisará cuando, de manera correcta o con algún error, el intersticial está preparado.
Muestra el intersticial al usuario.
Retorna una promesa que tenemos que controlar para saber si, finalmente, el intersticial ha sido mostrado.
Nos permite setear la configuración de este tipo de anuncio.
Retorna una instancia de la clase "AdMobFreeRewardVideoConfig".
Nos permite conocer cuando este tipo de anuncio está disponible para ser mostrado.
Retorna una promesa que tenemos que controlar. Será llamada cuando dicho anuncio esté listo.
Prepara el video recompensa para que pueda ser usado. Esta función es normal llamarla después de usar la función config.
Retorna una promesa que tenemos que controlar, cuando sea llamada significa que el anuncio está listo. Pero, cómo pasa con los dos casos anteriores, puede ser que esté preparado para ser mostrado, o no.
Muestra el video recompensa al usuario.
Retorna una promesa que tenemos que controlar, cuando sea llamada será que el anuncio ha sido mostrado al usuario.
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.
Bueno geniete, espero haberte ayudado con tus anuncios. Nos vemos en el siguiente artículo. Hasta ese entonces ¡que te vaya bien!