Implementar request tracking transparency en iOS y permiso de anuncios Admob usando React Native y Expo

Tiempo de lectura: 2 minutos

Hoy vamos a aprender a implementar request tarcking transparency usando React Native y Expo.

Para ello crearemos el siguiente archivo utils:

// utils/AdsPermissions.ts (o similar)
import { Platform } from 'react-native';
import mobileAds, { AdsConsent } from 'react-native-google-mobile-ads';
import { getTrackingPermissionsAsync, PermissionStatus, requestTrackingPermissionsAsync } from 'expo-tracking-transparency';

export async function solicitarPermisoATT(): Promise<boolean> {
  if (Platform.OS !== 'ios') return true;

  const { status } = await getTrackingPermissionsAsync();

  if (status === PermissionStatus.UNDETERMINED) {
    const { status: newStatus } = await requestTrackingPermissionsAsync();
    return newStatus === PermissionStatus.GRANTED;
  }

  return status === PermissionStatus.GRANTED;
}

export async function solicitarConsentimientoGoogleAds(): Promise<boolean> {
  try {
    await AdsConsent.requestInfoUpdate();
    const result = await AdsConsent.loadAndShowConsentFormIfRequired();
    return result.canRequestAds;
  } catch (error) {
    console.warn('Error en consentimiento Google Ads:', error);
    return false;
  }
}

export async function configurarRequestConfiguration(): Promise<void> {
  await mobileAds().setRequestConfiguration({
    //maxAdContentRating: 'G', // o enum si tienes
    tagForChildDirectedTreatment: false,
    tagForUnderAgeOfConsent: false,
    //testDeviceIdentifiers: ['EMULATOR'],
  });
}

export async function inicializarMobileAds(): Promise<void> {
  await mobileAds().initialize();
}

// Función que integra todo el consentimiento + inicialización
export async function pedirConsentimientoEInicializar(): Promise<boolean> {
  if (Platform.OS === 'ios') {
    const permisoATT = await solicitarPermisoATT();
    if (!permisoATT) return false;

    const permisoGoogle = await solicitarConsentimientoGoogleAds();
    if (!permisoGoogle) return false;

    await configurarRequestConfiguration();
    await inicializarMobileAds();

    return true;
  } else {
    // Android
    const permisoGoogle = await solicitarConsentimientoGoogleAds();
    if (!permisoGoogle) return false;

    await configurarRequestConfiguration();
    await inicializarMobileAds();

    return true;
  }
}

Vale vamos por partes:

• En estas funciones nos permitirán configurar el tracking transparency y el permiso de anuncios de admob de una vez.
• He creado una función para solicitar los permisos de Apple y otra para solicitar los permisos de Google Admob.

Tienes que instalar las siguientes librerías:

npx expo install expo-tracking-transparency
npx expo install react-native-google-mobile-ads

• He creado dos funciones para configurar el consentimiento de Google Admob: una configura las características de los anuncios (configurarRequestConfiguration()) y otra inicializa la carga de anuncios.
• Finalmente una funcion que servirá para pedir el consentimiento según la plataforma.

Os recomiendo que implementeis esta funcionalidad en un context, pero también podeís implementarla directamente en la primera pantalla antes de abrir la app.

Implementación:

    const [adsReady, setAdsReady] = useState(false);
    const [loading, setLoading] = useState(true);   

useEffect(() => {
        (async () => {
            setLoading(true);

            try {
                const ok = await pedirConsentimientoEInicializar();
                setAdsReady(ok);
            } catch (error) {
                console.warn('Error al pedir consentimiento e inicializar:', error);
                setAdsReady(false);
            } finally {
                setLoading(false);
            }
        })();
    }, []);

A veces y en las nuevas versiones de Apple, la solicitud de rastreo puede estar desactivada por defecto, para que se solicite igualmente podemos implementar el siguiente código:

const STORAGE_KEY = 'att-alert-shown';

export async function solicitarPermisoATT(): Promise<boolean> {
  if (Platform.OS !== 'ios') return true;

  await new Promise(resolve => setTimeout(resolve, 1000));

  const { status } = await requestTrackingPermissionsAsync();

  if (status === 'denied') {
    const shown = await AsyncStorage.getItem(STORAGE_KEY);
    if (!shown) {
      Alert.alert(
        'Permiso de rastreo desactivado',
        'Para mostrar anuncios personalizados, activa "Permitir que las apps soliciten rastreo" en Ajustes > Privacidad > Rastreo.',
        [
          {
            text: 'Ir a Ajustes',
            onPress: async () => {
              const url = 'app-settings:';
              if (await Linking.canOpenURL(url)) {
                Linking.openURL(url);
              }
            },
          },
          {
            text: 'Cancelar',
            style: 'cancel',
          },
        ]
      );
      await AsyncStorage.setItem(STORAGE_KEY, '1');
    }
  }

  return status === 'granted';
}