Programación

Integrar Admob en Ionic (Angular) con Capacitor

Google Admob logo

Este es un post que quería realizar hace ya tiempo en el cual quiero explicar cómo podemos integrar Admob en Ionic usando Capacitor.

En primer lugar crearemos un proyecto nuevo:

Nuevo proyecto Ionic

Instalamos el paquete necesario para hacer uso de Admob:

Admob capacitor

Hacemos un build de nuestro proyecto, para que así se nos cree los ficheros de Android.

build ionic android

En el fichero MainActivity.java debemos agregar el plugin de la siguiente manera:

Mainactivity admob

En el fichero AndroidManifest, agregamos el siguiente XML bajo <manifest><application>:

Androidmanifest admob

Agregamos el ID de nuestra aplicación en Admob en el fichero strings.xml:

<string name="admob_app_id">[APP_ID]</string>

Esto es muy importante, en el fichero app.component.ts de nuestra aplicación debemos inicializarlo de la siguiente forma:

Admob initialize ionic

Ahora realizamos la configuración para mostrar un banner en la aplicación. En mi caso, suelo centralizar todo lo relacionado con AdMob en un servicio, al que llamo cuando quiero mostrar un banner o intersticial.

admob service

Podemos probar los anuncios con los anuncios de prueba que dispone Google: https://developers.google.com/admob/android/test-ads?hl=es

Esta es la documentación del paquete que estamos usando y que os podrá servir de ayuda: https://github.com/capacitor-community/admob

De esta forma llamo al servicio para mostrar un banner.

Call banner admob

Finalmente, comprobamos que el banner se muestra. Si estamos usando la id de nuestra aplicación y nuestros anuncios puede deberse a que hasta que no tengamos la app en Play Store no aparecerán. Así que aconsejo primero comprobar que se muestran los anuncios de prueba.

banner in app

Leave a comment

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad