Añadir mensaje de consentimiento de anuncios para usuarios europeos Admob GDPR con Flutter

Tiempo de lectura: 2 minutos

Hoy vamos a aprender a implementar el mensaje de consentimiento obligatorio de Google Admob que solicitará a los usuarios europeos por la ley GDPR o GPDR o Protección de Datos que quieran ver los anuncios de la APP con Admob.

Vamos a utilizar el paquete oficial de Admob para Flutter (https://developers.google.com/admob/flutter/eu-consent?hl=es-419)

En mi caso utilizo:

google_mobile_ads: ^4.0.0

Ahora vamos a aplicar lo siguiente:

En caso de iOS

Debemos solicitar App Tracking Transparency, para ello vamos al archivo Info.plist y añadimos:

<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>

También añadimos esta key:

<key>GADDelayAppMeasurementInit</key>
<true/>

Y después de añadir la key, necesitas añadir la librería AppTrakingTransparency.framework usando Xcode:

Parte de Android / iOS

Vamos a crear un widget llamado ConsentAds.dart

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

class ConsentAds extends StatefulWidget {
  @override
  _ConsentAdsState createState() => _ConsentAdsState();
}

class _ConsentAdsState extends State<ConsentAds> {
  @override
  void initState() {
    super.initState();
    _requestConsentInfo();
  }

  // Function to request consent information
  void _requestConsentInfo() {
    final params = ConsentRequestParameters();
    ConsentInformation.instance.requestConsentInfoUpdate(
      params,
      () async {
        if (await ConsentInformation.instance.isConsentFormAvailable()) {
          _loadForm();
        }
      },
      (FormError error) {
        // Handle the error
      },
    );
  }

  // Function to load the consent form
  void _loadForm() {
    ConsentForm.loadConsentForm(
      (ConsentForm consentForm) async {
        var status = await ConsentInformation.instance.getConsentStatus();
        if (status == ConsentStatus.required) {
          _showForm(consentForm);
        }
      },
      (FormError formError) {
        // Handle the error
      },
    );
  }

  // Function to show the consent form
  void _showForm(ConsentForm consentForm) {
    consentForm.show(
      (FormError? formError) {
        // Handle dismissal by reloading form
        _loadForm();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    // Only return an empty SizedBox
    return SizedBox();
  }
}

Para utilizarlo, vamos a la screen principal y añadimos lo siguiente:

import 'package:flutter/material.dart';
import 'ruta/del/archivo/ConsentAds.dart'; // Ajusta la ruta según tu estructura de archivos

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejemplo de Consentimiento de AdMob'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Otros widgets de tu aplicación aquí
              Text('Contenido de la aplicación'),
              SizedBox(height: 20),
              ConsentAds(), // Invoca el widget ConsentAds aquí
            ],
          ),
        ),
      ),
    );
  }
}

En el caso de Android vamos a android\app\src\main\AndroidManifest.xml de nuestra app y añadimos:

<manifest>
     <application>
        <meta-data
            android:name="com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT"
            android:value="true"/>
    </application>
</manifest>

Y al ejecutar nuestra APP aparecerá: