Añadir mensaje de consentimiento de anuncios GDPR Europea con React Native Google Mobile Ads (ADMOB) con Expo

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos añadir el mensaje obligatorio de consentimiento de anuncios para cumplir con la GDPR.

Lo primero que tenemos que hacer es tener nuestro mensaje configurado: https://devcodelight.com/mensaje-consentimiento-conforme-rgpd-para-admob/

NOTA: uso la versión 12.2.0 de react-native-google-mobile-ads como mínimo (https://github.com/invertase/react-native-google-mobile-ads)

Una vez configurado, vamos a android/app/proguard-rules.pro y añadimos:

-keep class com.google.android.gms.internal.consent_sdk.** { *; }

Ahora tenemos que ir a nuestro app.json de Expo para añadir:

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "extraProguardRules": "-keep class com.google.android.gms.internal.consent_sdk.** { *; }"
          }
        }
      ]
    ]
  }
}

En mi caso tengo que añadirlo al resto de atributos que utilizo:

Ahora tenemos que activar delay_app_measurement_init a la hora de iniciar los anuncios para ello vamos a la configuración de «react-native-google-mobile-ads» dentro de app.json:

{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you."
    "delay_app_measurement_init": true
  }
}

Ahora hay que volver a reconstruir la APP:

npx expo prebuild

Y ahora vamos a crear el component que nos permitirá generar la alerta:

UserConsent.js

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import mobileAds, { AdsConsent } from 'react-native-google-mobile-ads';

const AdsUserConsent = () => {
  const [isMobileAdsStartCalled, setMobileAdsStartCalled] = useState(false);

  useEffect(() => {
    const startGoogleMobileAdsSDK = async () => {
      if (isMobileAdsStartCalled) return;

      setMobileAdsStartCalled(true);

      // Lógica para manejar Apple's App Tracking Transparency para iOS.

      // Inicializar el SDK de Google Mobile Ads
      await mobileAds().initialize();

      // Aquí puedes solicitar anuncios después de que el SDK esté inicializado
      // (por ejemplo, cargar un anuncio).
    };

    const handleConsent = async () => {
      await AdsConsent.requestInfoUpdate();
      const adsConsentInfo = await AdsConsent.loadAndShowConsentFormIfRequired();

      if (adsConsentInfo.canRequestAds) {
        startGoogleMobileAdsSDK();
      }
    };

    handleConsent();
  }, [isMobileAdsStartCalled]);

  return <View />;
};

export default AdsUserConsent ;

Y para utilizarlo haremos lo siguiente:

Vamos a nuestra pantalla inicial y añadimos este componente:

<AdsUserConsent/>

Para que funcione correctamente, debemos generar de nuevo un development build, podemos usar este comando en local:

npx expo run:android
npx expo run:ios

o en remoto con Expo:

eas build -p android --profile development
eas build -p ios --profile development

Y ahora debería aparecer el siguiente mensaje: