Añadir anuncio Interstitial Admob con Flutter

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo podemos añadir un anuncio tipo Interstitial con Admob en Flutter

Lo primero que vamos a hacer es crear el archivo con nuestros ids de anuncio, para ello tenemos que ir a Admob y obtener el código que nos permitirá añadir el banner.

Ahora vamos a crear este archivo: idsAnuncios.dart

import 'dart:io';

const test = false;

String getIdInterstitial() {
  var bannerId = "ca-app-pub-3940256099942544/6300978111";
  if (Platform.isAndroid) {
    if (!test) {
      //Anuncios reales
      bannerId = "tu_id_anuncio_banner_ANDROID";
    } else {
      //Anuncios de test
      bannerId = "ca-app-pub-3940256099942544/1033173712";
    }
  } else if (Platform.isIOS) {
    if (!test) {
      //Anuncios reales
      bannerId = "tu_id_anuncio_banner_iOS";
    } else {
      //Anuncios de test
      bannerId = "ca-app-pub-3940256099942544/4411468910";
    }
  }
  return bannerId;
}

Hemos añadido una variable que nos permitirá poner los anuncios en modo prueba.

Hemos añadido el id de anuncios de test de Banner que ofrece Admob por defecto.

Además asignamos los anuncios para Android y para iOS.

Donde se indica nuestro_codigo_copiado, añades el código de Admob que has creado.

Ahora vamos a añadir la librería que nos permitirá utilizar los anuncios de Google:

google_mobile_ads

Para ello:

flutter pub add google_mobile_ads

Además, tendremos que añadir lo siguiente dentro de pubspec.yaml para aumentar el minimo SDK a 2.12.0 y permitir null safety

environment:
  # TODO: Update the minimum sdk version to 2.12.0 to support null safety.
  sdk: ">=2.17.0 <3.0.0"

Nota: en mi caso a esta fecha ya genera los proyectos con esta versión:

Ahora abrimos nuestro AndroidManifest dentro del directorio: android/app/src/main/AndroidManifest.xml

Y añadimos el código de aplicación:

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

</manifest>

n caso de iOS deberás añadir dentro de info.plist

	<key>GADApplicationIdentifier</key>
	<string>ca-app-pub-3940256099942544~3347511713</string>

Nota:
id de prueba de APP: ca-app-pub-3940256099942544~334751171

Debes añadir el tuyo, generado desde Admob.

Ahora vamos a nuestra screen principal y vamos a inicializar los anuncios con esta función:

 Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }

Y ahora vamos a crear el interstitial.

interstitial.dart

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:walls_wallpapers/util/idsAnuncios.dart';

class AdInterstitial {
  static InterstitialAd? _interstitialAd;

  static Future<void> initialize() async {
    await _loadInterstitialAd();
  }

  static Future<void> _loadInterstitialAd() async {
    InterstitialAd.load(
      adUnitId: AdHelper.interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (InterstitialAd ad) {
          print('Interstitial Ad loaded');
          _interstitialAd = ad;
        },
        onAdFailedToLoad: (LoadAdError error) {
          print('Interstitial Ad failed to load: $error');
        },
      ),
    );
  }

  static void showInterstitialAd() {
    if (_interstitialAd == null) {
      print('Interstitial Ad not loaded yet.');
      return;
    }

    _interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdDismissedFullScreenContent: (Ad ad) {
        print('Interstitial Ad dismissed');
        // Aquí puedes moverte a la pantalla de inicio o realizar otra acción después de que se cierre el anuncio.
        _loadInterstitialAd(); // Carga un nuevo anuncio después de que el actual se haya mostrado.
      },
    );

    _interstitialAd!.show();
  }

  static void dispose() {
    _interstitialAd?.dispose();
  }
}

class AdHelper {
  static String interstitialAdUnitId = getIdInterstitial();
}

Y añadimos el inicializador en main.dart

AdInterstitial.initialize();

Y ahora podemos cargar nuestro anuncio dónde queramos de esta forma:

AdInterstitial.showInterstitialAd();

O desde un botón por ejemplo:

ElevatedButton(
  onPressed: () {
    AdInterstitial.showInterstitialAd();
  },
  child: Text('Show Ad'),
)

Y listo, este es el resultado: