Agregar Ads Admob Flutter 15 minutos

Agregar Ads Admob Flutter 15 minutos

Admob Flutter tutorial

Hicimos un ejercicio en YouTube implementando anuncios de Admob con flutter para Android. Puedes verlo en YouTube o descargar el proyecto de flutter.

Admob y Adsense

Admob y Adsense son empresas de Google con las que muchos desarrolladores trabajan, se diferencian únicamente en que Adsense se enfoca en Web y Admob en aplicaciones.

Ejercicio

Vamos a agregar Admob para flutter usando un plugin y bloques de ejemplo. Cuando tu aplicación esté lista para producción deberás reemplazar los ID de la App y los ID de los bloques de anuncios.

Agregaremos un anuncio en la parte de abajo de flutter, lo que sería el buttomNavigationBar del Scaffold, para que se muestre todo el tiempo flotante sobre el contenido scrollable de la App.

Luego agregaremos un bloque de Ads en modo Widget para Columnas, o ListView dentro del contenido de la App.

Los anuncios se muestran en modo BANNER.

Plugin o Package:
https://pub.dev/packages/admob_flutter en este ejemplo estamos usando la versión: 0.3.4

Agrega esta línea al archivo pubspec.yaml:

dependencies:
  admob_flutter: ^0.3.4

Luego ejecuta el siguiente comando para descargar el plugin o package al archivo de proyecto.

$ flutter pub get

Finalmente importa el plugin o package donde quieras usarlo, incluyendo mail.dart:

import 'package:admob_flutter/admob_flutter.dart';

Si tienes dudas, consulta la documentación de pub.dev https://pub.dev/packages/admob_flutter


Anuncios de ejemplo o prueba de Admob

ID de App de prueba

Admob ID de aplicacion de prueba:
https://developers.google.com/admob/android/quick-start#update_your_androidmanifestxml

<manifest>
    <application>
        <!-- ID App de ejemplo: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

ID de bloques de anuncios de prueba

Admob ID Bloques de anuncios de prueba:
https://developers.google.com/admob/android/test-ads?hl=es#sample_ad_units

Usa estos ID para probar diferentes bloques, el ID de App no debería cambiar, solo los ID bloques.

Formato de anuncioID del bloque de anuncios de prueba
Bannerca-app-pub-3940256099942544/6300978111
Intersticialca-app-pub-3940256099942544/1033173712
Intersticial de vídeoca-app-pub-3940256099942544/8691691433
Vídeo bonificadoca-app-pub-3940256099942544/5224354917
Nativo avanzadoca-app-pub-3940256099942544/2247696110
Nativo avanzado de vídeoca-app-pub-3940256099942544/1044960115

Enviar a producción

No olvides agregar permisos para Internet a tu App antes de enviar a producción.

Reemplaza los ID de ejemplo por los ID que te genera Admob al crear una App.

Agregar una App a Admob

Ve Aplicaciones y añade una App

Luego selecciona si tu App ya está publicada o aun está en desarrollo.

Si seleccionaste que ya está en las tiendas, te llevará a un formulario de búsqueda para que encuentres tu App y la vincules.

Si seleccionaste que NO, entonces te permitirá crear una Nueva Aplicación, elige para que plataforma.

Ya haz terminado, ahora te muestra el AppID, el cual usarás en producción para tu App y a continuación procederás a crear bloques de anuncios.

Asignarle un nombre a tus bloques es útil para poder identificarlos más adelante y poder llevar un control de cuales te dan un mejor rendimiento.

Estaremos encantados de escuchar lo que piensas

Deje una respuesta