Implementar Google Consent para GDPR con React Native

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos implementar el mensaje de consentimiento de GDPR con React Native.

Vamos a instalar la siguiente librería (https://www.npmjs.com/package/@ulangi/react-native-ad-consent)

npm install @ulangi/react-native-ad-consent --save

Ahora vamos a añadir esta clave en info.plist de iOS:

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

Ahora abrimos AndroidManifest.xml en caso de Android. Y añadimos:

<meta-data android:name="com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT"
        android:value="true"/>
      <uses-library android:name="org.apache.http.legacy" android:required="false"/>

Y ahora creamos nuestro componente llamado consentAdmob.ts

import RNAdConsent from 'ulangi/react-native-ad-consent';

async function obtenerConsentimientoUsuario(publisherId) {
  const consentStatus = await RNAdConsent.requestConsentInfoUpdate({
    publisherId,
  });

  if (consentStatus === RNAdConsent.UNKNOWN) {
    const isInEeaOrUnknown = await RNAdConsent.isRequestLocationInEeaOrUnknown();

    if (isInEeaOrUnknown) {
      const adProviders = await RNAdConsent.getAdProviders();
      
      // Puedes hacer algo con los proveedores de anuncios, por ejemplo, mostrar un modal personalizado

      await RNAdConsent.setConsentStatus(RNAdConsent.PERSONALIZED);
    }
  }
}

async function mostrarAlertAdmobConsent(adAppId, publisherId) {
  const consentStatus = await RNAdConsent.requestConsentInfoUpdate({
    publisherId,
  });

  if (consentStatus === RNAdConsent.UNKNOWN) {
    const formResponse = await RNAdConsent.showGoogleConsentForm({
      privacyPolicyUrl: "https://your-privacy-link.com",
      shouldOfferAdFree: true,
    });
    
    if (formResponse === RNAdConsent.PREFERS_AD_FREE) {
      // Haz algo específico cuando el usuario prefiere una experiencia sin anuncios
    } else {
      await RNAdConsent.setConsentStatus(formResponse);
    }
  }

  // Luego, inicializa AdMob
  await adMob.initialize(adAppId);
}

Para usar las funciones que proporcionamos, deberías llamar a obtenerConsentimientoUsuario antes de mostrar el formulario de consentimiento y de inicializar AdMob con la función mostrarAlertAdmobConsent. Asegúrate de proporcionar los valores adecuados para adAppId y publisherId. Recuerda tambien añadir: «https://your-privacy-link.com» por la URL de política de privacidad de tu APP.

Aquí hay un ejemplo de cómo podrías usar estas funciones:

// Define tus valores de publisherId y adAppId
const publisherId = "pub-1234567890";
const adAppId = "tu_admob_app_id";

// Llama a la función para obtener el consentimiento del usuario
await obtenerConsentimientoUsuario(publisherId);

// Llama a la función para mostrar el formulario de consentimiento y luego inicializar AdMob
await mostrarAlertAdmobConsent(adAppId, publisherId);