Tutorial de Admob en Ionic

Existen varias formas de monetizar nuestras apps y una de ellas es añadiendo anuncios a nuestra aplicación, para ello vamos a instalar en nuestro proyecto Admob.

¿Qué es admob?

Admob es una plataforma de Google que nos permite incrustar banners en nuestra aplicación con el fin de monetizarlas. Su funcionamiento es sencillo, cuantas más personas vean y cliquen el banner de nuestra aplicación, mayor serán nuestras ganancias.

Creando nuestro banner en admob

Primero debemos registrarnos en admob. Una vez registrados, nos aparecerá la siguiente ventana, donde seleccionaremos si ya hemos publicado nuestra aplicación en la store o no. No es obligatorio que lo esté, pero si lo está, debemos vincularla al banner que vamos a crear.

Una vez hayamos elegido una de las opciones anteriores, nos aparecerá la siguiente pantalla, en la que elegiremos qué tipo de anuncio queremos en nuestra aplicación. En este caso, seleccionaremos un banner.

Elegido el banner, le pondremos un nombre para identificarlo.

Una vez creado nuestro banner, nos dará un código que debemos copiar más adelante en nuestro proyecto.

No te preocupes si no lo has copiado, podemos encontrar este código en aplicaciones/nombredelaplicacion/bloques de anuncio.

Añadiendo el baner a nuestro proyecto ionic

Una vez tengamos creado nuestro banner, iremos a nuestro proyecto y añadiremos el plugin de admob para ionic que podemos encontrar en su documentación.

En nuestra consola, nos dirigimos a la ruta de nuestro proyecto e instalaremos admob con estas dos lineas:

ionic cordova plugin add cordova-plugin-admob-free

npm install --save @ionic-native/admob-free

Cuando finalice la instalación, lo añadiremos a nuestro app.module.ts, de la siguiente forma:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
//Importamos admob a nuestro app.module
import { AdMobFree } from '@ionic-native/admob-free';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,//Y éste en nuestros providers
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Luego, en nuestro app.component.ts, añadiremos estás lineas de código para cargar nuestro banner nada más abrir nuestra app:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free'; 
//importamos nuestro plugin
import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

//lo declaramos en nuestro constructor
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private admobFree: AdMobFree) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
//Llamamos a nuestra funcion
      this.pushAdmob();
    });
  }
//Creamos la función que llamaremos en nuestro constructor
  pushAdmob(){
    const bannerConfig: AdMobFreeBannerConfig = {
      id: 'ca-app-pub-5968764496464337/3356815338',
      isTesting: false,
      autoShow: true,
     };
     this.admobFree.banner.config(bannerConfig);

     this.admobFree.banner.prepare()
       .then(() => {
        this.admobFree.banner.show();
        console.log("show banner");
       })
       .catch(e => console.log(e));
  }
}

Una vez realizado esto, ¡solo nos queda probar que todo ha ido bien! Para ello necesitaremos arrancar nuestro proyecto en un dispositivo real o virtual, ya que en nuestro navegador no nos aparecerá. Puedes ver como exportar la apk de nuestro proyecto en este articulo sobre exportar y firmar apk en ionic.

Si nos muestra un banner negro en la parte inferior de nuestra pantalla, habremos instalado de forma correcta nuestro plugin.

Los anuncios pueden tardar en aparecer en nuestro banner si lo has creado hace poco.

Por último, una vez publiques tu aplicación en la store, recuerda vincularla con nuestro banner en la web de admob.

¡Cualquier duda, ponte en contacto con nostros, nos vemos pronto.