Adding GDPR European Ad Consent Message with React Native Google Mobile Ads (ADMOB) with Expo

by
Tiempo de lectura: 2 minutos

Today we are going to learn how we can add the mandatory ad consent message to comply with GDPR.

The first thing we need to do is to have our message set up: https://devcodelight.com/mensaje-consentimiento-conforme-rgpd-para-admob/

NOTE: I am using version 12.2.0 of react-native-google-mobile-ads at least (https://github.com/invertase/react-native-google-mobile-ads)

Once configured, let’s go to android/app/proguard-rules.pro and add:

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

Now we need to go to our app.json of Expo to add:

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

In my case I have to add it to the rest of the attributes I use:

Now we need to activate delay_app_measurement_init when starting the ads so we go to the configuration of «react-native-google-mobile-ads» inside 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
  }
}

Now we have to rebuild the APP:

npx expo prebuild

And now let’s create the component that will allow us to generate the alert:

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);

      // Logic to handle Apple's App Tracking Transparency for iOS.

      // Initialize the Google Mobile Ads SDK
      await mobileAds().initialize();

      // Here you can request ads after the SDK is initialized
      // (for example, load an ad).
    };

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

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

    handleConsent();
  }, [isMobileAdsStartCalled]);

  return <View />;
};

export default AdsUserConsent ;

And to use it we will do the following:

Let’s go to our home screen and add this component:

<AdsUserConsent/>

To make it work correctly, we must rebuild a development build, we can use this command locally:

npx expo run:android
npx expo run:ios

or remotely with Expo:

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

And now the following message should appear:

Post Views: 12

Leave a Comment