Crear un anuncio recompensado (rewardedAd) con Admob en Flutter

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo podemos añadir un anuncio tipo Rewarded 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 getIdRewarded() {
  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/5224354917";
    }
  } else if (Platform.isIOS) {
    if (!test) {
      //Anuncios reales
      bannerId = "tu_id_anuncio_banner_iOS";
    } else {
      //Anuncios de test
      bannerId = "ca-app-pub-3940256099942544/1712485313";
    }
  }
  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 anuncio rewarded.

rewarded.dart

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import '../../utils/idsAnuncios.dart';

class AdRewarded {
  static RewardedAd? _rewardedAd;

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

  static Future<bool> _loadRewardedAd() async {
    Completer<bool> completer = Completer<bool>();

    RewardedAd.load(
      adUnitId: AdHelper.rewardedAdUnitId,
      request: AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (RewardedAd ad) {
          print('Rewarded Ad loaded');
          _rewardedAd = ad;
          completer.complete(
              true); // Completa el Future con true si se carga el anuncio
        },
        onAdFailedToLoad: (LoadAdError error) {
          print('Rewarded Ad failed to load: $error');
          completer.complete(
              false); // Completa el Future con false si falla la carga del anuncio
        },
      ),
    );

  static void showRewardedAd(
      {required Function onReward, required Function onDimiss}) {
    if (_rewardedAd == null) {
      print('Rewarded Ad not loaded yet.');
      onDimiss();
      //onReward(-1);
      return;
    }

    _rewardedAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdDismissedFullScreenContent: (Ad ad) {
        print('Rewarded Ad dismissed');
        onDimiss();
        _loadRewardedAd(); // Carga un nuevo anuncio después de que el actual se haya mostrado.
      },
    );

    _rewardedAd!.show(
      onUserEarnedReward: (AdWithoutView ad, RewardItem reward) {
        print('User earned reward: ${reward.amount}');
        onReward(reward
            .amount); // Llama al callback cuando el usuario gane una recompensa.
      },
    );
  }

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

class AdHelper {
  static String rewardedAdUnitId = getIdRewarded();
}

Y ahora debemos inicializarlo en main.dart

await AdRewarded.initialize();

Y ahora podemos invocarlo desde donde deseemos.

AdRewarded.showRewardedAd(
      onReward: (value) {
        print('User was rewarded for watching an ad. $value');
        // Aquí puedes añadir el código que se ejecutará cuando el usuario gane una recompensa.
      },
      onDimiss: () {
        print('User dismissed the ad without watching the full video.');
        // Aquí puedes añadir el código que se ejecutará cuando el usuario cierre el anuncio sin ver el video completo.
      },
);

Quedando por ejemplo así:

@override
  void initState() {
    super.initState();

   () async {
      await AdRewarded.initialize();
      AdRewarded.showRewardedAd(
        onReward: (value) {
          print('User was rewarded: $value');
        },
        onDimiss: () {
          print('User dismissed the ad.');
        },
      );
    }();

}

Y este es el resultado: