Add Ad Consent Message for European Users – AdMob GDPR with Flutter

Tiempo de lectura: 2 minutos

Today we are going to learn how to implement the mandatory consent message from Google AdMob, which will be requested from European users by the GDPR or GPDR law or Data Protection who want to view the ads of the APP with AdMob.

We are going to use the official AdMob package for Flutter (https://developers.google.com/admob/flutter/eu-consent?hl=es-419)

In my case I use:

google_mobile_ads: ^4.0.0

Now let’s apply the following:

In the case of iOS

We must request App Tracking Transparency, for this we go to the Info.plist file and add:

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

We also add this key:

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

And after adding the key, you need to add the AppTrakingTransparency.framework library using Xcode:

Part of Android / iOS

Let’s create a widget called 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();
}
}

To use it, go to the main screen and add the following:

import 'package:flutter/material.dart';
import 'ruta/del/archivo/ConsentAds.dart'; // Adjust the path according to your file structure

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AdMob Consent Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Other widgets of your application here
              Text('Content of the application'),
              SizedBox(height: 20),
              ConsentAds(), // Invoke the ConsentAds widget here
            ],
          ),
        ),
      ),
    );
  }
}

In the case of Android, go to android\app\src\main\AndroidManifest.xml of our app and add:

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

And when running our APP it will appear: