Agregue anuncios a su aplicación de Android Ionic React | Autor: Matthias Hild | Junio ​​de 2021

¡Felicitaciones, ha creado su primer anuncio!Ahora debería ver su ID de publicidad (tiene este aspecto ca-app-pub-00000000/00000000 Y hay un «/» adentro). Deberías prestarle atención.

Para implementar el código, debe prestar atención a dos valores:

Esto ID de aplicaciónY se ve así: ca-app-pub-00000000 ~ 00000000

con ID de publicidadY se ve así: ca-app-pub-00000000/00000000

Para instalar el complemento de AdMob, vaya a su proyecto Ionic e ingrese:

npm i @capacitor-community/admob

También hay un paquete de NPM llamado «Capacitor-admob», Pero parece que este está desactualizado.Encontré algunos problemas al usarlo y «@ Capacitor-community / admob» Funciona milagrosamente.

Para administrar todo lo relacionado con la publicidad, creé un archivo llamado admob.ts en algún lugar de él. /fuente Tabla de contenido. Busque la mejor opción para esta lógica.Yo suelo crear un / Fuente / varios Carpetas como esta. En este archivo crearemos:

• Función para insertar anuncios
• Un controlador onChange (para que podamos ajustar los márgenes del anuncio)
• Constante para cambiar prueba a Produce

Agreguemos las importaciones necesarias y definamos constantes. Por simplicidad, solo uso verdadero / falso.Por supuesto, puede usar, como verificar las variables de entorno línea de producción Configuración o algo similar.

import 
AdMob,
AdMobBannerSize,
BannerAdOptions,
BannerAdPluginEvents,
BannerAdPosition,
BannerAdSize,
 from '@capacitor-community/admob'const testing = false

Ahora agrego la función de controlador.Recibe un manejador, escucha BannerAdPluginEvents.SizeChanged Event y pasar la información requerida al controlador. En este caso, la información requerida es la altura, porque la anchura será la anchura total de la pantalla y la altura depende del anuncio.

export function onAdSizeChange(handler: (height: number) => void) 
AdMob.addListener(
BannerAdPluginEvents.SizeChanged,
(size: AdMobBannerSize) => handler(size.height)
)

La última función inicializa AdMob, prepara opciones para el banner y lo muestra:

export async function insertAd() 
await AdMob.initialize(
initializeForTesting: testing,
)    const options: BannerAdOptions = 
adId: 'ca-app-pub-00000000/00000000',
adSize: BannerAdSize.ADAPTIVE_BANNER,
position: BannerAdPosition.TOP_CENTER,
margin: 0,
isTesting: testing,
    await AdMob.showBanner(options)

Nota importante: debe ingresar su ID de anuncio aquí

Puse el anuncio en la parte superior de la pantalla con 0 márgenes.También usé el tamaño ADAPTIVE_BANNER, Por lo tanto, se puede ajustar para que se ajuste a la pantalla tanto como sea posible.

Puede encontrar una descripción general de los tamaños de banner en la fuente de admob:

export declare enum BannerAdSize 50

Ahora necesitamos usar el código. Este código solo debe ejecutarse una vez, así que busque un lugar donde se pueda llamar sin volver a montarlo.Usaré el mío Application.tsx Archivo porque solo se montará una vez.

Utilice el gancho useEffect con una lista vacía de dependencias. En el interior, conecte el gancho e inserte el anuncio.

// inside App()
[...]
useEffect(() => 
onAdSizeChange(height => 
// keep reading
)
insertAd()
, [])
[...]

Pero ¿qué pasa con la altura?Crearemos un estado digital para ahorrar Altura del anuncio. Cambio de tamaño de anuncio Establecerá el valor mientras Aplicación iónica Utilizará este valor para establecer Llenar la parte superior. Esto debería verse así:

export default function App() 
const [adHeight, setAdHeight] = useState<number>(0)    useEffect(() => 
onAdSizeChange(height => setAdHeight(height))
insertAd()
, [])
return (
<IonApp style=paddingTop: adHeight>
[...]
</IonApp>
)

Ahora su aplicación reservará automáticamente espacio en la parte superior de la aplicación para anuncios.

Ahora crearemos el proyecto de Android y registraremos el complemento de AdMob. Pero primero, debe asegurarse de que Android Studio esté instalado. Después de eso, necesitamos instalar el módulo Capacitor para crear una aplicación de Android:

npm i @capacitor/android

Y agregue Android como plataforma:

npx cap add android

Por lo general, puedes usar condensadores. Tapa de iones, Pero los parámetros del condensador cambiaron en ese momento, y la CLI de Ionic aún no se ha actualizado. límite superior npx o condensador npx Debería funcionar bien.

Ahora construyamos el código Ionic y sincronizémoslo con nuestra aplicación.

ionic build
npx cap sync android

Este paso es necesario cada vez que se realiza un cambio en el código iónico.Si tiene problemas al utilizar el complemento (por ejemplo, la importación no funciona) ejecute sincronización de mayúsculas npx android En otra ocasión, me ayudó.

Para registrar el complemento, vaya al archivo android / app / src / main / java /… / MainActivity.java. El archivo debería verse así:

package your.package.name.here;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;public class MainActivity extends BridgeActivity 
@Override
public void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
registerPlugin(com.getcapacitor.community.admob.AdMob.class);

}

En el último paso, debe indicarle a la aplicación AdMob Agregar ID En el archivo de manifiesto de Android.encender android / app / src / main / AndroidManifest.xml Y agrega esta etiqueta dentro Lista de verificación / solicitud Marque y reemplace el valor con el suyo ID de aplicación.

<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-00000000~00000000"/>