We will today learn to implement request tracking transparency using React Native and Expo.
To do this, we will create the following utils file:
// utils/AdsPermissions.ts (or 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 solicitartPermissionATT(): 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 solicitGoogleAdsConsent(): Promise<boolean> { try { await AdsConsent.requestInfoUpdate(); const result = await AdsConsent.loadAndShowConsentFormIfRequired(); return result.canRequestAds; } catch (error) { console.warn('Error in Google Admob Consent:', error); return false; } } export async function setRequestConfiguration(): Promise<void> { await mobileAds().setRequestConfiguration({ //maxAdContentRating: 'G', // or enum if you have tagForChildDirectedTreatment: false, tagForUnderAgeOfConsent: false, //testDeviceIdentifiers: ['EMULATOR'], }); } export async function initializeMobileAds(): Promise<void> { await mobileAds().initialize(); } // Function that integrates all consent + initialization export async function requestConsentAndInitialize(): Promise<boolean> { if (Platform.OS === 'ios') { const permissionATT = await solicitartPermissionATT(); if (!permissionATT) return false; const permissionGoogle = await solicitGoogleAdsConsent(); if (!permissionGoogle) return false; await setRequestConfiguration(); await initializeMobileAds(); return true; } else { // Android const permissionGoogle = await solicitGoogleAdsConsent(); if (!permissionGoogle) return false; await setRequestConfiguration(); await initializeMobileAds(); return true; } }
Vale vamos por partes:
You need to install the following libraries:
npx expo install expo-tracking-transparency npx expo install react-native-google-mobile-ads
- I created two functions to configure Google Admob consent: one configures ad features (setRequestConfiguration()) and another initializes ad loading.
- Finally, a function that will serve as a way to request consent according to the platform.
You are recommended to implement this functionality in a context, but you can also implement it directly on the first screen before opening the app.
Implementation:
const [adsReady, setAdsReady] = useState(false); const [loading, setLoading] = useState(true); useEffect(() => { (async () => { setLoading(true); try { const ok = await requestConsentAndInitialize(); setAdsReady(ok); } catch (error) { console.warn('Error requesting consent and initializing:', error); setAdsReady(false); } finally { setLoading(false); } })(); }, []);
Sometimes, and in new versions of Apple, the tracking request may be disabled by default. So we can implement the following code:
const STORAGE_KEY = 'att-alert-shown'; export async function requestATTPermission(): 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( 'Permission to track disabled', 'To show personalized ads, enable "Allow apps to ask for tracking permission" in Settings > Privacy > Tracking.', [ { text: 'Go to Settings', onPress: async () => { const url = 'app-settings:'; if (await Linking.canOpenURL(url)) { Linking.openURL(url); } }, }, { text: 'Cancel', style: 'cancel', }, ] ); await AsyncStorage.setItem(STORAGE_KEY, '1'); } } return status === 'granted'; }
