Admob Ionic | Aprende a utilizarlo cómo un profesional

¿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!

 

Instalando el componente Admob Ionic

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.

 

Configurando el módulo AdMobFree

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.

 

¿Cómo utilizar Admob en Ionic?

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,
...
]

 

Ejemplo de uso de Admob Ionic

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!

 

Funciones y campos de clase de AdMobFree

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.

 

events

Este campo contendrá los eventos de los que disponemos para controlar los intersticiales y los banners. Tales eventos cómo "onShow", "onDismiss", etc...

 

on(event)

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.

 

banner

Esta campo contiene una instancia de la clase "AdMobFreeBanner" para que la podamos utilizar en nuestro código HTML.

 

interstitial

Esta campo contiene una instancia de la clase "AdMobFreeInterstitial" para que la podamos utilizar en nuestro código TS.

 

rewardVideo

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:

 

AdMobFreeBanner

Sería el banner tal cual lo conocemos en la gran mayoría de nuestras apps.

 

config(options)

Nos permite setear la configuración de nuestro banner.

Retornará una instancia de la clase "AdMobFreeBannerConfig"

 

hide()

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.

 

prepare()

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.

 

remove()

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.

 

show()

Muestra el banner.

Retorna una promesa que debemos de controlar para saber cómo ha ido todo.

 

AdMobFreeInterstitial

 

config(options)

Nos permite setear la configuración del banner.

Retorna una instancia de la clase "AdMobFreeInterstitialConfig"

 

isReady()

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.

 

prepare()

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.

 

show()

Muestra el intersticial al usuario.

Retorna una promesa que tenemos que controlar para saber si, finalmente, el intersticial ha sido mostrado.

 

AdMobFreeRewardVideo

 

config(options)

Nos permite setear la configuración de este tipo de anuncio.

Retorna una instancia de la clase "AdMobFreeRewardVideoConfig".

 

isReady()

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.

 

prepare()

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.

 

show()

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.

 

AdMobFreeBannerConfig

• id -> string -> Aquí estará el ID del anuncio.
• isTesting -> boolean -> Si es verdadero, el servicio recibirá anuncios de test.
• autoShow -> boolean -> Si es verdadero, el banner será mostrado en cuanto esté cargado, sin necesidad de tener que llamar a la función "show".
• bannerAtTop -> boolean -> Si es verdadero, nos permite colocar el banner en la parte de arriba de la pantalla.
• overlap -> boolean ->Si es verdadero, el banner estará situado por encima del webView de la app.
• offsetTopBar -> boolean -> Si es verdadero, evita que la barra de estado de ios7 se superponga al anuncio.
• size -> string -> El tamaño del banner, puede ser:
  • BANNER
  • LARGE_BANNER
  • MEDIUM_RECTANGLE
  • FULL_BANNER
  • LEADERBOARD
  • SMART_BANNER

 

AdMobFreeInterstitialConfig

• id -> string -> Será el ID del anuncio.
• isTesting -> boolean -> Si es verdadero, mostrará anuncios de prueba.
• autoShow -> boolean -> Si es verdadero, el anuncio será mostrado nada más sea cargado.

 

AdMobFreeRewardVideoConfig

• id -> string -> Será el ID del anuncio.
• isTesting -> boolean -> Si es verdadero, mostrará anuncios de prueba.
• autoShow -> boolean -> Si es verdadero, el anuncio será mostrado nada más sea cargado.

 

Tutorial en video por si no te gusta leer

 

Algo más que quizás te interese

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!