Integrar AdMob en Ionic con Capacitor

Integración de AdMob en Ionic con Capacitor

La publicidad in-app es una excelente manera de monetizar tus aplicaciones móviles. AdMob, la plataforma de publicidad de Google, es una opción popular para mostrar anuncios en aplicaciones móviles. En este tutorial, aprenderás cómo integrar AdMob en una aplicación Ionic utilizando la librería Capacitor Community AdMob.

Requisitos previos:

Antes de comenzar, asegúrate de tener Capacitor y Ionic CLI instalados en tu proyecto. Puedes instalar Capacitor ejecutando:

ionic integrations enable capacitor

Luego, instala Capacitor AdMob utilizando npm:

npm install @capacitor-community/admob

Paso 1: Configuración de AdMob

Primero, necesitas configurar tu aplicación en la consola de AdMob y obtener tu App ID y Ad Unit ID. Sigue estos pasos:

Regístrate en AdMob.
Crea un nuevo sitio y una nueva aplicación en la consola de AdMob.
Obtén tu App ID y al menos un Ad Unit ID.

Paso 2: Instalación de la librería Capacitor AdMob

Asegúrate de haber instalado la librería Capacitor AdMob con el siguiente comando:

npm install @capacitor-community/admob

Paso 3: Configuración en tu aplicación Ionic

Abre el archivo capacitor.config.json en la raíz de tu proyecto y agrega las siguientes configuraciones:

{
    "appId": "tu_app_id",
    "appName": "Nombre de tu aplicación",
    "bundledWebRuntime": false,
    "npmClient": "npm",
    "webDir": "www",
    "plugins": {
        "AdMob": {
            "adMobAppId": "tu_admob_app_id"
        }
    }
}

Reemplaza tu_app_id y tu_admob_app_id con tus identificadores de aplicación de Capacitor y AdMob.

Paso 4: Uso de Capacitor AdMob en tu aplicación Ionic

Importa y utiliza la librería en tu componente Ionic. Por ejemplo, en tu home.page.ts:


import { Component } from '@angular/core';
import { AdMob } from '@capacitor-community/admob';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor() {}

  async mostrarAnuncio() {
    const options = {
      adId: 'tu_ad_unit_id',
    };

    await AdMob.showBanner(options);
  }
}

Recuerda reemplazar tu_ad_unit_id con tu Ad Unit ID.

Paso 5: Ejecución de la aplicación

Ahora, puedes ejecutar tu aplicación Ionic en un emulador o dispositivo:

ionic capacitor run android

¡Y eso es todo! Ahora deberías ver anuncios de AdMob en tu aplicación Ionic.

Recuerda seguir las políticas de AdMob para asegurarte de cumplir con todas las regulaciones y políticas de Google en relación con la publicidad móvil. ¡Buena suerte con tu aplicación!

Deja una respuesta Cancelar la respuesta