Añadir anuncio Interstitial Admob con Flutter

Tiempo de lectura: 4 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 '../../utils/idsAnuncios.dart';
import 'dart:async';

class AdInterstitial {
  static InterstitialAd? _interstitialAd;

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

  // Modificamos el método _loadInterstitialAd para que devuelva un Future<bool>
  static Future<bool> _loadInterstitialAd() async {
    Completer<bool> completer = Completer<bool>();

    InterstitialAd.load(
      adUnitId: AdHelper.interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (InterstitialAd ad) {
          print('Interstitial Ad loaded');
          _interstitialAd = ad;
          completer.complete(true); // Completa el Future con true si se carga el anuncio
        },
        onAdFailedToLoad: (LoadAdError error) {
          print('Interstitial Ad failed to load: $error');
          completer.complete(false); // Completa el Future con false si falla la carga del anuncio
        },
      ),
    );

    return completer.future; // Retorna el Future que será completado en el callback
  }


  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

await AdInterstitial.initialize();

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

() async {
      await AdInterstitial.initialize();
      AdInterstitial.showInterstitialAd();
    }();

O desde un botón por ejemplo:

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

Y listo, este es el resultado:

Un paso más, manejando estados de carga del anuncio:

Ahora podremos avanzar nuestro código con el estado de carga del anuncio por ejemplo detectando si el usuario ha cancelado la carga, o no es capaz de cargar el anuncio por que no tiene internet o no hay anuncios disponibles. Para ello vamos a completar el código de forma más avanzada.

Lo completaremos de la siguiente forma:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

import '../../utils/idsAnuncios.dart';

enum AdResult {
  loaded,
  failedToLoad,
  completed,
  dismissed,
}

class AdInterstitial {
  static InterstitialAd? _interstitialAd;

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

  // Modificamos el método _loadInterstitialAd para que devuelva un Future<AdResult>
  static Future<AdResult> _loadInterstitialAd() async {
    Completer<AdResult> completer = Completer<AdResult>();

    InterstitialAd.load(
      adUnitId: AdHelper.interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (InterstitialAd ad) {
          print('Interstitial Ad loaded');
          _interstitialAd = ad;
          completer.complete(
              AdResult.loaded); // Completa con loaded si se carga el anuncio
        },
        onAdFailedToLoad: (LoadAdError error) {
          print('Interstitial Ad failed to load: $error');
          completer.complete(AdResult
              .failedToLoad); // Completa con failedToLoad si falla la carga del anuncio
        },
      ),
    );

    return completer.future;
    // Retorna el Future que será completado en el callback
  }

  static Future<AdResult> showInterstitialAd() async {
    if (_interstitialAd == null) {
      print('Interstitial Ad not loaded yet.');
      return AdResult.failedToLoad;
    }

    Completer<AdResult> completer = Completer<AdResult>();

    _interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (Ad ad) {
        print('Interstitial Ad showed.');
      },
      onAdDismissedFullScreenContent: (Ad ad) {
        print('Interstitial Ad dismissed.');
        completer.complete(AdResult
            .dismissed); // Completa con dismissed cuando se cierra el anuncio
        _loadInterstitialAd(); // Carga un nuevo anuncio después de que el actual se haya mostrado.
      },
      onAdFailedToShowFullScreenContent: (Ad ad, AdError error) {
        print('Interstitial Ad failed to show: $error');
        completer.complete(AdResult
            .failedToLoad); // Completa con failedToLoad si falla al mostrar
      },
      onAdImpression: (Ad ad) {
        print('Interstitial Ad impression occurred.');
      },
    );

    _interstitialAd!.show();
    return completer
        .future; // Retorna el Future que será completado en el callback
  }

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

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

Y ahora lo utulizaremos de la siguiente forma:

() async {
      AdResult loadResult = await AdInterstitial.initialize();

      if (loadResult == AdResult.loaded) {
        AdResult showResult = await AdInterstitial.showInterstitialAd();

        if (showResult == AdResult.dismissed) {
          print('User dismissed the ad.');
          // Maneja la lógica cuando el anuncio se cierra
        } else if (showResult == AdResult.failedToLoad) {
          print('Failed to show interstitial ad.');
          // Maneja el error según sea necesario
        }
      } else {
        print('Failed to load interstitial ad.');
        // Maneja el error según sea necesario
      }
    }();